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.

Create your first React Js Application

We are going to create first React Js Application. Nowadays React is very popular and booming in the market.

For creating React App. We are using npm and install some frameworks.

So let’s begin by installing react in our environment. We’ll use the create-react-app javascript framework.

 npm install -g create-react-app

Now we can create the project template using above command.

 create-react-app first-app

It will take some time to install all the module related to React.
Once installation complete, go the folder "first-app" and run the command npm start

cd first-app
npm start

It will start the server on 3000 port. Default application will look like this.

Congratulations, your first application is ready.

Now you can do your customization based on your requirement start by editing the file index.html.

Hope you like this simple way to create React application using some frameworks.

For customization, you have to require knowledge React component and other stuff.