Wednesday, May 13, 2020

ReactJS Components

ReactJS Components


Component


Elements and components are the basic building blocks of ReactJS applications. We can split the User Interface(UI) into independent, discrete, and reusable blocks and consider them as isolated. Components are like JavaScript functions. Components can take some arbitrary inputs (known as “props”) in and return React elements specifying what should appear on the UI as output.

reactjs components


Defining a Component


We can define a component as a class or function.

function ShowMessage(props) {
  return <h2>{props.message}</h2>;
}
We can also define a component as the ES6 Class.

class ShowMessage extends React.Component {
  render() {
    return <h2>{this.props.message}</h2>;
  }
}
The above two components are equivalent form the ReactJS point of view.

Rendering a component


An element can be used to represent a component.

class ShowMessage extends React.Component{
  render() {
    return <h2>{this.props.message}</h2>;
  }
}

const element = <ShowMessage message="ReactJS is Flexible" />;
ReactDOM.render(element, document.getElementById('root'));

An element representing a user-defined component is handled by ReactJS, by passing its JSX attributes and children as a single object. This object is known as “props”.
More complex components can be crafted with unit components. 

For example,

class ShowMessage extends React.Component{
  render() {
    return <h2>{this.props.message}</h2>;
  }
}

ReactDOM.render(<div>
    <ul>
      <li><ShowMessage message="React is Flexible" /></li>
      <li><ShowMessage message="React is Declarative" /></li>
    <li><ShowMessage message="React is Fast" />
    </li>
    </ul>
  </div>, document.getElementById('root'));

Stateless and Stateful Components

There can be stateless or stateful components. The stateless component is a component that does not have a state object. It is simple and static. For example,

import React from 'react';

class Topics extends React.Component {
   render() {
      return (
         <div className="topic-stateless">
             <h3>Stateless component</h3>
            <Topic/>
            <Description/>
         </div>
      );
   }
}
class Topic extends React.Component {
   render() {
      return (
         <div>
            <h1>Java</h1>
         </div>
      );
   }
}
class Description extends React.Component {
   render() {
      return (
         <div>
            <p>Java is an Object-Oriented Programming language</p>
         </div>
      );
   }
}
export default Topics;
A stateful component is a component that contains the state object. The state object is internal to a component and holds the data that is supposed to change later. The state is set using a method.
For example,

class Myelement extends React.Component
{
  constructor()
  {
    super();
    //state object
  this.state={
    name:"Pushpendra",
    branch:"Software Development"
  };
  }
render()
{
  return <div><h2>Hello {this.state.name}</h2><p>Dept : {this.state.branch}</p></div>;
}
}

ReactDOM.render(<Myelement />, document.getElementById('root'));
A more detailed example of a stateful component.
import React from 'react';

class Mytopics extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "topic":"Java",
               "Description":"Java is an object-oriented programming language"
            },{
                "id":2,
                "topic":"Pyhton",
                "Description":"Pyhton is easy to learn"
             },
             {
                "id":3,
                "topic":"C++",
                "Description":"C++ is  old but powerful programming language"     
             }
         ]
      }
   }
   render() {
      return (
         <div className="topic-stateful">
             <h3>Stateful Component</h3>
            <ul>
                  {this.state.data.map((sub, i) => <Description key = {i} 
                     data = {sub} />)}
            </ul>
         </div>
      );
   }
}

class Description extends React.Component {
   render() {
      return (
         <li>
            {this.props.data.topic}
            <p>{this.props.data.Description}</p>
         </li>
      );
   }
}
export default Mytopics;