Types of React Components | How to create react component


React Component

React Component is a class or function that creates UI elements and return via a render method. You can pass data to react component to set in html UI elements. If you need to design few similar sections in web page like below, you just have to create one component and reuse it every time to need. 

react component example

Components are building blocks in react app. You can split you web page into reusable and isolated pieces.

Like javascript function, component get input (called props) and return elements. First letter of component must be capital letter.


Types of React Components

There are two types of React Components, Class Components and Function Components.

How to create React Component

React Class Component

Steps to create react class component

  • Open react app "my-app" in VSCode
  • Create new jsx file as App.jsx (First letter always be capital) in src folder
  • Import react library to create react element

import React from 'react';


  • To create class component, also import Component class as

import { Component } from 'react';


You can import multiple libraries in one line as

import React, {Component} from 'react';


  • Write class as

class App extends Component{
}


Here class is a keyword
App is the name of your class component
To create class component, you must inherit you class from Component. React use keyword "extends" for inheritance and then write parent class "Component" from which you want to inherit your child class. Now our class "App" can use all functionalities of "Component" class.

  • Next step is to write react render method inside class.
render(){
}

  • Create and return UI element from inside the render method as
return(
  <h1>My react heading</h1>
);

By default, you can return only one element. To return multiple element, enclose them in <div> container or react <Fragment> as below

return(
  <div>
    <h1>My react heading</h1>
    <p>This is react paragraph</p>
  </div>
);

OR

return(
  <React.Fragment>
    <h1>My react heading</h1>
    <p>This is react paragraph</p>
  </React.Fragment>
);

  • At the end, export react component App as

export default App;

 

App.jsx file looks like this

import React, {Component} from 'react';

class App extends Component{
  render(){
    return(
      <div>
        <h1>My react heading</h1>
        <p>This is react paragraph</p>
      </div>    
    );
  }
}
export default App; 

  • Our next step is to import App.jsx in index.jsx. Open index.jsx and write below line at top to import App component

import App from './App';


./ means that App.jsx is located at the same location as index.jsx
Now start development server by command "npm start
  • You react app will be loaded in browser

React Function Component

Remove all code from App.jsx file 
Steps to create function component
  • Import only react. Don’t import Component in case of function component.
import React from 'react';

  • Write normal javascript function App as
function App(){
}

  • Create and return UI element inside function as
return(
  <div>
    <h1>My react heading</h1>
    <p>This is react paragraph</p>
  </div>    
);

  • Export function component as
export default App;


Now App.jsx looks like this

import React,{Component} from 'react';
function App(){
  return(
    <div>
      <h1>My react heading</h1>
      <p>This is react paragraph</p>
    </div>    
  );
}
export default App;
  • Save it for testing react output in browser as was in case of class component.

No comments:

Post a Comment