How to create a function in React

React is a popular JavaScript library for building user interfaces, allowing developers to create reusable components. Functions are a fundamental aspect of React development, as they enable us to encapsulate logic and UI elements into reusable blocks of code.

In this Answer, we'll walk you through how to create a function in React, commonly known as a functional component in React.

Creating a function in React

In React, a functional component is a JavaScript function that returns JSX, describing the UI. However, there are a few prerequisites for creating a function component in React.

Prerequisites

Before diving into creating a function in React, you should have a basic understanding of JavaScript, JSX (JavaScript XML), and how React works. Familiarity with HTML and CSS will also be beneficial.

Setting up your React environment with create-react-app

To get started, ensure that Node.js is installed, as it includes npm (Node Package Manager), which is essential for managing your project’s dependencies. If you don’t have Node.js installed, you can download it from the official website.

• Next, create a new React project using create-react-app. Open your terminal and run the following command:

• Replace my-react-app with your preferred project name. Once the setup is complete, navigate to your project folder:

• To start the development server and view your React application in action, run:

Now, you’re ready to create your first React functional component.

Structure of a functional component in React

A functional component in React is a JavaScript function that returns JSX, which describes the UI. Let’s create a simple functional component to display a “Hello, World!” message. In the src folder, create a new file named HelloWorld.jsx and add the following code:

In this code:

• Lines 1–3: We import React and create a function called HelloWorld.

• Lines 4–8: The function returns JSX containing a <div> element with an <h1> tag displaying the “Hello, World!” message.

• Line 11: We export the HelloWorld function as the default export, allowing it to be imported into other components.

Note: Each file can have only one default export, which allows a single item to be exported and imported without curly braces, while named exports enable multiple items to be exported and imported with curly braces. Understanding the distinction between default and named exports in React is essential for organizing component structure effectively.

Using props in a functional component in React

Props in React allow us to pass data from a parent component to a child component, making functional components more flexible and reusable. Let’s create a React functional component called Greeting that accepts a name prop and displays a personalized greeting.

Let’s create a new file named Greeting.js and add the following code:

Code explanation

In the App.js file:

• Lines 1–3: We import the necessary dependencies. Then, import React from the react package, which is required for creating and rendering React elements. Additionally, we import the Greeting component from the ./Greeting file. This import allows us to use the Greeting component inside the App component.

• Lines 4–8: Then we define the App component, which is a functional component. The App component returns JSX code that renders the Greeting component. We pass the name prop with the value "Educative.io" to the Greeting component. This prop will be used to display a personalized greeting in the Greeting component.

In Greeting.js file, The Greeting component is also a functional component that takes a props parameter. In this case, the props parameter will contain the name prop passed from the App component. The component returns JSX code that displays a “Hello, [name]!” message, where [name] is the value of the name prop.

In both cases, we export the components using the export default syntax. This allows other parts of the application to import and use these components.

React function components vs. class components

React has both functional components and class components. However, with the addition of Hooks, function components in React are often preferred over class components for their simplicity and ease of use. Many developers find them more intuitive, especially for beginners.

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Summary

In this Answer, we’ve explored how to create a function in React, covered the basics of using props in React functional components, and touched on the React component structure. By following these best practices, we can write clean, reusable, and maintainable code in React. As we become more familiar with the React ecosystem and its features, we can build more complex and powerful applications.