How to create a new component in react

Start learning to react component: Create a new component in reactjs first thing you need a react to project if you have already project then go to src folder and create new file name as "footer.js". Also, you can create filename as you wish. it's required that you will import component as "import React,{Component} from 'react';" and then create a component as "Footer".

This is a stateful component because we are using class keyword in the below code.

class Footer extends Component{

    render(){

        return(

            <div> <!--this is main parent container-->

              Here will be your html content

            </div>

        )

    }

}

export default Footer;
 

Also, we can write a stateful component as below:

 export default class Header extends Component{

     render(){

         return(

             <>

                 Something text              </>

         );

     }

 }

 

And in the last need to export it as "export default Footer;". Now go to the "App.js" and import as "import Footer from './footer';" and then use "<Footer />" in the "function App" as a given screenshot.

How to import customize CSS in the react?

Call customize CSS in the reactjs at the file name "App.css" as normally we import CSS as "@import URL('cssFileName.css');". As below screenshot:

Stateless component in react: where we are not using class keyword, this is very important things. As below code:

import React from 'react'

export default () => {

    return(

        <>  

            <h1>Home page</h1>

            <p>Home page content</p>

        </>

    )

}

Also we can write stateless component as below:

export default () => 

        <>  

            <h1>Home page</h1>

            <p>Home page content</p>

        </>

For both, we can import this component as you want to give a name like below:

import Home from './view/home/home'

<Home/>

You can give any name and you can call as:

import Sheo from './view/home/home'

<Sheo/>

It will be work fine as your code is shown.