How to Set Up a Full-Stack React Application

Introduction

Building a full-stack React application can seem like a daunting task, but with the right approach, it becomes much easier. A full-stack app consists of a front-end built with React and a back-end powered by a framework like Node.js with Express. The database, such as MongoDB or PostgreSQL, stores the application data.

At SDLC Corp , we specialize in developing full-stack applications tailored to business needs. Whether you're building a simple web app or a complex enterprise solution, our expertise ensures a seamless development process. In this guide, we will walk you through setting up a full-stack React application from scratch.

Step 1: Setting Up the Project Structure

To start, you need a well-organized folder structure. A typical setup looks like this:

full-stack-app/

│-- client/ ? (React Frontend)

│-- server/ ? (Node.js Backend)

│-- package.json

This separation ensures clarity and allows independent development of the front-end and back-end.

Step 2: Setting Up the Backend (Node.js + Express)

Initialize the Project Navigate to the root directory and run: mkdir server && cd server

npm init -y

1. ?This creates a package.json file to manage dependencies.

Install Dependencies npm install express cors mongoose dotenv

1. express: Web framework for Node.js

Set Up an Express Server Create an index.js file in the server directory: const express = require("express");

const cors = require("cors");

const mongoose = require("mongoose");

require("dotenv").config();

const app = express();

app.use(cors());

app.use(express.json());

mongoose.connect(process.env.MONGO_URI, {

????useNewUrlParser: true,

????useUnifiedTopology: true,

}).then(() => console.log("MongoDB Connected"));

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

1. ?This sets up a basic Express server and connects to MongoDB.

Step 3: Setting Up the Frontend (React)

Create a React App In the root directory, run: npx create-react-app client

1. ?This generates a React project inside the client folder.

Install Dependencies Inside the client folder, install Axios for API requests: npm install axios react-router-dom

1. axios: For making HTTP requests

Set Up API Calls In client/src/App.js, modify the file to fetch data from the backend: import React, { useEffect, useState } from "react";

import axios from "axios";

function App() {

????const [message, setMessage] = useState("");

????useEffect(() => {

????????axios.get("https://localhost:5000/")

????????????.then(res => setMessage(res.data))

????????????.catch(err => console.error(err));

????}, []);

????return (

????????<div>

????????????<h1>Full-Stack React App</h1>

????????????<p>{message}</p>

????????</div>

????);

}

export default App;

1. ?This fetches a response from the backend and displays it in the UI.

Step 4: Connecting the Frontend and Backend

Enable CORS in the Backend Ensure the backend allows cross-origin requests by including: app.use(cors({ origin: "https://localhost:3000" }));

Run Both Servers Open two terminals and start the backend first: cd server

node index.js

?Then start the frontend: cd client

npm start

1. ?Your React app should now be running and communicating with the backend.

Step 5: Deploying the Application

Once development is complete, deploying your full-stack application requires hosting the frontend and backend.

1. Deploying the Backend
2. Deploying the Frontend

Build the React app before deployment: npm run build

How SDLC Corp Can Help

At SDLC Corp , we specialize in full-stack development, helping businesses create scalable and efficient applications. Our expertise in React, Node.js, and cloud deployments ensures a smooth development process. We handle everything from UI/UX design to backend architecture, database integration, and cloud hosting.

If you're looking to develop a full-stack React application, we can provide end-to-end solutions tailored to your business needs. Get in touch with us to discuss your project and take your web application to the next level.

Conclusion

Setting up a full-stack React application involves creating a structured project, setting up a backend with Express, integrating a frontend with React, and ensuring seamless communication between them. With proper deployment, your application can reach a global audience. By partnering with SDLC Corp , you can streamline the development process and focus on growing your business while we handle the technical complexities.