How to Install React JS and Set Up Your First Project: A Step-by-Step React CRUD Tutorial with Node

In this tutorial, we will learn how to install React JS and set up your first project along with a CRUD (Create, Read, Update, Delete) functionality using Node.js.

Step 1: Install Node.js

First, you will need to install Node.js on your machine. You can download the installer from the Node.js website (https://nodejs.org/) and follow the installation instructions.

Step 2: Create a new React project

To create a new React project, you can use the create-react-app command-line tool. Open up a terminal window and run the following command:

npx create-react-app react-crud-app

This will create a new folder named react-crud-app with all the necessary files and folders for a React project.

Step 3: Install Axios for making HTTP requests

Next, you will need to install Axios, a popular library for making HTTP requests in React. Run the following command in the terminal:

npm install axios

Step 4: Create a new Node.js project

Now, you will need to create a new Node.js project to serve as the backend for your CRUD application. Create a new folder for your Node.js project and open it in your terminal.

Run the following command to initialize a new Node.js project:

npm init -y

Step 5: Install Express and Cors

Next, you will need to install Express, a popular web framework for Node.js, and Cors, a middleware for handling cross-origin resource sharing.

Run the following command to install Express and Cors:

npm install express cors

Step 6: Create the Node.js backend

Now, create a new file named server.js in your Node.js project folder. In this file, you will set up a basic Express server that will handle HTTP requests for your CRUD application.

Here is an example of how to set up the server:

const express = require('express');
const cors = require('cors');

const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Step 7: Set up routes for CRUD operations

Now, you will need to set up routes in your Node.js server to handle CRUD operations. Create a new file named routes.js in your Node.js project folder and define the routes for Create, Read, Update, and Delete operations.

Here is an example of how to set up routes:

const express = require('express');
const router = express.Router();

// Create a new item
router.post('/items', (req, res) => {
  // Logic for creating a new item
});

// Read all items
router.get('/items', (req, res) => {
  // Logic for reading all items
});

// Update an item
router.put('/items/:id', (req, res) => {
  // Logic for updating an item
});

// Delete an item
router.delete('/items/:id', (req, res) => {
  // Logic for deleting an item
});

module.exports = router;

Step 8: Connect the React frontend to the Node.js backend

Finally, you will need to connect the React frontend to the Node.js backend. In your React project, you can use Axios to make HTTP requests to the backend server.

Here is an example of how to make an HTTP GET request to fetch all items from the server:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/items')
      .then(res => {
        setItems(res.data);
      })
      .catch(err => {
        console.error(err);
      });
  }, []);

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          {item.name}
        </div>
      ))}
    </div>
  );
}

export default App;

That’s it! You have now installed React JS, set up your first project, and created a basic CRUD application with Node.js. Feel free to customize the application further and add more features as needed. Happy coding!