Node Express (React CRUD)

Absolutely, we can utilize the fetch API which is native to modern browsers to interact with the server. Here is a modified version of the tutorial:

Step 1: Setting Up Your React App

1.1 Create a New React App

• Command: npx create-react-app react-crud-app
• Explanation: This command initializes a new React application, giving you a clean slate to start your project.

Step 2: Project Structure

The project structure should resemble the following:

react-crud-app/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── FormFun.js
│   └── index.js
└── package.json

Step 3: Creating Components

3.1 App Component

• File: src/App.js
• Explanation: This component will fetch and display data from the server, utilizing the native fetch API.
• Syntax:

import React, { useState, useEffect } from 'react';
import './App.css';
import FormFun from './FormFun';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('http://localhost:3000/users');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data', error);
      }
    }

    fetchData();
  }, []);

  return (
    <div className="App">
      <h1>Data Management</h1>
      <FormFun refreshData={() => setData([...data])} />
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3.2 FormFun Component

• File: src/FormFun.js
• Explanation: This component contains a form that interacts with the data fetched in the App component.
• Syntax:

import React, { useState } from 'react';

function FormFun({ refreshData }) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await fetch('http://localhost:3000/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ name: inputValue }),
      });
      alert('Data added successfully');
      refreshData();
    } catch (error) {
      console.error('Error adding data', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
        </label>
      </div>
      <button type="submit">Add Data</button>
    </form>
  );
}

export default FormFun;

Step 4: Running Your React App

4.1 Running the App

• Command: npm start
• Explanation: This command starts your React app. You should now see the form and data list on the webpage.

Step 5: Testing the Application

5.1 Testing the App

• Explanation: Add new data using the form and verify that the data appears in the list on the webpage. The data should also be added to the server’s database.

Conclusion

In this tutorial, we’ve created a straightforward React application that communicates with your existing Node.js and Express server. You’ve learned how to create components to display a list of data and a form to add new data using the fetch API, which is built into modern browsers.

As you continue to explore React, you can enhance this application by adding more complex features, like routing, state management, and user authentication, to make a fully-fledged web application.