ReactJs – 2 Ways to Create React Components

A Component in React.js is one of the most important concepts to understand. As the official website, reactjs.org explains it – Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. It is an independent, reusable code that contains HTML + Javascript.

React component can be of two types – It can be either class or function component. You might have heard different terms to describe these types, i.e stateless and stateful. This state can be modified according to user action or other factors. Without further ado, let’s get to the heart of the matter which is 2 ways to create simple React components:

1) Stateless Functional Component

A function component is the simplest form of a React component. It is a simple function that returns a simple contract. The function component receives an object of properties which is usually named props. It returns what looks like HTML, but is really a special JavaScript syntax called JSX. We call such components “function components” because they are literally JavaScript functions.

Stateless Functional Component

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”. Props are similar to arguments for pure functions argument. Props of the component are passed from parent component which invokes component. Props in a component cannot be modified (Immutable).

Example:

Stateless Functional Component Example

Here we don’t need write render() function. We just return the HTML div. In this way, we can reduce the amount of code.

2) Class Component

A class component is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX.

Class Component

This internal state is what gives React its reactive nature. When the state of a class component changes, React will re-render that component in browser.

The State and Props objects have one important difference. Inside a class component, the State object can be changed while the Props object represents fixed values. Class components can only change their internal state, not their properties. This is a core idea to understand in React.

Example:

Class Component Example