How to create a React component?

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>