react js-tutorial

React Component with example

For the development of a single page application, the developers wrote hundreds of lines of code in advance. Making updates to these programmes, which use the conventional DOM structure, was exceedingly difficult. If a mistake is discovered, the entire application is manually searched and updated. The component-based methodology was developed to address a problem. This method breaks down the entire application into a handful of manageable logical groups of code, or components.

A Component is regarded as one of the fundamental elements of a React application. Construction of UIs becomes substantially simpler as a result. The final user interface of your application will be made up of a parent component that unifies all the child components even if they all share the same area.

Each React component has its own unique structure, functions, and APIs. Depending on your needs, they can be reused. Consider the entire user interface as a tree to aid in comprehension. The root serves as the initial component in this case, and each of the other parts develops into a branch, which is then further subdivided into sub-branches.

Functional Components

In React, 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.

function WelcomeMessage(props) {  
  return <h1>Welcome to the , {props.name}</h1>;  
}  

The functional component is also known as a stateless component because they do not hold or manage state. It can be explained in the below example.

Example

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {  
      return (  
         <div>  
            <First/>  
            <Second/>  
         </div>  
      );  
   }  
}  
class First extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Learn Code Zone</h1>  
         </div>  
      );  
   }  
}  
class Second extends React.Component {  
   render() {  
      return (  
         <div>  
            <h2>www.learncodezone.com</h2>  
            <p>This websites contains the great CS tutorial.</p>  
         </div>  
      );  
   }  
}  
export default App;    

Output

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. Valid class component is shown in the below example.

class MyComponent extends React.Component {  
  render() {  
    return (  
      <div>This is main component.</div>  
    );  
  }  
}  


The class component is also known as a stateful component because they can hold or manage local state. It can be explained in the below example.

Example

In this example, we are creating the list of unordered elements, where we will dynamically insert StudentName for every object from the data array. Here, we are using ES6 arrow syntax (=>) which looks much cleaner than the old JavaScript syntax. It helps us to create our elements with fewer lines of code. It is especially useful when we need to create a list with a lot of items.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();  
      this.state = {  
         data:   
         [  
            {             
               "name":"Abhishek"             
            },  
            {            
               "name":"Saharsh"             
            },  
            {    
               "name":"Ajay"          
            }  
         ]  
      }  
   }  
   render() {  
      return (  
         <div>  
            <StudentName/>  
            <ul>            
                {this.state.data.map((item) => <List data = {item} />)}           
            </ul>  
         </div>  
      );  
   }  
}  
class StudentName extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Student Name Detail</h1>  
         </div>  
      );  
   }  
}  
class List extends React.Component {  
   render() {  
      return (  
         <ul>            
            <li>{this.props.data.name}</li>   
         </ul>  
      );  
   }  
}  
export default App;  


Output

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.