Introduction to ReactJS Components
- By Nasir Zaidi
React is a leading front-end library that was developed by Facebook in 2015 to build visual and interactive web apps. It's a simple way to create dynamic web pages by combining HTML, CSS and JavaScript.
To build these interactive and visual pages, there is a very important concept of Components, which I have explained below”
What is a Component?
Back in the day, programmers would have to write lengthy code just to build a single web page. These web pages had a traditional DOM structure, which made finding bugs and making updates an arduous task. They required the developer to manually search the entire web app to fix any bugs.
To overcome this issue, Components were introduced, in which the entire app’s code was bundled into small groups of code. In React, A Component is one of the core building blocks of React. All React applications consist of a UI broken down into individual pieces called ‘Components’.
The image below is a good example of several types of components. The mobile screenshot is an ‘image’ component, while the login credentials section is bundled into a ‘login’ component.
A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each component exists in the same space, but they work independently from one another and merge all in a parent component, which be the final UI of your application.
React works by defining components and then connecting them together using props. It uses components to create modular views that can be easily reused across different pages.
Some of the key features of React components include:
Re-usability: We can re-use a component or piece of UI in multiple parts of an application with the same functionality. This speeds up development, ensures flawless performance and reduces the cluttering of code.
Component Nesting: we can nest components within another component to create more complex and visual User Interfaces. The components that are nested inside parent components are called child components.
Component Rendering: A component defines a render method specifying how it renders to the Document Object Model (DOM), which represents the web page as a tree structure.
Props: A component can also receive props (properties). These are properties that the parent passes to child componentes to specify particular values.
We’ll be exploring two types of Components in this article, Functional and Class:
What are Function Components?
In order to define a simple component, we write the following code:
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.
We call such components “function components” because they are literally JavaScript functions. In React, function components are a way to write components that only contain a render method and don't have their own state.
They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props as input and returns what should be rendered.
What is a Class Component?
Also known as Stateful components, Class components are an extension of React.Component that create a render function to return a React element. Data can be passed from one class to other class components. You can create a class by defining a class that extends Component and has a render function.
An example of creating a class component ‘Name’ is shown in the below diagram:
Properties (also known as props) can also be passed to Class Components. Props are passed as arguments to the constructor and should be passed to the parent component class by calling super props.
To highlight the differences between the two components, a functional component is a plain JavaScript function that accepts props as an argument and returns a React element. A class component, on the other hand, is extended from React.Component and creates a render function which returns a React element.
Additionally, Functional Components do not have any render method while Class component requires a render function that returns an HTML element
Smart Components
Smart Component is a component that is responsible for managing its own state and re-rendering a component. They are class-based components and have their own state defined in their constructor functions.
These components are also known as callback functions as they call libraries, APIs, Lifecycle methods and other callback functions that are passed to child components as properties or props.
Using the container design pattern, the container components are separated from the presentational components and each handles their own side of things. Smart components are not reliant on style and simply focus on functionality.
The root component off an app is a good example of a smart component. It is often responsible for maintaining several pieces of state for the entire app and needs to pass down additional functions to its child components so that the state can be updated when a user interacts with the site
Dumb Components
Dumb components are known as ‘presentational’ components because their only task is to present something to the DOM. Once they have presented, they are no more of use.
An example of Dumb component would be input or text button, as shown in the image below:
They can be defined as a stateless component. A stateless component is much more efficient than a stateful one, because it doesn't require as many computer resources to render. Dumb components have no logic, and they focus on the visuals i.e. User Interface, which makes them quite re-usable.
Dumb components only have a render method and are often simple Javascript functions. They don’t have internal state to manage and do not require app dependencies.
