React.js Best Practices Example

File Structure

In a typical React.js project, the file structure might look like this:

        
          my-react-app/
          ├── src/
          │   ├── components/
          │   │   ├── Header.js
          │   │   ├── Footer.js
          │   ├── pages/
          │   │   ├── Home.js
          │   │   ├── About.js
          │   ├── App.js
          │   ├── index.js
          ├── public/
          │   ├── index.html
        
      

The src directory contains all the source code for your React application. Components are stored in the components directory, and pages or views are stored in the pages directory. The index.js file is the entry point of your application.

Packages

Commonly used packages in React.js projects include:

• react
• react-dom
• react-router-dom@next
• @reduxjs/toolkit
• react-redux
• axios

The react-router-dom@next package is used for routing in React.js applications. It provides a declarative way to navigate between different components based on the URL.

The axios package is commonly used for making HTTP requests in React.js applications due to its simplicity and ease of use.

Redux with Redux Toolkit

Redux Toolkit simplifies Redux setup and usage by providing utilities to reduce boilerplate code. Here's how you can set up Redux with Redux Toolkit:

        
          // store.js
          import { configureStore } from '@reduxjs/toolkit';
          import rootReducer from './reducers';

          const store = configureStore({
            reducer: rootReducer
          });

          export default store;
        
      

Redux Toolkit's configureStore function automatically sets up the Redux store with sane defaults, including a Redux DevTools extension integration.

Routing with React Router v6

React Router v6 introduces significant improvements over previous versions and provides a cleaner API. Here's how you can set up routing with React Router v6:

        
          // App.js
          import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

          import Home from './pages/Home';
          import About from './pages/About';

          function App() {
            return (
              <Router>
                <Routes>
                  <Route path="/" element={} />
                  <Route path="/about" element={} />
                </Routes>
              </Router>
            );
          }

          export default App;
        
      

With React Router v6, routes are defined using the Routes and Route components, making it easier to manage nested routes and route transitions.

HTTP Requests with Axios

Axios is a popular choice for making HTTP requests in React.js applications. Here's a basic example of how to use Axios:

        
          // ExampleComponent.js
          import React, { useState, useEffect } from 'react';
          import axios from 'axios';

          function ExampleComponent() {
            const [data, setData] = useState(null);

            useEffect(() => {
              axios.get('https://api.example.com/data')
                .then(response => {
                  setData(response.data);
                })
                .catch(error => {
                  console.error('Error fetching data:', error);
                });
            }, []);

            return (
              <div>
                {data ? (
                  <p>Data: {JSON.stringify(data)}

                ) : (
                  <p>Loading...

                )}
              </div>
            );
          }

          export default ExampleComponent;
        
      

In this example, we make a GET request to an API endpoint and update the component's state with the response data.