ReactJS – Components

Components facilitates you to split the UI into multiple independent, reusable modules. It is much similar like JavaScript functions. The accepts arbitrary inputs called “props” and produces react elements that should appear on the screen.

There are two types of components used in ReactJS.

  • Class Components
  • Function Components

Class Components

In a page, there are atleast 3 parts – Header, Footer and Content.

Let’s create Header, Footer and Content components separately and add inside JSX tree in your App component.

App.jsx

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
			<Footer/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>This is Header.</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>This is Content.</h2>
            <p>The content text.</p>
         </div>
      );
   }
}

class Footer extends React.Component {
   render() {
      return (
         <div>
            <h2>This is Footer.</h2>
         </div>
      );
   }
}

export default App;

Now to render this on the page, you need to import in src/index.js file.

import React from "react";
import ReactDOM from "react-dom";
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById("root"));

Function Component

A function component also behaves like Class component and returns HTML. But a Class component has some additional features, that’s why preferred.

App.jsx

import React from "react";

function App() {
  return <h1>Hello World! I am learning ReactJS.</h1>;
}

export default App;

Now to render this on the page, you need to import in src/index.js file.

import React from "react";
import ReactDOM from "react-dom";
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById("root"));

Component Constructor

You can write constructor() function in your component and it will be called with the component gets intantiated.

In component constructor, we initiate the component’s properties. In React, component properties kept in an object known as state.

App.jsx

import React from "react";

class App extends React.Component {
	constructor(){
		super();
		this.state = {tutorial: "ReactJS"};
	}
	
	render() {
		return <h1>Hello Friends!, I am learning {this.state.tutorial}!</h1>;
	}
}

export default App;

Components in Components

You can create nested components i.e., components inside components.

App.jsx

import React, {Component, Fragment} from "react";

class Tutorial extends React.Component {
  render() {
    return <h1>ReactJS Tutorial</h1>;
  }
}

class App extends React.Component {	
	render() {
		return (
            <div>
                <Tutorial />
                <h2>Hello Friends, I am learning ReactJS.</h2>
            </div>
			);
	}
}

export default App;

Now to render this on the page, you need to import in src/index.js file.

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
ReactDOM.render(<App  />, document.getElementById("root"));

Components in Files

React based upon the concept of re-usability. Hence, it will be perfect way to reuse components from separate files. In order to use this technique, you should to create a file with extension .js and save it to the src folder.

Tutorial.js

import React, Component from "react";

class Tutorial extends React.Component {
  render() {
    return <h1>ReactJS Tutorial</h1>;
  }
}

export default Tutorial;

In order to use this component file, you need to import in index.js file.

import React from "react";
import ReactDOM from "react-dom";
import Tutorial from './Tutorial.js';

ReactDOM.render(<Tutorial />, document.getElementById("root"));

Trending Topics