Create your first React Component

We have learned in the previous post. How to create React Application using create-react-app npm.

It's very simple and easy to create React Application. Now time to create first React Component.

Assume, you already learn how to create React Application using create-react-app and start to understand the structure what it's provided by default.

If you check inside the folder there were App.js file.

Default code provided by application once you create it.

Now we are going to create our first component and will add on App component.

Create new file First.js and add following code.

 
import React, { Component } from 'react';

class First extends Component {
  render() {
    return (
      

 This is the first component
      
);
  }
}

export default First;

Check above code and there is the html code. Span tag inside the div tag and added style on span tag for text color.

Under span tag text is "This is the first component".

Once First.js file code is completed that mean we have completed our first component code.

How to use this component into other components. We can import the First component wherever we need to use.

We have App component in the application so we are going to import the First component into App component.

 
import First from './First'

Once we are done with import then we can use First component into App component html section.



Refer above image with marked red box. the first one is the import statement and the second one how to use the First component.

After adding the First component. refresh the page you will see the blue color text which is written on the First component.


Once you able to see the blue text line on your browser that means you are done with your First component.

Congratulation!! for the first step toward to learning React.

Hope you like this post. Stay tuned for the upcoming post.