How to create a function in React

Key takeaways:

  • Before creating React functional components, a basic understanding of JavaScript, JSX, HTML, and CSS is essential.

  • To set up the environment, first install Node.js, which includes npm for managing dependencies. Then, use create-react-app to initialize a new React project. Start the development server to see your application in action.

  • JSX is used within functional components to define HTML-like structures in JavaScript.

  • Props allow data to be passed from a parent component to a child component, making components more reusable and dynamic.

  • Default exports allow a single component to be exported from a file while named exports enable exporting multiple components from the same file.

  • Functional components are often chosen for their simplicity and ease of use, especially after the introduction of hooks.

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 websitehttps://nodejs.org/en/download.

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

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

cd my-react-app
Changing directory
  • To start the development server and view your React application in action, run:

npm start
Starting application

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:

import React from 'react';
function HelloWorld() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
};
export default HelloWorld;
Creating a function in React

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.

Q

Which option is true about functional components in React?

A)

Functional components can only return a single HTML element.

B)

Functional components must always use state.

C)

Functional components can accept props and return JSX.

D)

Functional components cannot be exported or imported.

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.

Frequently asked questions

Haven’t found what you were looking for? Contact Us


What is the difference between default and named exports in React?

In React, a default export allows a single component or item to be exported and imported without curly braces. A named export, on the other hand, allows multiple items to be exported from a file, and these need to be imported using curly braces.


What are props in React, and how do we use them?

Props in React are used to pass data from a parent component to a child component. They make components more reusable by allowing them to display dynamic content based on the data passed to them.


What is JSX in React?

JSX (JavaScript XML) is a syntax extension in React that allows us to write HTML-like code within JavaScript. It is used to define what the UI should look like in functional components.


Why are functional components preferred over class components in React?

Functional components are often preferred in React because they are simpler to write and work better with Hooks, making them easier to maintain and more concise than class components.


Free Resources

Copyright ©2025 Educative, Inc. All rights reserved