React 101 - part 2: First Component

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