There are 3 ways to create a component in REACT:

• USING a depreciated VARIABLE function
• Using a Class
• Using a Stateless Functional Component

In this, you need to declare a variable in your Javascript file/tag and use the React.createClass() function to create a component using this code.

var MyComponent = React.createClass({
   render() {
      return <div>
      <h1>Hello World!</h1>
      <p>This is my first React Component.</p>
      </div>
   }
})

Now, use the div element to create a unique ID for the specific page and then link the above script onto the HTML page.

<div id=”react-component”></div>

Use ReactDOM.render() function to take 2 arguments, the react component variable and the targeted HTML page.

ReactDOM.render(<MyComponent />, document.getElementById('react-component'))

Finally, SAVE the HTML page to display the result like this one below:

Javascript has lately started supporting classes. Any React developer can easily create a class using the class extends (Inherits). Following is the code

It might sound a bit complex, but this basically means that a normal function will be used in place of a variable to return a react component.

Create a const called MyComp and set it as EQUAL to a () function. Use the arrow function, => to declare the logic of the function as follows:

const MyComponent = () => {
   return <div>
   <h1>Hello!</h1>
   <p>This is my first React Component.</p>
   </div>
}