Understanding React Components
What is a component?
Components are building blocks of a React application. Fundamentally, they are JavaScript functions, which accept arguments called props and return React elements which form sections of the user interface.
Two or more React components can be brought together to form a parent even though these components are different from one another. A number of these parent components then come together to become the final user interface a user sees on a page.
Characteristics of a Component:
1. Modular: Modularity is the ability of a program to be broken down into smaller parts called Components. A component is a smaller part of the entire program. In the figure below, the Landing page has been broken down into twelve components namely; Header, Text, Navigation, Jumbotron, Search, Details, Images, Party, Icon, ListOfLink and Footer.
2. Self-contained: A component should have within it everything it needs to work effectively, such as its own logic, data and styling. For example, the Search component has all the logic, styling and the data (passed as props) it needs to make it work as expected.
4. Reusable: A component should be reusable means that the component should be built such that it is abstract enough to work with different input types.
5. Extensible: Extensibility means that a component should be built so that it can be easily extended to support future needs.
There are two types of components in React:
1. Functional Component
2. Class Component
Functional Component
A React Functional Component is a JavaScript function. It optionally accepts “props” (properties) and returns a React element.
Const ListCountries = () => {
return (
<ul>
<li>Nigeria</li>
<li>Ghana</li>
<li>Cameroun</li>
</ul
)
}The Functional Component in the code snippet above called ListCountries is written in ES6 arrow function syntax. It takes no props and returns a list of countries.
Class Based Component
A class based component is created using ES6 class syntax. The component has to include “extend React.Component” in order to have access to React.Component’s functions. The render method must also be used in a class component.
Rewriting the Functional Component “ListCountries” to a class based component would result in the same output.
class ListCountries extends React.Component {
render () {
return (
<ul>
<li>Nigeria</li>
<li>Ghana</li>
<li>Cameroun</li>
</ul>
)
}
}Differences between Functional and Class Based Components
A Functional component is said to be stateless, it can accept props and return a React element. A Class-based component on the other hand is said to be stateful; it can use the setState() method within its component. State is a changeable part of an application and setState() tells React that this component needs to re-render, i.e it needs to update the changes.
Let’s look at another example of a functional component:
import React from "react"const TextButton = (props) => {const { text } = props;return (<button>{text}</button>);}extend default TextButton
The functional component (TextButton.js) above has a `text` prop which is destructured from the main props object . It returns a button whose text is the value of the `text` prop.
The code snippet to change TextButton to a Class-based component is shown below:
import React from "react";class TextButton extends React.Component {
constructor(props) {
super(props);
this.state = {
text: props.text //Get initial text from props
}
}handleButtonClick = () => {
this.setState({ text: 'Saving' });
}render() {
return (
<button onClick={this.handleButtonClick}>{this.state.text}</button>
)
}}export default TextButton;
Just like the functional component we saw earlier, the class-based component above has a prop called “text” but it also has a state attribute named `text` whose value is initialized from the value of the props. It returns a button which has been passed an onClick event. When the button is clicked, the onClick event calls the function “handleButtonClick” that uses the setState() method to change the state of the component from the value of the props to a new value. The button then displays the text “Saving”.
import React from 'react';
import TextButton from './components/TextButton/index';const App = () => {
return (
<div>
<TextButton text="Click Me"/>
</div>
);
}export default App;
In the code snippet above the TextButton component is located in parent component “App.js”. In the parent component, the value of the prop “text” passed to the “TextButton” component is “Click Me”.
For theTextButton functional component, clicking the button doesn’t change the text of the button that is displayed. However, for the TextButton component written as a class based component, clicking the button changes the state by updating the value from “Click Me” to “Saving”.
When to use Functional Component and Class Based Components.
A Class-based component can do what a functional component does and much more. However building a class based component is expensive and affects performance of the application.
If one wants to handle simple logic such as returning a React element to the UI, then the component should be created as a functional component. However if you expect the component’s internal state to change based on user interaction or based on some event triggers, then the component could be written as a Class-based component. . More recently in React 17 to be precise, React has also rolled out a way to create functional components that have state and that is by use of React Hooks (https://reactjs.org/docs/hooks-intro.html).
