How to create ReactJS components

In previous post we have  learn how about  reactjs application folder structure and how to create reactjs application . In this post we will learn what is components in reactjs , how to create components in reactjs and type of components in reactjs.

Components are the core building block of React apps. Actually, React really is just a library for creating components in its core. Component is reusable code which contains HTML + Javascript.
Components data will be stored in component’s State. This state can be modified based on user
action or other action. Each component needs to return/ render some JSX code – it defines
which HTML code React should render to the real DOM in the end

WE have two type ways for creating component
1. Functional components

2.class-based components

Functional components Example :   This is like a java script function.

User.js

import React from 'react';
const user = () =>{
return<p> i am user of your application </p>
};
export default user;

import React, { Component } from 'react';
import User from './User/User'
class App extends Component {
render() {
return (
<divclassName="App">
<h1> My react application </h1>
<p>Welcome, Users </p>
<User/>
</div>
);
}
}
export default App;