React 101 - part 2: First Component
Tags: javascript, react, beginners, tutorial
Published: 2021-03-09 04:04:57

---
title: React 101 - part 2: First Component
published: true
description: 
tags: javascript, react, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3ui703pme0meo82pu5o.png
series: React 101
---

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.

<h2>My First Component</h2>
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 < >
```jsx
function Welcome() {
  return <h1>Hello React!</h1>
}
ReactDOM.render(<Welcome />, document.querySelector('#app'))
```

We can also pass properties to this component.
```jsx
function Welcome(props) {
  return <h1>Hello {props.name}</h1>
}
ReactDOM.render(<Welcome name="Mike"/>, document.querySelector('#app'))
```

Those properties are contain in an object (<i>props</i>) and in js object can be deconstruct to make the logic easier to understand.
```jsx
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 <i>children</i>
```jsx
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'))
```
![Props children](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fw9n37ciayakvrp601wz.png)

Please note that we enclose our JSX with a <i>div</i> 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 <i>div</i> element

<h2>Class component</h2>
Function is one way to create component in React. You can also use class
```jsx
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
```jsx
function Home() {
    return <div>
        <Welcome name="Mike" />
        <Welcome name="John" />
    </div>
}
ReactDOM.render(<Home />, document.querySelector('#app'))
```
![Home Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orbaoteuht8fskbkbna6.png)

<h2>Conclusion</h2>
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: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>