React Components

React components are like the building blocks of a digital world. suppose that there is a virtual city in which there are many buildings and Each building is a component that serves a specific purpose and can be modified differently.

What’s Before –

What is React Js

Create React App Project

Let’s say you have created a website for this virtual city and it has the following components –

• Header Component: This is a board of the city. It displays city names and navigation to go to different ways in the city.
• Image Carousel Component: It displays and changes many pictures of the cities.
• Description Component: It displays information about the city.
• Footer Component: It is the bottom part of your website that displays contact information, social media links of the city

Each of the above components is a small program that displays city information and makes interaction with the user.

By dividing your website into different parts (components), you can work on each part separately. This makes it easy to maintain, and update the virtual city’s website.

What is React Component

React component is a reusable building block and self-contained code that represents a part of a user interface(UI) in a web application.

It is a JavaScript function or class that renders a part of the code to the view. It also contains its own logic, state, and properties.

• Reusable Building Block: you can reuse React components in your app to create many parts of the user interface.
• Self-Contained code: Components keep to bind their behavior and appearance. This means you can work on a component without changing anything in the rest part of the app.
• Logic and State: Components contain their own state & logic.
• Properties (Props): Components can get data from their parent components using properties (props).
• Hierarchy Structure: You can use Components to organize in a hierarchical structure. This means you can render child components inside Parent components and pass data down the tree.
• Rendering: component renders data (JSX containing HTML & CSS) that are displayed in the browser.

Types of Component

There are two main components defined in React JS –

1. Function Component
2. Class Component

1. Function Component

A function Component is defined just like a JavaScript function that is used to create reusable UI elements with JSX to define their appearance on the web pages.

You can create a function component as a DeveloperProfile component and return JSX that contains some text with <p> element.

File Name – DeveloperProfile.js

function DeveloperProfile() {
  return <p>I am web developer</p>;
}
default export DeveloperProfile;

You can import the function component DeveloperProfile as

import DeveloperProfile './DeveloperProfile';

You can use this function component  DeveloperProfile as

<DeveloperProfile />

2. Class Component

A class component is defined just like a javascript class that extends from React.Component or Component. It is used to create dynamic and interactive parts of a webpage.

You can create a class component as a DeveloperProfile component and return JSX that contains some text with <p> element.

Creating class component –

class Class DeveloperProfile extends React.Component {
  render() {
    return <p>I am Web Developer</p>;
  }
}
default export DeveloperProfile;

You can import the class component DeveloperProfile as

import DeveloperProfile './DeveloperProfile';

You can use this function component  DeveloperProfile 

<DeveloperProfile />

Best Practices

let’s explain each of these best practices for React components with examples

Component File Name

You should create a component file name similar to the component name

File Name – DeveloperProfile.js

function DeveloperProfile() {
   return <h3> I am Web Developer</h3> 
}

Function Components

You should mostly create a function component

function DeveloperProfile() {
  return <h3> I am Web Developer</h3>
}

Single Responsibility Principle

The Single Responsibility Principle (SRP) means that each component should have a single, well-defined responsibility.

Consider a UserProfile component. Its responsibility is to display user information, not to fetch the user data. It should receive user data as a prop.

function DeveloperProfile({fullName, position}) {
  return (
    <div>
      <h2>{fullName}</h2>
      <p>{position}</p>
    </div>
  );
}

// Avoid - Button.js

function Button() {
  return (
    <button style={{ backgroundColor: 'blue', color: 'white' }}>
      Click Me
    </button>
  );
}

// Button.js

function Button(props) {
  const { text, style } = props;

  return (
    <button style={style}>
      {text}
    </button>
  );
}

myapp
 |__src/
    |__ components/
    |    |__developer/
    |    |  |__DeveloperProfile.js
    |    |__admin/
    |    |    |__AdminProfile.js
    |    |__users/
    |    |    |__UserProfile
    |  
    |__ App.js
    |__ index.js