Components

Components are the smallest blocks of codes in the React application. A component is a JavaScript class or function that optionally accepts inputs, i.e., properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.
A React application is made up of one or more components. A React application contains at least one component called root component which is present in all the applications by the name “App” component. So, if we will break a React application, we will find one or more components.
Components in React

Types of Components

Types of Component in React

Functional Component

Functional Components are just JavaScript functions. They can optionally receive an object of properties which is referred to as “props” and return JSX (HTML) which describes User Interface (UI).
Functional Component is also referred to as,
  • Stateless Component as they do not hold or manage any state.
  • Presentation Component because all they do is output UI elements.
Functional Component in React
Let's understand with an example. Create a file called “Functional.js” and write the following code.
  1. function Functional(){
  2. return <h1>Example of Functional Component</h1>
  3. }
Now, we can see that we have created a functional component but how can we use it? Or how can we connect it to the root component?
To connect it with the root component, first of all, export this function so that it will be available for other components. Now, after exporting, we can import it to any component where we want to use it.
  1. export default Functional; //exporting a component
Now, go to that component where we want to render it. We want to render this in our app component, so, go to app.js file and import it, like below.
  1. import Functional from './Functional'; //Don't use js extension
After importing, use this function as a simple HTML tag inside the app, like below.
  1. <Functional/>
Both our pages look like this.
Functional Component with Code
Run and see the output.

Functional Component
After importing use this function as a simple HTML tag inside the app.
  1. const Functional = () => <h1>Example of Functional Component</h1>

More about import and export

Whenever we export a component, we can import it with any name.
Functional component import with different name
Name Export
Where we must import the component with the same name:
Import functional component in React
CLASS COMPONENT
The class component basically maintains a private internal state or we can say it maintains some information which is private to that information to describe the user interface.
For creating a class component, we need to follow these steps.
  1. A class “component” require us to extend from React. Component class.
  2. The class must implement a render() function, which will return “null” or some “jsx” code.
Class Component is also referred to as,
  • Stateful Component as they can hold or manage state.
  • Smart Component because they contain logic.
  • Container Component because they contain other components.
Class Component
Let's understand with an example. Create a file called “Class.js” and write the following code.
  1. import React, {Component} from 'react';
  3. class Class extends Component{
  4. render(){
  5. return <h1>Example of Class Component</h1>
  6. }
  7. }
  9. export default Class;
After creating the class component, render it into App.js file in a similar fashion like we render Functional Component.
  1. import React from 'react';
  2. import './App.css';
  3. import {Functional} from './Functional'; //Don't use js extension
  4. import Class from './Class';
  6. function App() {
  7. return (
  8. <div className="App">
  9. <Functional/>
  10. <Class/>
  11. </div>
  12. );
  13. }
  15. export default App;
Run and see the output.
Class Component in React output

Conclusion

Now, we have learned about components and their types. After reading this article, I hope we are able to create components in React. For practice purposes, I have attached the "componentsample” project with this article, which covers all the pieces of the code mentioned in this article.
We can download and modify this as per our different requirements.
All the queries related to this article and sample files are always welcome. Thanks for reading.!!!