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

You would then use ReactDOM.render() to target the HTML element by id.

And that’s it! These are the 2 ways you can create a React component.

Sources:

https://reactjs.org/docs/components-and-props.html

https://micropyramid.com/blog/understanding-reactjs-component-state-props/

https://medium.freecodecamp.org/how-to-write-your-first-react-js-component-d728d759cabc

Do you have any product idea or business need?

How TO MAKE YOUR APP WORK OFFLINE

HOW TO MAKE YOUR APP WORK OFFLINE

Offline mobile app development is critical for users to sync their data properly, when offline. Here, we help you learn the process from implementation to data synchroniz

Omnivore POS integration - Ensuring Agility To Your Restaurant Businesses

Omnivore POS integration - Ensuring Agility To Your Restaurant Businesses

Omnivore software offers a point-of-sales integration API making the restaurant system agile, more customer engaging and adaptive to fast changing business environments.

Unit Testing using Mockk.io

Unit Testing using mockK.io in Kotlin

Learn about unit testing using mockk.io in Kotlin.