React 101 - part 2: First Component

#javascript #react #beginners #tutorial

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'))