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.

In the traditional approach, where the develop components when updated it required the traversal of the complete DOM Tree to find the DOM element which needs to be updated and thus makes the DOM Manipulation as an expensive action.

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.

With React JS Library, the React JS Components uses the Virtual DOM which provides the abstraction of the actual DOM where components are represented as nodes. Through React JS library we can now update the Virtual DOM by updating the component itself and thus avoid complete DOM Tree traversal which makes it performance oriented.

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)

How to create a React JS Component ?

The below given is the simple React JS App.js file where

App– is the component name , should be given with Pascal Casing

render() – is the method used to render the component elements

React.createElement – helps in creating the javaScript element

h1 – represents the HTML element

import React from 'react';   
class App extends React.Component { 
    render() {
        return React.createElement("h1", {}, "Hello World!!!");
    }
}
export default App;

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;