HomeTutorsContact

How to create a React component?

By Gulshan Saini
Published in ReactJS
July 16, 2020
2 min read

Multiple React elements or components can be combined to form a component. Components are reusable pieces of UI that can be used in different parts of an application. A component name starts with a capital letter, for example <WelcomeUser>.

Components accept props(properties) as arguments which they can consume or pass down further to child components.

We will kick off this tutorial with the following code that

  • imports React, ReactDOM and Babel
  • <script> tags that contain ReactDOM.render method and commented section where component code will be added
  • has a root element with id of root, to render the React application
<html>
  <head>
    <title>Introduction to React</title>
    <!-- import React as dependency -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- import ReactDOM as dependency -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- import Babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <!-- container to render React -->
    <div id="root"></div>

  <script type="text/babel">
    // Component code goes here

    // Render function to display element on UI
    ReactDOM.render(reactElement, document.getElementById("root"));
  </script>
  </body>
</html>

Creating a basic component

We will first create a <Today> component that will display local date and time to the user. For this we will be using toLocaleDateString() and toLocaleTimeString() methods defined in Date() class. Since this component does not require any props, we will not include them in the function definition.

const Today = () => {
  let date = new Date()
  return (
    <h4>
      Today is {date.toLocaleDateString()}. Local time is{' '}
      {date.toLocaleTimeString()}
    </h4>
  )
}

To use JavaScript inside JSX we have used curly braces in the above code. The <Today> component is very generic and can be used across our application by just calling the <Today/> component.

Composing a component

In React we can combine two or more components to create a large component. This is also known as component composition in React.

Let’s create a <Greet> component that will accept the user as a prop and personalize the message for each user. We can access the prop using dot notation or even using object destructuring.

const Greet = props => {
  return (
    <div>
      <h1>Hello {props.user}</h1>
    </div>
  )
}

We can include the <Today/> component just after the h1 tags to display local date and time to user as follows

const Greet = props => {
  return (
    <div>
      <h1>Hello {props.user}</h1>
      <Today />
    </div>
  )
}

Since the Greet component accepts user as a prop, we can create multiple instances of the same without any interference. A prop can be passed to a component by defining attribute on the component like <Greet user="Gulshan Saini"/>.

Let’s create multiple instances of the Greet component and wrap them inside the App functional component.

const App = () => {
  return (
    <React.Fragment>
      <Greet user='Gulshan Saini' />
      <Greet user='John Doe' />
    </React.Fragment>
  )
}

You might have noticed that we have wrapped two instances of Greet inside the <React.Fragment>. This is required as a component can only have a single root element. React fragments are a special way of wrapping multiple components however they do not introduce new DOM nodes. We could have also wrapped two instances of the Greet component inside the parent div element however that would unnecessary create a parent DOM node which might not be required.

See, how easy it is to create reusable components and compose a new component using other components.

The last thing is to merge component in base code that was introduced in the first section and pass <App/> component inside the ReactDOM.render() method.

Final code and output

<html>

<head>
  <title>Introduction to React</title>
  <!-- import React as dependency -->
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <!-- import ReactDOM as dependency -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <!-- import Babel -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <!-- container to render React -->
  <div id="root"></div>

  <script type="text/babel">
    // Component code goes here

    const Today = () => {
      const date = new Date();
      return (
        <h4>
          Today is {date.toLocaleDateString()} and local time is{" "}
          {date.toLocaleTimeString()}
        </h4>
      );
    };

    const Greet = (props) => {
      return (
        <div>
          <h1>Hello {props.user}</h1>
          <Today />
        </div>
      );
    };

    const App = () => {
      return (
        <React.Fragment>
          <Greet user="Gulshan Saini" />
          <Greet user="John Doe" />
        </React.Fragment>
      );
    };

    // Render function to display element on UI
    ReactDOM.render(<App />, document.getElementById("root"));
  </script>
</body>

</html>

Output

Outro

In this tutorial, we learned how to

  • create a reusable piece of UI using React components
  • compose component
  • difference between React element and component
  • pass props to a component
  • use React fragments to avoid additional DOM node creation

Tags

#react
Previous Article
How to style a React element?

Related Posts

ReactJS
How to set dynamic inner text with React.createElement()?
July 19, 2020
1 min
Gulshan Saini

Gulshan Saini

Fullstack Developer

Topics

Angular
JavaScript
ReactJS
Typescript

Subscribe to our newsletter!

We'll send you the best of our blog just once a month. We promise.
© 2021, All Rights Reserved.

Quick Links

Contact UsBrowserCSSPythonPuppeteer

Social Media