React Components | What is Component in React Js | Importance of Components in Application

Hello & As-salam u alikum ! This is the second article related to React js , In this blog we will discuss the introduction and importance of Components.

The Programmers used to write a lot of code in earlier days to create application ,In which many of the code was much repetitive ,assume that there is one functionality which is present on page-1 ,page-2 ,page-3 & pages-4 ,we use to copy and paste the code on each page, when ever any change was required,we need to change the code on every page or view, That was very difficult task for developer for manage such code. 

React js came to resolve this problem with component base class code. In which we do not have to write the code again and again ,we just make a single unit of generic code once then we use the same component every where on application. 

Types of Components: 

React js have two types of components

1. Functional 
2. Class

In ReactJS, we have mainly two types of components. They are Functional Components Class Components Functional Components: function components are a way to write components that only contain a render method and don't have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props(properties) as input and returns what should be rendered. A valid functional component can be shown in the below example. Example import React, { Component } from 'react';   class App extends React.Component {      render() {         return (            <div>               <Title />               <Description/>            </div>         );      }   }   class Title extends React.Component {      render() {         return (            <div>               <h1>Dot Net Core Community</h1>            </div>         );      }   }   class Description extends React.Component {      render() {         return (            <div>               <a href="https://dotnetcorecommunity.blogspot.com/"> our Blog</a>               <p>MY NAME IS SALMAN MASOOD , I M A COMPUTER SCIENCE & MATHS GRADUATED FROM UNIVERSITY OF KARACHI, PAKISTAN , TEACHING IS MY PASSION AND MY AIM IS TO DELIVER ALL MY KNOWLEDGE AMONG THOSE STUDENTS WHO CAN'T AFFORD TUTORS OR EXPENSIVE INSTITUTE FEES. TILL MY LAST BREATH  I WILL BE KEEP SHARING MY ALL KNOWLEDGE AND INFORMATION WITH YOU .... KEEP REMEMBER ME IN YOUR PRAYERS !   </p>            </div>         );      }   }   export default App;

Class Components:

Class components are more complex than functional components. It requires you to extend from React. Component and create a render function which returns a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends Component and has a render function.

import React, { Component } from "react"; class App extends React.Component {   constructor() {     super();     this.state = {       data: [         {           id: 1,           name: "salman"         },         {           id: 2,           name: "Raza"         },         {           id: 3,           name: "Muzammil"         }       ]     };   }   render() {     return (       <div className="Container">                 <StudentName />         <List data={this.state.data} />       </div>     );   } } class StudentName extends React.Component {   render() {     return (       <div>         <h1>Student Name Detail</h1>       </div>     );   } } class List extends React.Component {   render() {     return (       <table className="table">         <thead>           <tr>             <th>id</th>             <th>Name</th>           </tr>         </thead>         <tbody>           {this.props.data.map(item => (             <tr key={item.id}>               <td>{item.id}</td>               <td>{item.name}</td>             </tr>           ))}         </tbody>       </table>     );   } } export default App;