Introduction

Building a full-stack application using React for the frontend and Node.js for the backend is a powerful way to create dynamic, scalable web applications. React handles the user interface, while Node.js provides the backend server, managing business logic, databases, and APIs.

What is a Full-Stack Application?

Key Features of Full-Stack Development:

- **Frontend (React)**: Handles the user interface and client-side interactions.
- **Backend (Node.js)**: Manages server-side logic, APIs, and database interactions.
- **Database**: Stores and retrieves data used by both frontend and backend.

Setting Up the Project:

Example: Project Setup

// Initialize backend (Node.js)
mkdir backend && cd backend
npm init -y
npm install express mongoose cors dotenv

// Initialize frontend (React)
npx create-react-app frontend

Building the Backend (Node.js):

Example: Basic Express Server Setup

// server.js
const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

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

mongoose.connect('mongodb://localhost/mydb', { useNewUrlParser: true, useUnifiedTopology: true });

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from the backend!' });
});

app.listen(5000, () => {
  console.log('Server running on port 5000');
});

Example: MongoDB Schema and API Route

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: String,
  email: { type: String, unique: true },
  password: String,
});

module.exports = mongoose.model('User', userSchema);

// In server.js
const User = require('./models/User');

app.post('/api/register', async (req, res) => {
  try {
    const user = new User(req.body);
    await user.save();
    res.status(201).json(user);
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

Building the Frontend (React):

Example: Fetching Data from the Backend

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

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('http://localhost:5000/api/hello')
      .then((response) => response.json())
      .then((data) => setMessage(data.message));
  }, []);

  return <div>{message}</div>;
}

export default App;

Example: React Form for User Registration

// Register.js
import React, { useState } from 'react';

function Register() {
  const [formData, setFormData] = useState({ name: '', email: '', password: '' });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('http://localhost:5000/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData),
    });
    const data = await response.json();
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name='name' placeholder='Name' onChange={handleChange} />
      <input name='email' type='email' placeholder='Email' onChange={handleChange} />
      <input name='password' type='password' placeholder='Password' onChange={handleChange} />
      <button type='submit'>Register</button>
    </form>
  );
}

export default Register;

Steps

1. Steps to Build the Full-Stack Application:

1. Set up the backend server using Express and connect to a database like MongoDB.
2. Define API endpoints that the frontend will interact with.
3. Set up the React frontend to consume the API and display data.
4. Implement user authentication and authorization if needed.
5. Test the full-stack application by running both backend and frontend.

Conclusion

Building a full-stack application with React and Node.js is an excellent way to create dynamic, real-time web apps. With this knowledge, you can build scalable and maintainable applications that are ready for production.