React components are the building blocks of a React application, allowing you to break your UI into reusable, isolated pieces. While React initially offered both class and function components, the modern best practice is to use function components—thanks to their simplicity and the power of Hooks.

What Are Function Components?

Function components are simply JavaScript functions that return JSX (a syntax extension that resembles HTML) to describe what the UI should look like.

Key Points:

They are plain JavaScript functions.
They return JSX to render UI.
They can use React Hooks to manage state and side effects.

Create Your First Component

Let’s start by creating a very simple component that displays a greeting. Create a new file (e.g., Welcome.jsx) and add the following code:

// Welcome.jsx

function Welcome() {

return <h1>Hello, World!</h1>;

}

export default Welcome;

This is your first function component! It’s just a function named Welcome that returns a heading.

Rendering a Component

To see your component in action, you need to render it inside your main application file.

// main.jsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import Welcome from './Welcome';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Welcome />);

This code imports your Welcome component and renders it to the DOM. Make sure your HTML file includes a container with the id root.

Props

Props are a way to pass data into your components. Think of props as function parameters that allow your components to be dynamic.

Example:

// Greeting.jsx

function Greeting(props) {

return <h1>Hello, {props.name}!</h1>;

}

export default Greeting;

You can render this component and pass the name prop:

// main.jsx

import React from 'react';

import ReactDOM from 'react-dom/client';

import Greeting from './Greeting';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Greeting name="Alice" />);

Now, the Greeting component displays “Hello, Alice!” You can pass any value to make your component reusable.

Components in Components

One of React’s strengths is the ability to nest components. This means you can build complex UIs by composing small, manageable pieces.

Example:

// App.jsx

import Greeting from './Greeting';

function App() {

return (

<div>

</div>

);

}

export default App;

Here, the App component contains multiple Greeting components, each receiving different props. This makes your UI both dynamic and modular.

Components in Files

As your application grows, it’s best to organize components in separate files. This approach helps you maintain and scale your code more effectively. Use ES6 modules to import and export your components:

Export a Component:

In Header.jsx:

function Header() {

return <header><h1>My App</h1></header>;

}

export default Header;

Import a Component:

In App.jsx:

import Header from './Header';

import Greeting from './Greeting';

function App() {

return (

<div>

</div>

);

}

export default App;

This modular approach makes your code organized and easier to work on as your project expands.