How To Create Types Of React Components

Introduction

In this article, we will learn to create a new ReactJs project using npm new command, After that, we will explain how to create Types of React Components in Visual Studio code.

Step 1

Create a React project setup using the below commands or however you create your React app

ng new sample-project

Step 2 

What Are React Components?

React components are the core building blocks of any react application. It is reusable and works independently. Components serve the same purpose as JavaScript functions, but work individually to return JSX code as elements for our UI

Types of React Components

1. Functional Components
2. Class Components

React Functional Components - An Introduction

React functional components are just normal JavaScript functions; we can create them using specific function keywords. Most developers create functional components using the Arrow function. The functional component’s primary purpose is to render the view and the data to the browser.

Below is the example of a react functional component props as an argument and returns the support in the valid JSX form.

import React from "react";

function Header() {
  return (
    <div className="header">
      <div className="container">
        <div className="logo">LOGO</div>
        <div className="navbar">
          <ul>
            <li>Dashboard</li>
            <li>About</li>
            <li>Login</li>
          </ul>
        </div>
      </div>
    </div>
  );
}
export default Header;

React Arrow Function Component

Arrow functions offer a compressed and short version of a function expression and need fewer keystrokes than regular JavaScript functions from the developer and can be used as a simpler alternative to functions within class components and functional components and event handlers in React.

Below is an example for react functional component with arrow function

import React from "react";

const Header = () => {
    return <div className="header">
    <div className="container">
      <div className="logo">LOGO</div>
      <div className="navbar">
        <ul>
          <li>Dashboard</li>
          <li>About</li>
          <li>Login</li>
        </ul>
      </div>
    </div>
  </div>
} 
export default Header;

Step 3

Create Project Folder structure, 

Step 4

Now, we will start importing the above component into the app.js file 

import "./App.css";
import Header from "./components/header";
import Footer from "./components/footer";
import Dashboard from "./components/dashboard"

function App() {
  return (
    <div className="App">
     <h1>Hello Mani</h2>
    </div>
  );
}
export default App;

Then we will create components On Header, dashboard, footer

Header.js

import React from "react";

const Header = () => {
    return <div className="header">
    <div className="container">
      <div className="logo">LOGO</div>
      <div className="navbar">
        <ul>
          <li>Dashboard</li>
          <li>About</li>
          <li>Login</li>
        </ul>
      </div>
    </div>
  </div>
} 
export default Header;

Footer.js

import React from "react";

function Footer() {
  return (
    <div className="footer">
    <h4>Footer</h4>
  </div>
  );
}
export default Footer;

Dashboard.js

import React from "react";

function Dashboard() {
  return (
    <h4>Dashboard</h4>
  );
}
export default Dashboard;

Index.css

ul,
li {
    list - style: none;
    margin: 0;
    padding: 0;
}.cursor {
    cursor: pointer;
}
html,
body {
    margin: 0;
    padding: 0 0 50 px 0;
}.container {
    max - width: 1000 px;
    margin: 0 auto;
}.header {
    background: #17a2b8 !important;
  padding: 25px 15px;
  color: # fff;
}.clear {
    display: inline - block;
    clear: both;
}.logo {
    float: left;
}.logo a {
    font - size: 20 px;
    margin: 0;
    color: #fff;
}.navbar {
    float: right;
}.navbar ul li {
    display: inline - block;
    margin: 0 2 px;
}.navbar ul li a {
    padding: 8 px;
    color: #fff;
    border - radius: 5 px;
}.navbar ul li a: hover, .navbar ul li a.active {
    background: #fff;
    color: #2a6496;
}

/* Footer */
.footer {
  background: # 000;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100 % ;
    text - align: center;
}

Step 5

Src/App.js code

import "./App.css";
import Header from "./components/header";
import Footer from "./components/footer";
import Dashboard from "./components/dashboard"

function App() {
  return (
    <div className="App">
      <Header />
      <div className="wrapper">
        <Dashboard />
      </div>
      <Footer />
    </div>
  );
}

export default App;

Step 6

Now we will run the application by using the 'npm run start' command and check the output on the browser

npm run start

On successful execution of the above command, it will show in the browser,

Summary 

In this article, we learned how to implement Functional component in a ReactJS application. In the next part, we will learn what is Class Component and sample examples.