DEV Community

Cover image for React 101 - part 2: First Component
Eric The Coder
Eric The Coder

Posted on • Edited on

9 1

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'))
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

Props children

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'))
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

Home Component

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

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more