React Components

Introduction

In this chapter, we will take a closer look at React components, the building blocks of any React application. Components allow you to break down the UI into manageable, reusable pieces of code. We will explore different types of components and how to create them.

Table of Contents

1. What are React Components?
2. Types of React Components
   • Functional Components
   • Class Components
3. Creating Functional Components
4. Creating Class Components
5. Conclusion

What are React Components?

React components are reusable pieces of code that define how a part of the user interface should appear. Each component can manage its own state and receive data through props, allowing you to build complex UIs by composing simpler components.

Types of React Components

Functional Components

Functional components are JavaScript functions that return JSX. They are simpler and easier to write than class components. Since the introduction of hooks in React 16.8, functional components can also manage state and side effects.

Example of a Functional Component

import React from 'react';

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

export default Welcome;

Class Components

Class components are ES6 classes that extend from React.Component. They have more features than functional components, such as lifecycle methods and state management, but are generally more complex.

Example of a Class Component

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Welcome to React!</h1>;
  }
}

export default Welcome;

Creating Functional Components

Functional components are the preferred way to create components in modern React development. They are concise and make it easier to manage state and side effects using hooks.

Example: Creating a Functional Component

1. Create a New File: Create a new file named Hello.js in the src directory.
2. Define the Component: Add the following code to define the Hello functional component:

   // src/Hello.js
   import React from 'react';
   
   function Hello() {
     return <h1>Hello, World!</h1>;
   }
   
   export default Hello;
   

3. Use the Component: Import and use the Hello component in App.js:

   // src/App.js
   import React from 'react';
   import Hello from './Hello';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <Hello />
         </header>
       </div>
     );
   }
   
   export default App;
   

Creating Class Components

Class components are still used in many existing React applications. They offer more features, such as lifecycle methods, which can be useful for managing more complex behavior.

Example: Creating a Class Component

1. Create a New File: Create a new file named Greeting.js in the src directory.
2. Define the Component: Add the following code to define the Greeting class component:

   // src/Greeting.js
   import React, { Component } from 'react';
   
   class Greeting extends Component {
     render() {
       return <h1>Welcome to the React World!</h1>;
     }
   }
   
   export default Greeting;
   

3. Use the Component: Import and use the Greeting component in App.js:

   // src/App.js
   import React from 'react';
   import Greeting from './Greeting';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <Greeting />
         </header>
       </div>
     );
   }
   
   export default App;
   

Conclusion

In this chapter, we learned about React components, the fundamental building blocks of React applications. We explored the differences between functional and class components and how to create and use them. Understanding these concepts is essential for building reusable and maintainable React applications. In the next chapter, we will dive deeper into React functional components.