ReactJS - Components

ReactJS - Components

In this tutorial, we’ll explore how to create and combine components in React. This modular approach makes your application easier to develop, test, and maintain, allowing you to update individual components without affecting the rest of the page.

Functional Components Example (Stateless by default)

Modern React development heavily relies on functional components. They are JavaScript functions that accept props (properties) as an argument and return React elements. Let’s see an example where App is the parent component, rendering Header and Content child components. Only the App component needs to be exported for rendering.

App.jsx

import React from 'react';

// Functional component for Header
function Header() {
    return (
        <div>
            <h1>Header</h1>
        </div>
    );
}

// Functional component for Content
function Content() {
    return (
        <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
        </div>
    );
}

// Functional component for App (Parent)
function App() {
    return (
        <div>
            <Header />
            <Content />
        </div>
    );
}

export default App;

To render this App component on the page, we need to import it into our main entry file (e.g., main.js or index.js) and use the createRoot API from react-dom/client.

main.js (or index.js)

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

The above code will render a page displaying a ‘Header’ section and a ‘Content’ section with the text ‘The content text!!!’.

Stateful Functional Component Example (using Hooks)

Functional components can manage state using React Hooks, like useState. In this example, the App component will hold state (an array of data) and pass parts of this data as props to child components. We’ll dynamically render a list of TableRow components. We use modern JavaScript syntax (ES6+), such as arrow functions, for cleaner code.

App.jsx

import React, { useState } from 'react';

// Header component (can be in a separate file)
const Header = () => {
    return (
        <div>
            <h1>Header</h1>
        </div>
    );
}

// TableRow component (can be in a separate file)
const TableRow = (props) => {
    return (
        <tr>
            <td>{props.data.id}</td>
            <td>{props.data.name}</td>
            <td>{props.data.age}</td>
        </tr>
    );
}

// App component (Parent with state)
const App = () => {
    const [data, setData] = useState([
        { "id": 1, "name": "Alice", "age": "30" },
        { "id": 2, "name": "Bob", "age": "24" },
        { "id": 3, "name": "Charlie", "age": "35" }
    ]);

    return (
        <div>
            <Header />
            <table>
                <tbody>
                    {data.map((person, i) => (
                        <TableRow key={person.id} data={person} />
                    ))}
                </tbody>
            </table>
        </div>
    );
}

export default App;

main.js (or index.js) - Entry point

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App />);

NOTE on key prop:

Notice the use of key={person.id} within the map() function. When rendering lists of elements, providing a unique key prop for each item is crucial. This helps React identify which items have changed, are added, or are removed, leading to more efficient updates and avoiding potential issues with component state and performance. It’s best to use stable, unique IDs from your data as keys. Using the array index i as a key should be a last resort and only if the list is static and items don’t reorder.

This setup will render a ‘Header’, followed by a table listing the persons with their ID, name, and age.