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
React
, ReactDOM
and Babel
<script>
tags that contain ReactDOM.render
method and commented section where component code will be addedroot
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>
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.
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.
<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>
In this tutorial, we learned how to