After my Javascript series: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3
I am now ready to begin my React learning journey :)
Click follow if you want to miss nothing. I will publish here on Dev.to what I learn from my React course the day before.
Without further ado here is a summary of my notes for day 2.
My First Component
Let's create our first React component by creating a function name Welcome. Note that a React component name always start with an uppercase.
To render a component it's like any other HTML tag, we put it inside < >
function Welcome() {
return <h1>Hello React!</h1>
}
ReactDOM.render(<Welcome />, document.querySelector('#app'))
We can also pass properties to this component.
function Welcome(props) {
return <h1>Hello {props.name}</h1>
}
ReactDOM.render(<Welcome name="Mike"/>, document.querySelector('#app'))
Those properties are contain in an object (props) and in js object can be deconstruct to make the logic easier to understand.
function Welcome({name}) {
return <h1>Hello {name}</h1>
}
ReactDOM.render(<Welcome name="Mike"/>, document.querySelector('#app'))
Since the component act like a HTML tag that's mean it is also possible to enclose something inside.
The content that is pass to the component can then be rendered with the props children
function Welcome({name, children}) {
return <div>
<h1>Hello {name}</h1>
<p>{children}</p>
</div>
}
ReactDOM.render(
<Welcome name="Mike">Welcome to React</Welcome>, document.querySelector('#app'))
Please note that we enclose our JSX with a div tag. That's because JSX code must be wrapped in ONE top level element only.
So if you like to write two headers, you must put them inside a parent element, like a div element
Class component
Function is one way to create component in React. You can also use class
class Welcome extends React.Component {
render () {
return <div>
<h1>Hello {this.props.name}</h1>
<p>{this.props.children}</p>
</div>
}
}
ReactDOM.render(<Welcome name="Mike">Welcome to React</Welcome>, document.querySelector('#app'))
Finally we can create a main component that call other components
function Home() {
return <div>
<Welcome name="Mike" />
<Welcome name="John" />
</div>
}
ReactDOM.render(<Home />, document.querySelector('#app'))
Conclusion
That's it for today. We still have a lot to learn, so see you tomorrow... If you want to be sure to miss nothing click follow me!
Follow me on Twitter: Follow @justericchapman
Top comments (0)