Step-by-Step Guide to Building Your First React JS Application with Node.js

Introduction

These steps will help you build a simple to-do list app with React.js for the front end and Node.js for the back end. We will use Node.js with Express to ensure it works quickly.

By following these steps as you read, you will have a fully functional app that users can use to add and view tasks.

First, make sure you have the prerequisites needed for this task.

Prerequisites

Node.js and npm: Install Node.js (version 14 or higher) and npm from nodejs.org.

Basic knowledge: Familiarity with JavaScript, HTML, and CSS.

Text editor: Use VS Code or any preferred editor.

Terminal: For running commands.

Step 1: Lay the Foundation with Your Project Structure

The first task we will proceed with is creating a home for our app. Open your terminal and make a new project folder:

mkdir todo-app 
cd todo-app 

Initialize it with a quick command to generate a package.json file:

npm init -y

Now, let’s carve out a space for the backend. Create a server folder and set it up:

mkdir server 
cd server 
npm init -y 

Hop back to the main folder and conjure up a React frontend with one magical command:

cd .. 
npx create-react-app client 

Now you have your client folder for the frontend, and a server folder for the backend.

Step 2: Power Up the Node.js Backend

Second steps includes the process of backend development with Node.js. For that, navigate to the server folder:

cd server 

Install Express for our server and CORS. This installation will allow interaction between the frontend and the backend.

npm install express cors 

Create an index.js file and add this code to set up a simple API:

const express = require('express'); 
const cors = require('cors'); 
const app = express(); 
const port = 5000; 

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

let tasks = []; 

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

app.post('/api/tasks', (req, res) => { 
  const task = { id: tasks.length + 1, text: req.body.text }; 
  tasks.push(task); 
  res.json(task); 
}); 

app.listen(port, () => { 
  console.log(`Server running on http://localhost:${port}`); 
}); 

Fire up the server:

node index.js

Go to http://localhost:5000/api/tasks in your browser. You will see an empty array [], it means that your backend is alive now!

Step 3: Craft a Sleek React Frontend

After making your backend alive, it’s time to make your frontend lively. Switch to the client folder:

cd ../client

Install Axios to handle HTTP requests:

npm install axios 

Open src/App.js and replace its contents with this code to create a vibrant to-do list:

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

function App() { 
  const [tasks, setTasks] = useState([]); 
  const [newTask, setNewTask] = useState(''); 

  useEffect(() => { 
    axios.get('http://localhost:5000/api/tasks') 
      .then(response => setTasks(response.data)) 
      .catch(error => console.error('Error fetching tasks:', error)); 
  }, []); 

  const addTask = () => { 
    if (!newTask.trim()) return; 
    axios.post('http://localhost:5000/api/tasks', { text: newTask }) 
      .then(response => { 
        setTasks([...tasks, response.data]); 
        setNewTask(''); 
      }) 
      .catch(error => console.error('Error adding task:', error)); 
  }; 

  return ( 
    <div className="App"> 
      <h1>To-Do List</h1> 
      <div> 
        <input 
          type="text" 
          value={newTask} 
          onChange={(e) => setNewTask(e.target.value)} 
          placeholder="Enter a new task" 
        /> 
        <button onClick={addTask}>Add Task</button> 
      </div> 
      <ul> 
        {tasks.map(task => ( 
          <li key={task.id}>{task.text}</li> 
        ))} 
      </ul> 
    </div> 
  ); 
} 

export default App; 

Next, make it attractive by updating src/App.css:

.App { 
  text-align: center; 
  max-width: 600px; 
  margin: 0 auto; 
  padding: 20px; 
} 

h1 { 
  color: #333; 
} 

input { 
  padding: 10px; 
  margin-right: 10px; 
  width: 200px; 
} 

button { 
  padding: 10px 20px; 
  background-color: #007bff; 
  color: white; 
  border: none; 
  cursor: pointer; 
} 

button:hover { 
  background-color: #0056b3; 
} 

ul { 
  list-style: none; 
  padding: 0; 
} 

li { 
  padding: 10px; 
  border-bottom: 1px solid #ccc; 
} 

Now your frontend is ready to dominate!

Step 4: Launch Your Full-Stack App

Let’s bring it everything together! First, keep your backend running:

cd ../server 
node index.js 

Open a new terminal, head to the client folder, and start the React app:

cd ../client 
npm start 

Your browser should pop open at http://localhost:3000. Type a task, hit “Add Task,” and watch it appear in the list! (Tip: tasks vanish when the server restarts since we’re currently using in-memory storage.)

Step 5: Take It to the World (Optional Deployment)

You didn't create the app just for yourself, right? Deploy your app on platforms like Heroku or Render for the backend. Swap the in-memory tasks array for a database like MongoDB to keep tasks persistent.

For the frontend, build your React.js app:

cd client 
npm run build 

You can host the build folder on Netlify or Vercel, or you can serve it via Express. Make sure to update the API URLs in App.js to point to your live backend.

Congratulations, your app is now ready to steal the spotlight.

Your Project’s Blueprint

Here’s how your project looks:

todo-app/ 
├── client/              # React frontend 
│   ├── src/ 
│   │   ├── App.js 
│   │   └── App.css 
│   └── package.json 
├── server/              # Node.js backend 
│   ├── index.js 
│   └── package.json 
└── package.json 

Clean and organized—ready for future upgrades!

Level Up Your App

You can level up your app with no force! Here are the quick steps to make your app look even better:

• Connect a database to save tasks permanently.
• Add edit and delete buttons for functions.
• Style it up with Tailwind CSS or Material-UI.
• Secure it with user authentication.

Yayy! You Did It!

In my previous article, I shared steps to use React and Next.js to build an e-commerce site that is SEO friendly. If you are from the e-commerce sector, you should refer that article.

You didn’t just build a full-stack to-do list app; you built the most attractive-looking app from scratch using React.js and Node.js.

Using React in the front will ensure that it is lively and that users can find it interactive. Using Node.js and Express will help keep your backend robust and smooth.

This project was an introductory-level project that you can add to your portfolio. But make sure you don’t stop learning and developing new projects. The world of full-stack development is ever-evolving, and you’ll have to match the pace with it.

Good luck!