React Components - Function and Class Component

React Components: Reacts js provides a Function component and class component that are very important for creating a user-friendly & single-page web application. So, you must know their usage & concept in detail with some examples.

here I have explained everything of components in react js step by step. Every step contains useful points that will help you create any type of component either small, large, or complex.

If you miss any one of the given steps, you will not be able to create components for your project in a proper way. Even your project may not be built user-friendly. So, you must everything from start to end of this article.

Before getting started, you should have basic understanding of the following topics

Create React App Project

React App Folder Structure

React Render Method

Components in React Js

React Component is defined just like a javascript function or class that can return HTML elements
Even React components are a building block of React Js that creates containers, div, or sections with proper view structures & data ( text, images, media, etc)
React components are used to create different types of independent & reusable sections of the web page or user interface (UI).

Important Points –

The name of React Components always starts with a capital letter and It can be rendered with angle brackets & forward slash. For example <App />. If you declare <app /> then React treats it as a DOM tag. because it starts with a small letter.
You can reuse a single component for multiple UI purposes
You can also pass attributes as arguments to components

Example –

A web page may have different parts like a header, footer, sidebar, menu, image gallery, slider, a text section, & more. These parts can be created using components by passing their data dynamically. So, you can consider them as components

Types of Components –

There are two main types of components that are mostly used for creating web applications –

Function Component
Class Component

Now let’s understand the above components one by one from the next steps with some basic code & examples

Function Component

Function Components just define like a javascript function that can return HTML elements.

Important Point –

The name of the function component must start with an uppercase letter.
Function components can be also defined like an arrow function.
Even the Function component only accepts a single argument that should be props are most recommended. otherwise, you can declare another name
You can create a function component with or without arguments

Syntax –

Here is syntaxt without passing arguments

function ComponenetName(){
 // write your code here
}
Export default ComponentName;

// Component like an arrow function
keyword ComponentName = () => {
  // write your code here
}
Export default ComponentName

here is syntax with passing arguments

function ComponenetName(props){
 // write your code here
}
Export default ComponentName;

// Component like an arrow function
keyword ComponentName = (props) => {
  // write your code here
}
Export default ComponentName;

Example –

function Header(){
 return "<p>This is header component</p>";
}
Export default Header;

const Header = () => return "<p>This is Header Component</p>";

Export default Header

Function Component without Arguments

If you need not render dynamic data to the DOM, then you should create function compoent without arguments

Create function component without passing arguments

File Name – Tutorials.js

import React from "react";
function Tutorials(){
 return "This is React js Tutorial";
}
Export default Tutorials;

Render function component to DOM using ReactDOM.render() method

Index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./Tutorials";
ReactDOM.render(<Tutorials />, document.getElementById("root"));

Function Component with Arguments

If you need to render dynamic data to the DOM, then you should create function component by passing arguments

Create a function component and pass an argument named props

import React from "react";
function Tutorials(props){
 return "This is {props.name} Tutorial";
}
Export default Tutorials;

Render the created function component and pass a value in the form of an attribute.

import React from "react";
import ReactDOM from "react-dom";
import Tutorials from "./Tutorials";
ReactDOM.render(<Tutorials name="HTML" />, document.getElementById("root"));

Class Component

A class component is defined just like a javaScript class that can also return HTML elements.

Important Points –

The name of the class component must start with an uppercase letter.
The render() method must be declared with the class component
A Class component must extend from React.Component or Component
You must import Component from the react library if a class component extends from Component
If you pass an argument to the class component then you will have to directly access it by declaring like this.props.propertyName.

Syntax –

If you use this syntax, then you will not have to import Component from the react library

class ComponentName extends React.Component {
 render(){
  // write here your code
 }
}
Export default ComponentName;

If you use this syntax, then you will have to import Component from the react library

import React, { Component } from "react";
class ComponentName extends Component {
 render(){
  // write here your code
 }
}

Export default ComponentName;

Example –

You can follow this example if you use the React.Component

class Header extends React.Component {
 render(){
   return "<p>This is the Header Component</p>";
 }
}
export default Header;

You can follow this example if you use the Component

class Footer extends Component {
 render(){
   return "<p>This is the Footer Component</p>";
 }
}
export default Footer;

Class Component without Arguments

If you need not to render dynamic data to the DOM, then you can create a class component without passing arguments

Create a class component with the name Course and extends from Component

File Name – Course.js

import React, { Component } from "react";

Class Course extends Component {
 render(){
  return "<p>Join Web development Course</p>";
 }
}
Export default Course;

After that, render class component to the DOM

index.js

import React from "react";
import ReactDOM from "react-dom";
import Course from "./Course";
ReactDOM.render(<Course />, document.getElementById("root"));

Class Component with Arguments

If you need to render dynamic data to the DOM, then you can create a class component and pass passing arguments

Create a class component with the name Course and access argument using this.props.propertyName

File Name – Course.js

import React, { Component } from "react";

Class Course extends Component {
 render(){
  return "<p>Join {this.props.courseName} Course</p>";
 }
}
Export default Course;

After that, render class component to the DOM and pass a n argument in the form of an attribute

index.js

import React from "react";
import ReactDOM from "react-dom";
import Course from "./Course";
ReactDOM.render(<Course courseName = "Web Designing" />, document.getElementById("root"));

Composing Components

In case of Composing components, You can also call one or more components inside the other components.

By default, React App has an App component that is created in the App.js file. You can also create other components in this file and call them within the App component to render to the DOM.

Example –

In this example, we create three more components for Header, Banner, About & Footer in the App.js file and call them within the React Fragment in the App component.

Create composing component

App.js

import React from "react";
function Header(){
 return "<p>This is Header</p>";
}
function Banner(){
 return "<p>This is Banner</p>";
}
function About(){
 return "<p>This is About</p>";
}
function Footer(){
 return "<p>This is Footer</p>";
}
function App() {
 return(
  <React.Fragment>
    <Header />
    <Banner />
    <About />
    <Footer / >
  </React.Fragment>
 );
}
Export default App;

Render composing component to the DOM

File Name – index.js

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

Reusable Components

In case of Reusable Components, you can use a single component within another components multiple times.

Create resusable components

File Name – App.js

import React from "react";
function Boy(){
 return "<p>This is { props.boyName }</p>";
}
function App() {
 return(
  <React.Fragment>
    <Boy boyName = "Noor Khan" />
    <Boy boyName = "Sunil Kumar"/>
    <Boy boyName = "Amit Singh" />
    <Boy boyName = "Rapsan Jani"/>
    <Boy boyName = "Jhon Pratap"/>
  </React.Fragment>
 );
}
Export default App;

Render the Reusable components to the DOM

File Name – index.js

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

What’s Next –

You should learn React Props in the upcoming tutorials. Please wait, It will be posted as soon as possible. If you really want this topic, then do comment and also share with your friends