-

tag.
This JSX h1 element contains the string Welcome, hello there

---

PRODOS.
In the preceding code, we created a HelloProdos component using
the JavaScript function. Now, let’s create the same component using
the ES6 JavaScript class as shown in the following code:
// Using ES6 JavaScript class
class HelloProdos extends React.Component {
   render() {
   return (
   
Welcome, hello there PRODOS.
   );
   }
}
In the preceding code, the React.Component is implemented using the HelloProdos class and this class contains the required render() method.
This method displays and updates the rendered output of the component. The name of the user-defined component should start with a capital
letter.
Here, we created a very simple React component using the JavaScript function and ES6 JavaScript class. We will then create our application
related to the React component, but before that, we will see how to display a React component in a browser.
We need to render the React component to the web browser to display it and rendering the React component is another aspect in React. So, a
React component can be rendered in the following two ways:
We can use a React component inside the JSX code of another React component.
We can use a React component to render by passing it to ReactDOM.
In the following code, we are using a React component that we created in the preceding section:
ReactDOM.render(
   ,
   document.getElementById(“content”)
);
In the preceding code, we are using the ReactDOM.render() method to display the React component. The ReactDOM object is part of the standard
React libraries and its render() method takes a React component and an element from the HTML document with the document ID as its content.
But you could have a question in your mind – from where are we getting the HTML document with the ID content.
Let’s see the following code with the HTML and React component together:
   

---

   
   
   
   
   
   
   
As you can see in the preceding code, we used an HTML div element with id= “content”. In this div element, the React component HelloProdos will
be rendered. We will save this file and open it in the browser as shown in the following screenshot:
Figure 8.10: A rendered React component
Using multiple React components
If you have multiple React components in a web page, then all React components must be wrapped in an enclosing tag:
       
Suppose if you do not enclose the preceding two React components, then you will see an error “ JSX elements must be wrapped in an enclosing
tag .” If you wrap the React component using a single HTML div, then the JSX compiler will compile it successfully.
If one React component uses another React component inside, then we do not need to enclose the HTML div element:
   
That means the React components must be returned as a single element in the JSX. Now, we will see how to pass the properties to the React
components.
Using properties (props) in React components
In this section, we will see how to pass the properties to the React components. We already discussed that React data flows downwards. Let’s see
the following code:
   
   
   
   
   
   
   
   
   
In the preceding code, we are using a React component with an attribute greeting with the value Welcome, hello there PRODOS. In JSX, this

---

attribute is very similar to the HTML attribute. And the value of this attribute is passed as the property (props object) to React. This props object is
passed from a parent to a child component. And props are immutable objects so these cannot be changed by the child components.
Let’s take a look at another example of using props in the React component:
class ProductList extends React.Component {
   render() {
   return (