ReactJS Tutorial – React Components

Posted by

The tutorial provides the insight on the usage of React components. The traditional methodologies ends up with the lengthy code piece which becomes difficult to maintain and requires more effort in case of bug fixing.

What is React component ?

With React Components, the complex code piece is divided into small JavaScript Functions termed as “components” which results into independent , reusable , isolated code with ease of maintainability.

The components (which are usually JavaScript functions) accepts inputs called as “props” and in return provides the React elements as the view output. The components can be classified as:

  • Functional components (use of function as component)
  • Class Components (use of class as component)

Component Life cycle

The React components follows the life cycle which includes various methods to be overridden. The below given diagram depicts the phases used by React and the methods getting invoked in each phase.

Diagram Reference Link: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Component Life cycle Diagram

Render Phase: The grey area depicts the Render Phase used by React to perform the below actions

  • Render Phase can be paused by React
  • Render Phase can be aborted by React
  • Render Phase can be restarted by React

Commit Phase: The white area depicts the Commit Phase used by React to perform the below actions

  • allows React to work with the DOM Structure
  • allows React to run the side effects
  • allows React to update with the DOM Structure

Component methods

Mounting in Component: Mounting is related to the creation of the component in the DOM Structure. The below given methods are invoked in the same sequence when an instance of component is created and inserted in the DOM Structure.

  • constructor( )
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

Updating in component : The updating is related with the update of the component which could have the change in props or state in the component. The component invokes the below given methods in the same sequence when re-rendered it for the update in the DOM Structure.

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

Unmounting in component : Unmounting is related to the removal of the component from the DOM Structure.

  • componentWillUnmount()

Exception Handling in Component: The error occurs while rendering the component or in the constructor of the child component are managed.

  • static getDerivedStateFromError()
  • componentDidCatch()

render method in the class component

The component uses the render() which is only required methods to be implemented. The render function does not modify the state of the component and returns the same output for each invocation. The invocation of render() examines the this.props and this.state and performs the below given actions

  • React elements </div> or custom components created using JSX to be rendered to the DOM node in the Structure.
  • allows to return multiple elements including arrays or fragments
  • allows to render child components into different sub tree in the DOM Structure.
  • renders the strings and numbers as text node in the DOM Structure
  • Does not render Boolean or null values.

Component Reference Link : https://reactjs.org/docs/react-component.html#render

Functional Component example

Let’s see the simple example where function acts as the component

function greetUser(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <greetUser name="Mohit Sharma" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);
  • ReactDOM.Render() includes the element with the greetUser()
  • React invokes the greetUser() where name is passed as props.
  • React reads the props value
  • React returns the complete string within heading as ‘<h1>Hello, Mohit Sharma </h1>’
  • React updates the DOM Structure

Class Component example

Let’s see the simple example where class acts as the component.

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {  
      return (  
         <div>  
            <HeaderClass/>  
            <ContentClas/>  
         </div>  
      );  
   }  
}  
class HeaderClass extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Welcome to Oracleappshelp .Enhance your knowledge...</h1>  
         </div>  
      );  
   }  
}  
class ContentClas extends React.Component {  
   render() {  
      return (  
         <div>  
            <h2>Oracle and Open Source Technology Blog</h2>  
            <p>do let us know anout your feedback to improve our technology blogs</p>  
         </div>  
      );  
   }  
}  
export default App;