The Complete Beginner’s Guide to React Components

---

React Components – Introduction:

Welcome back friends, ‘The Complete Beginner’s Guide to React Components’ blog is in the React series. In the React Component blog, we will continue our React series. If you are a beginner check prerequisites.

Prerequisites:

1. For Development – use as per your requirement.
   a. Local Installation: (Recommended)
   i. Node
   ii. Npm
   iii. Any Text Editor(Visual Studio – recommended)
   b. Online Compiler: (For Quickstart – codepen)
2. Revise of React Concepts

Terminology

• React Component: Components are independent and reusable bits of code. It is the same as JavaScript functions, but work in isolation mode and return HTML via a render() function.
• Stateless Component: Stateless components are simple functional components with no local state.
• Stateful Component: Stateful components are keeping track of changing data. A stateful component can contain the state object and event handling function, user actions as well.
• JSX: JSX stands for JavaScript XML. JSX allows us to write HTML in React.

What is React Component

React allows developers to define components as classes or functions. To create a React component class, you should extend React.Component.

React Component Lifecycle

The React component has the following phases as below:

1. Initialization: In the initialization phase, the component is constructed with the assigned Props and default state. This is performed in the constructor of a Component Class.
2. Mounting: Mounting is the phase of rendering the JSX returned by the render method itself. The mounting phase has of two predefined functions as under
   2.1 componentWillMount() Function: This function gets called once before the render() function is executed for the first time.
   2.2 componentDidMount() Function: This function is called right after the component is mounted on the DOM
3. Updating: Updating is the phase. It happens when the state of a component is updated & the application is repainted.
4. Unmounting: Unmounting is the final phase of the component lifecycle where the component is removed from the page.

Below is a diagram that depicts all the components of lifecycle phases.

For more detailed information, read a good article on State and Lifecycle

Difference between React component or React function

Below are the differences between Components and Function in tabular format and diagram form.

Features	React Functional	React Component
What	A functional component is a simple JavaScript function that accepts props(properties) as arguments and returns a React element.	A class component is created by extending from React. Component and create a ‘render’ function returns a React element
Lifecycle Methods	Functional components do not have access to React’s lifecycle methods and state	Functional components have access to React’s lifecycle methods and state
Known and Key Roles	React Function is known as Stateless components.	React Components are known as Stateful components.
Responsible	React Functional component accepts only data and display them in some form. It is mainly responsible for rendering UI.	They are responsible for implementing logic and state. It is more feature-rich.
Approach	Functional Based	Oops based

Types of React Components

React Components: There are two types of components:

• Functional Components
• Class Components

1.Functional Components:

As per documentation, A function is called a valid React component because it only accepts a single “props” (properties or argument) object argument with data and returns a React element. We call components “function components”.

React Functional Component Example:

function Welcome(props)
    {
        return <h1> Hello , {props.name}</h1>
    }

2. Class Components

The class components are the same as the functional component. When creating a React component, the component’s name should start with an upper case letter.

The component has to include the ‘extends React.Component’ statement, gives your component access to React.Component’s functions.

The component also requires a render() method, this method will return HTML.

React Class Component Example

React Class Component example is as under:

class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>
      }
    }

Frequently Asked Questions (F.A.Q.):

• What is the react component state?
  React components have a built-in state object. In the state, the object is used to store property values that belong to the component. When the state object changes, the component also re-renders.
• What is the react component library?
  A react component library is a cloud-based directory that includes all the designed/styled parts of a website or part of the software. It is helpful for designers to work consistently and execution correctly
• How to export react component
  To export a single component in ES6, you can follow the export default as below:

  class MyClass extends Component {
        ---
      }
      export default MyClass;

• React Component vs Container
  A component is part of the React API. A Component is a class or function which describes part of a React UI.
  A container is connected to a redux store. Containers receive Redux state updates and also dispatch actions. The container usually doesn’t render DOM elements, they delegate rendering to presentational child components.
• React Component vs Module
  Modules handle code packaging and the dependencies among code. Components are responsible to implement higher-level functionality and also the dependencies among components.

Conclusion:

Let’s conclude,

React components are the basic building blocks in React. From the above, we went through topics like React Component, React Lifecycle, Types of React Components, Functional Component, Class Component, and frequently asked questions on React Components.

Last but not least, this is not a complete React component article. React components are a broad topic, and we will post a separate article for better understanding. check out Top 10 React JS Development Companies In USA.

Ready to dive deeper into React? Have questions or need guidance? Feel free to Contact us for expert assistance and take your React journey to the next level!