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.
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.
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.
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.
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
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
Replace my-react-app
with your preferred project name. Once the setup is complete, navigate to your project folder:
cd my-react-app
To start the development server and view your React application in action, run:
npm start
Now, you’re ready to create your first React functional component.
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;
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.
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:
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 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.
Let’s attempt a short quiz to assess your understanding.
Which option is true about functional components in React?
Functional components can only return a single HTML element.
Functional components must always use state.
Functional components can accept props and return JSX.
Functional components cannot be exported or imported.
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.
Haven’t found what you were looking for? Contact Us
Free Resources