How to create component in Reactjs?

In this reactjs tutorial for beginners we learn what is component and what is a functional component in react js..

A piece of code that can reuse multiple times in your projects such as Function. Header, Footer is best example of functional components.

1. Right Click on src folder and click on New File to create your first file.
2. Give the file name for your page like (User.js) keep the first latter as capitalize.
3. Wright below code in your file (User.js).

User.js

function User() {
    return (
      <div className="App">
       <h1>Hello User !</h1>
      </div>
    );
  }

export default User;

-------OR--------

export function User()
{
    return(
        <h1>User</h1>
    )
}

App.js

import logo from './logo.svg';
import './App.css';
import User from './User';

import {User} from './User'
function App() {

  return (
    <div className="App">
     <h1>Hello World !</h1>
     <User />
    </div>
  );
}

export default App;

1. Open Index.js file and import or replace default ‘./App’ file name to your file name ‘/User’.
2. Same as in render function, just add or replace <App /> tag to your file name tag <User />.

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Example of component in react js

Open your project using cmd follow the bellow steps. (refer the below image for your reference).

• C:\Users\user>cd project
• C:\Users\user\project>cd blog
• C:\Users\user\project\blog>npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

Component Type in Reactjs.

• Functional Component
• Class Component
• Hight order component
• Pure Component
• Controlled Component
• Uncontrolled Component
• Nested Component