Components in the React framework are merely javascript functions & classes that accepts any arbitrary inputs, called props and returns an elements for the User Interface. The element returned by component, tells React what exactly to display on the screen to the user.
Types of Components : Functional & Class
Functional :
- This is a regular javascript function that accepts a single properties object [props] as a parameter and returns a React element. Additionally, they may or may not have other forms of data passed as parameters, not exclusively previously defined props . Example of Functional Component syntax:
const Demo_component=()=>
{
return <h1>Welcome Hustlers!</h1>;
}
- Functional components are missing a few pieces of functionality when compared to class-based components. This shortcoming is made up with the help of a special ReactJS concept called “hooks”. Hooks offer unique features that allow ReactJS features to be used in functional components.
Class :
- These are represented by vanilla javascript class syntax, and they extend a user-defined class to React.Components class in React library. The component must have a render() method that returns JSX. IT also accepts previously defined props as a paraemter that can be passed in the constructor.
- Class components were largely used because "state" could not be used inside functional components in older versions of React (prior to 16.8). Due to this , functional components were generally only used for rendering UI components, whereas class components were used for data management and some additional operations. However, with the introduction of React hooks, this has changed, and we can now use states in functional components as well allowing for functional components that can render elements of the user interface based on user data like login or usage data, that can quickly update the whole UI depending on the type of user that is accessing the page.
Below, is a Introduction component, created as a class component:
class Introduction extends React.Component {
render() {
return <h1>Hello, I am {this.props.name}</h1>;
}
}
React Components in practice
Lets explore how we could use this introductory component in a parent component to begin creating the structure for your web application. First we must create the component and ensure that we export it , so it can be used in the parent component. This is done like this:
const Introduction = (props) => {
return <h1>Hello, I am {props.name}</h1>;
}
export default Introduction;
Following this step, the child component should be imported at the top of the parent component to be able to access its data:
import Introduction from './Introduction';
const App = () => {
return (
<div className="App">
<Introduction name="Harry Shiboo" />
</div>
);
}
This article has discussed the uses and types of components in React.js, by looking at how functional and class components are structured and generally used in their parent components. The Next article in this React.js series will discuss the use of Props to pass data from parent to child components in React applications, and how this is useful to beginner React developers.