✦ Node.js with React: Build a Full-Stack JavaScript Application

✦ Introduction

Modern web applications often use JavaScript for both frontend and backend development. React is a popular JavaScript library used to build interactive user interfaces, while Node.js allows developers to run JavaScript on the server.

When React and Node.js are used together, developers can create powerful full-stack applications using JavaScript.

For example, consider a Student Management System:

• React displays the student registration form.

• Node.js handles backend operations.

• Express.js creates REST API endpoints.

• A database stores student information.

• React communicates with the backend using HTTP requests.

In this tutorial, we will build a basic Student Management Application using React and Node.js.

✦ 1. What Is a Full-Stack JavaScript Application?

A full-stack application contains both frontend and backend components.

Frontend: The user interface that visitors see and interact with.

Backend: The server-side application that processes requests, validates data and communicates with databases.

Database: Stores application information such as students, users, products and orders.

A typical React and Node.js architecture looks like this:

        USER
          |
          v
    REACT FRONTEND
          |
       HTTP API
          |
          v
   NODE.JS + EXPRESS
          |
          v
       DATABASE

React handles the user interface, while Node.js and Express handle backend logic.

✦ 2. Technologies Required

Before starting, install the following tools:

Technology	Purpose
Node.js	Runs JavaScript on the server
npm	Manages packages
React	Builds the frontend
Vite	Creates and runs the React development project
Express.js	Creates backend APIs
Axios	Sends HTTP requests
VS Code	Code editor

Check Node.js and npm installation:

node -v
npm -v

If both commands display version numbers, you are ready to continue.

✦ 3. Create the Project Structure

We will create two separate folders:

react-node-project/
│
├── backend/
│   ├── server.js
│   └── package.json
│
└── frontend/
    ├── src/
    │   ├── App.jsx
    │   └── main.jsx
    └── package.json

The backend folder contains Node.js and Express code.

The frontend folder contains React components and user interface code.

✦ 4. Create the Node.js Backend

First, create a project folder:

mkdir react-node-project
cd react-node-project
mkdir backend
cd backend

Initialize the Node.js project:

npm init -y

Install Express and CORS:

npm install express cors

What is Express.js?

Express.js is a Node.js framework that makes it easier to create web servers and REST APIs.

What is CORS?

CORS (Cross-Origin Resource Sharing) controls whether a browser allows frontend code from another origin to access a server.

Now create a file named server.js.

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

const app = express();

const PORT = 5000;

app.use(cors({
    origin: 'http://localhost:5173'
}));

app.use(express.json());

// Temporary student data
let students = [
    {
        id: 1,
        name: 'Rahul',
        course: 'Node.js'
    },
    {
        id: 2,
        name: 'Priya',
        course: 'React.js'
    }
];

// Home API
app.get('/', (req, res) => {
    res.send('Node.js Backend is Running');
});

// Get all students
app.get('/api/students', (req, res) => {
    res.json(students);
});

// Add new student
app.post('/api/students', (req, res) => {

    const { name, course } = req.body;

    if (!name || !course) {
        return res.status(400).json({
            message: 'Name and course are required'
        });
    }

    const newStudent = {
        id: Date.now(),
        name,
        course
    };

    students.push(newStudent);

    res.status(201).json({
        message: 'Student added successfully',
        student: newStudent
    });
});

app.listen(PORT, () => {
    console.log(`Backend running at http://localhost:${PORT}`);
});

Start the backend:

node server.js

Open this URL in your browser:

http://localhost:5000/api/students

You should see the student data in JSON format.

Note: This example stores data in a JavaScript array. The data will reset when the server restarts. A real application should use a database such as MySQL or MongoDB.

✦ 5. Create the React Frontend

Open a new terminal in the main project folder.

Create a React application using Vite:

npm create vite@latest frontend -- --template react

Move into the frontend folder:

cd frontend

Install the required packages:

npm install

Install Axios:

npm install axios

What is Axios?

Axios is a JavaScript library used to send HTTP requests from React to a backend API.

✦ 6. Connect React with Node.js API

Open frontend/src/App.jsx.

Replace its code with the following:

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

function App() {

    const [students, setStudents] = useState([]);

    const [name, setName] = useState('');
    const [course, setCourse] = useState('');

    const API_URL = 'http://localhost:5000/api/students';

    // Fetch students from backend
    const getStudents = async () => {

        try {

            const response = await axios.get(API_URL);

            setStudents(response.data);

        } catch (error) {

            console.error('Error fetching students:', error);

        }
    };

    // Load students when component starts
    useEffect(() => {
        getStudents();
    }, []);

    // Add student
    const addStudent = async (e) => {

        e.preventDefault();

        if (!name.trim() || !course.trim()) {
            alert('Please enter student name and course');
            return;
        }

        try {

            await axios.post(API_URL, {
                name,
                course
            });

            alert('Student added successfully');

            setName('');
            setCourse('');

            getStudents();

        } catch (error) {

            console.error('Error adding student:', error);

        }
    };

    return (

        <div style={{ padding: '30px', fontFamily: 'Arial' }}>

            <h1>Student Management System</h1>

            <h2>Add New Student</h2>

            <form onSubmit={addStudent}>

                <input
                    type="text"
                    placeholder="Student Name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                />

                <br /><br />

                <input
                    type="text"
                    placeholder="Course Name"
                    value={course}
                    onChange={(e) => setCourse(e.target.value)}
                />

                <br /><br />

                <button type="submit">
                    Add Student
                </button>

            </form>

            <hr />

            <h2>Student List</h2>

            <table border="1" cellPadding="10">

                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Course</th>
                    </tr>
                </thead>

                <tbody>

                    {students.map((student) => (

                        <tr key={student.id}>
                            <td>{student.id}</td>
                            <td>{student.name}</td>
                            <td>{student.course}</td>
                        </tr>

                    ))}

                </tbody>

            </table>

        </div>
    );
}

export default App;

✦ 7. Understand the React Code

Let's understand the important parts.

1. useState()

const [students, setStudents] = useState([]);

useState() stores data inside a React component.

Here, students contains the student list, and setStudents() updates that list.

2. useEffect()

useEffect(() => {
    getStudents();
}, []);

useEffect() runs the API request when the component first loads.

3. Axios GET Request

const response = await axios.get(API_URL);

This sends a GET request to the Node.js backend to retrieve students.

4. Axios POST Request

await axios.post(API_URL, {
    name,
    course
});

This sends student information to the backend.

5. map() Function

students.map((student) => (
    <tr key={student.id}>
        <td>{student.name}</td>
    </tr>
))

The map() function displays each student from the array.

✦ 8. Run the Full-Stack Application

You need two terminals because React and Node.js run separately during development.

Terminal 1: Start Node.js Backend

Open the backend folder:

cd backend
node server.js

Backend URL:

http://localhost:5000

Terminal 2: Start React Frontend

Open the frontend folder:

cd frontend
npm run dev

Vite will display a local URL, usually:

http://localhost:5173

Open that URL in your browser.

You should now see the Student Management System.

Try adding a student using the form. React will send the information to Node.js, and the updated student list will appear on the page.

✦ 9. How React and Node.js Communicate

The communication process is simple:

1. A user enters a student name and course in React.

2. The user clicks the Add Student button.

3. Axios sends a POST request to the Express API.

4. Node.js receives the request.

5. Express processes the student information.

6. The backend sends a JSON response.

7. React fetches the updated student list.

8. The new student appears on the screen.

This is how frontend and backend applications work together.

✦ 10. Add a Database to Your Application

Our example currently stores student data in a JavaScript array.

For a real project, you should connect a database.

Popular choices include:

MySQL: Useful for structured data such as students, employees, fees and orders.

MongoDB: A document-oriented database suitable for flexible JSON-like data.

A typical database flow looks like this:

React Form
    |
    v
Axios POST Request
    |
    v
Express API
    |
    v
Node.js Backend
    |
    v
MySQL / MongoDB

The backend should validate incoming data and perform database operations before returning a response.

✦ 11. Best Practices for React and Node.js Projects

Follow these practices while building full-stack applications:

• Keep frontend and backend code organized.

• Use environment variables for sensitive configuration.

• Validate user input on the backend.

• Use proper HTTP status codes.

• Handle API errors in React.

• Use authentication for protected pages and APIs.

• Connect a real database for permanent data storage.

• Configure CORS to allow only trusted frontend origins.

• Never expose database passwords or API secrets in frontend code.

• Use HTTPS when deploying the application.

✦ 12. Real-World Applications Built with React and Node.js

React and Node.js can be used to build many types of applications:

1. Student Management Systems

2. E-Commerce Websites

3. Hospital Management Systems

4. School Management Systems

5. Hotel Management Systems

6. Employee Management Systems

7. Online Booking Applications

8. CRM and Admin Dashboards

These projects help developers understand frontend development, backend APIs and database integration.

✦ Conclusion

React and Node.js together provide a powerful environment for full-stack JavaScript development. React helps developers create interactive user interfaces, while Node.js and Express.js handle backend operations and API requests.

By building a Student Management System, you have learned how to create a backend API, connect React with Axios, send GET and POST requests, and display data dynamically.

At Param Classes, students can learn practical Web Development and programming through hands-on projects. For professional websites and digital solutions, visit ParamWebInfo.

✦ Frequently Asked Questions (FAQs)

Q1. Can React and Node.js be used together?

Yes. React is used for frontend development, while Node.js can handle backend logic and APIs.

Q2. Is React a backend technology?

No. React is primarily a frontend JavaScript library used to create user interfaces.

Q3. Why is Express.js used with Node.js?

Express.js simplifies server creation, routing, middleware and API development.

Q4. What is Axios in React?

Axios is a library used to send HTTP requests such as GET and POST to backend APIs.

Q5. Can React connect directly to MySQL?

React should not connect directly to MySQL. A backend such as Node.js should securely handle database connections.

Q6. What is a full-stack JavaScript developer?

A full-stack JavaScript developer works with frontend and backend technologies, such as React, Node.js and Express.js.

Q7. Which projects can beginners build with React and Node.js?

Beginners can build student management systems, employee management systems, task managers, blogs and simple e-commerce applications.