Post
Ask Question

Different Ways To Define Components In React

In the modern era, components are the building blocks of an Angular or React project. For Angular projects, there is only one way of defining the components, so it is not a big task to learn the syntax and uses of components. But if we talk about React, there are multiple ways to define a component's syntax. So sometimes, it becomes difficult to remember the syntax of the component and understand the uses of components for specific scenarios.

React

In React, we can create either a class-based component or a function-based component. So, in this article, we will learn many methods to create a component and will also learn, in which case, what method will be suitable.

Create Component using Class

  1. import React from 'react';    
  2. import PropTypes from 'prop-types';  
  3.   
  4. class Main extends React.Component {    
  5.     constructor(props) {  
  6.       super(props);  
  7.           
  8.       this.state = {  
  9.          title: "Hello React !!!",  
  10.       }  
  11.    }  
  12.    render() {    
  13.       return (  
  14.           <div>    
  15.          <h2>    
  16.             {this.state.title}   
  17.          </h2>    
  18.          <p>User Name: {this.props.name}</p>  
  19.          <p>User Age: {this.props.age}</p>  
  20.          </div>  
  21.       );    
  22.    }  
  23.      
  24. }    
  25. Main.propTypes ={  
  26.        name:PropTypes.string.isRequired,  
  27.        age:PropTypes.number.isRequired  
  28.    }  
  29.   
  30. Main.defaultProps = {  
  31.   name: 'Pankaj Kumar Choudhary',  
  32.   age: 24  
  33. };  
  34.     
  35. export default Main;   

This is the default method to create a component. In this method, we inherit the “React.Component” class and define the render method. Render method returns the View content for the component. This is mostly used to create the components in a React application. The above component's syntax is allowed for “.jsx” syntax.

Stateless Functional Component

  1. import React from 'react';    
  2. import PropTypes from 'prop-types';  
  3.   
  4. function Main(props) {  
  5.     const myFun=()=>{  
  6.         alert('This is stateless functional component');  
  7.     }  
  8.   return(  <div>    
  9.          <h2>    
  10.            Hello React!!!  
  11.          </h2>    
  12.          <p>User Name: {this.props.name}</p>  
  13.          <p>User Age: {this.props.age}</p>  
  14.          <input type="button" value="Submit" onClick={myFun} />  
  15.          </div>)  
  16. };    
  17. export default Main;    

The above-given code is the best example of a stateless functional component. Stateless Functional Component is the best approach if we don’t need to define the state for our component. If we are not using the lifecycle hooks or state in component, then stateless functional component can be the best approach.

Stateless Functional Component using lambda expression

  1.  import React from 'react';    
  2. import PropTypes from 'prop-types';  
  3.   
  4. var Main=(props)=> {  
  5.     const myFun=()=>{  
  6.         alert('This is stateless functional component');  
  7.     }  
  8.   return(  <div>    
  9.          <h2>    
  10.            Hello React!!!  
  11.          </h2>    
  12.          <p>User Name: {this.props.name}</p>  
  13.          <p>User Age: {this.props.age}</p>  
  14.          <input type="button" value="Submit" onClick={myFun} />  
  15.          </div>)  
  16. };    
  17.  export default Main;    

The above example is the same as the previous one. The only difference is that in this example, we define the function using lambda expression.

The Presentational Component

The Presentational components are components that render only HTML. The Presentational components rarely have a state. These components only define how the View will look and they don’t deal with state and store (if Redux is used).  These components don’t define how data is loaded or mutated into component.

  1. import React from 'react';    
  2. import PropTypes from 'prop-types';  
  3.   
  4. var Main=(props)=> (  
  5.         <div>    
  6.          <h2>    
  7.            Hello React!!!  
  8.          </h2>    
  9.          <p>User Name: {this.props.name}</p>  
  10.          <p>User Age: {this.props.age}</p>  
  11.          <input type="button" value="Submit" onClick={myFun} />         
  12.          </div>  
  13. );    
  14.  export default Main;   

Define Component using “createClass” Method

This is the oldest way to define the component. It is similar to “React.Component” but “React.component” is small syntax sugar that allows us to create components using the ES6 syntax. If you are not using the ES6, then “createClass” is the best method to create a component because each ES6 syntax finally converts into ES5 syntax.

  1. var Main = React.createClass {    
  2.    render() {    
  3.       return (  
  4.           <div>    
  5.          <h2>    
  6.             {this.state.title}   
  7.          </h2>    
  8.          <p>User Name: {this.props.name}</p>  
  9.          <p>User Age: {this.props.age}</p>  
  10.          </div>  
  11.       );    
  12.    }  
  13.      
  14. }    
  15. Main.propTypes ={  
  16.        name:PropTypes.string.isRequired,  
  17.        age:PropTypes.number.isRequired  
  18.    }  
  19.   
  20. Main.defaultProps = {  
  21.   name: 'Pankaj Kumar Choudhary',  
  22.   age: 24  
  23. };  

Define Component using  TSX

If you are using the TSX(TypeScript Syntax XML) instead of JSX(JavaScript Syntax XML) to create the component, then the following will be the syntax.

  1. import * as React from 'react';  
  2. import { Link } from 'react-router-dom';  
  3.   
  4. interface ComponentState{  
  5.     paging:number,  
  6.     order:string  
  7. }  
  8.   
  9. interface ComponentProp{  
  10.     Paging:Function,  
  11.     Order:Function  
  12. }  
  13.   
  14. export default class SortPaging extends React.Component<ComponentProp, ComponentState>   
  15. {  
  16.     constructor(props:ComponentProp){  
  17.         super(props);  
  18.         this.state={paging:20,order:'Default Sorting'}  
  19.     }  
  20.   
  21.     ordering=()=>{  
  22.   
  23.     }  
  24.   
  25.     render() {  
  26.         return (  
  27.             <div className="product_sorting_container product_sorting_container_top">  
  28.             <p>This is React Component</p>  
  29.         </div>  
  30.     );  
  31.     }  
  32. }    

There is no big difference between the syntax of JSX and TSX to create a component. The only difference is that in “React.Component”, we need to pass the two parameter components' initial props and states. If we don’t have any initial state and props for the component, then we can pass any value type for both values. Believe me, TSX provides more features rather than simple JSX syntax. Using TSX, we can get the benefits of TypeScript programming language.

Points to consider when creating the Components

  • If you need to define the component life cycle hooks and state for the component, then “React.Component” class syntax will be a better way to create the component for the project.
  • If we are not using the state and lifecycle hooks for the component, then functional component can increase the performance of our application; so in this case, instead of class, we can use the functional component.
  • If you are using the JSX for React structure, then I believe, use the TSX instead of JSX. This is my personal opinion because I think if we use TSX, then we get the TypeScript power along with all JSX features.
  • Stateless functional component and Presentational component both are functions but the only difference is the syntax to write the component.
  • If there is any need of the component lifecycle hooks and state of the component, then class will be a better approach to create a component.

Conclusion

In this article, we learned different techniques to write the components in React application. Put your query and doubts in the comment section if you have any. Thanks!


Similar Articles