React Functional Components

Introduction

In this chapter, we will explore React functional components, which are a fundamental part of building React applications. We will understand what functional components are, how to create them using both JavaScript functions and arrow functions, and the recommended approach for beginners.

Table of Contents

1. Introduction
2. What are Functional Components?
3. Creating Functional Components
   • Using JavaScript Functions
   • Using Arrow Functions
4. Understanding Props
5. Recommended Approach
6. Conclusion

What are Functional Components?

Functional components are simple JavaScript functions that accept props as an argument and return React elements. They do not have their own state and are primarily used to render UI based solely on the props they receive. Functional components are also known as stateless components because they do not manage their own state.

Naming convention: Functional Components always start with a capital letter.

Creating Functional Components

To create a functional component, you can use either a traditional JavaScript function or an arrow function. Let’s go through both approaches.

Using JavaScript Functions

1. Create a New File for the Component: In the src directory, create a new file named Greeting.js.
2. Define the Component: Add the following code to Greeting.js to create a functional component using a JavaScript function:

   // Greeting.js
   import React from 'react';
   
   function Greeting(props) {
     return (
       <div>
         <h1>Hello, {props.name}!</h1>
       </div>
     );
   }
   
   export default Greeting;
   

3. Use the Component in App.js: Open src/App.js and modify the App component to use the Greeting component:

   // App.js
   import React from 'react';
   import Greeting from './Greeting';
   
   function App() {
     return (
       <div>
         <Greeting name="Amit" />
         <Greeting name="Priya" />
         <Greeting name="Ravi" />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see the greeting messages for “Amit,” “Priya,” and “Ravi.”

Using Arrow Functions

1. Create a New File for the Component: In the src directory, create a new file named GreetingArrow.js.
2. Define the Component: Add the following code to GreetingArrow.js to create a functional component using an arrow function:

   // GreetingArrow.js
   import React from 'react';
   
   const GreetingArrow = (props) => {
     return (
       <div>
         <h1>Hello, {props.name}!</h1>
       </div>
     );
   }
   
   export default GreetingArrow;
   

3. Use the Component in App.js: Open src/App.js and modify the App component to use the GreetingArrow component:

   // App.js
   import React from 'react';
   import GreetingArrow from './GreetingArrow';
   
   function App() {
     return (
       <div>
         <GreetingArrow name="Amit" />
         <GreetingArrow name="Priya" />
         <GreetingArrow name="Ravi" />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see the greeting messages for “Amit,” “Priya,” and “Ravi.”

Understanding Props

Props, short for properties, are inputs to a React component. They are passed to the component via attributes in the JSX code. Props allow you to pass data from a parent component to a child component.

Example:

In the Greeting component, we are using a prop called name to display a greeting message.

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

In App.js, we pass the name prop to the Greeting component:

<Greeting name="Amit" />
<Greeting name="Priya" />
<Greeting name="Ravi" />

Recommended Approach

For beginners, it is generally recommended to use arrow functions when creating functional components. Arrow functions provide a more concise syntax and automatically bind the context, which makes them easier to use and understand.

Example:

Using an arrow function to create a functional component:

const GreetingArrow = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

Conclusion

In this chapter, you learned what React functional components are, how to create them using both JavaScript functions and arrow functions and the recommended approach for beginners. You also learned about the concept of props in React. In the next chapter, we will learn Class components in React.

Summary:

A functional component is a JavaScript/ES6 arrow function that returns a React element (JSX).

Naming convention: Functional Components always start with a capital letter.

Functional Component takes props as a parameter if necessary.