Building an API in React.js

Phillip Cantu | 2025.12.05
Full Stack Web Developer

Creating and deploying a RESTful API full CRUD-based app in React.js from scratch, without the use of AI tab-completions, is a significant milestone for any web development student, and a still a big task for senior devs.

However...

It's simpler than you may think!

visual studio code screenshot react.js fullstack web app with crud rest api

VS Code Screenshot of a React.js fullstack app.

The above sceenshot shows a fullstack React.js + Express.js application with defined CRUD routes in /Server/app/routes and today we're going to discuss all that's invovled in doing so.

This blog post is going to assume that you have basic experience and understand of: HTML, CSS, JavaScript, and how to use an IDE (like Visual Studio Code) and the Terminal/Console on your operating system. We will be building this out in TypeScript, but if you're not experienced with TS, don't worry - you should easily get the hang of it if you have a firm grasp on JavaScript.

Tech Stack

Backend (Server)
- Node.js
- Express.js
- Mongoose
- TypeScript
- Extra Libraries: cors, dotenv, morgan, and types for TypeScript
Frontend (Client)
- React.js
- React-Router
- TypeScript
- Vite
- CSS (global, modules, or Tailwind are recommend)
- Extra Libraries: react-hot-toast, and types for TypeScript

Setting up Backend

I prefer terminal and that's the route I'm going to take

1st scaffold project by installing packages and setting up directories

Open your terminal and make and change into a directory for this project.

mkdir example-api-app && cd example-api-app

Since we will need a backend server and a frontend client let's make two more folders.

mkdir server
mkdir client

Let's start on our server and scaffold our app.

cd server
npm init -y
npm install express cors dotenv morgan mongoose
npm install -D typescript tsx @types/node @types/express @types/morgan @types/cors

What did we do? With the above commands we initialized a Node.js project with npm init -y which also created the package.json file. The npm install command installed all of the libaries that'll be used on our server while the npm install -D installed all of the libaries we'll be using during development, TypeScript and its types.

Create a TypeScript Config file:

npx tsc --init

You should now see a tsconfig.json file while many default options and several commented out. Here is my full tsconfig.json, just a few changes beyond the defaults:

{
  "compilerOptions": {
    "rootDir": "./",
    "outDir": "./dist",
    "module": "nodenext",
    "moduleResolution": "NodeNext",
    "target": "ES2022",
    "lib": ["ES2022"],
    "types": ["node"],
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true
  }
}

I recommend you copy and paste that exactly as above into your tsconfig.json file

Edit package.json's scripts & type:

scripts section:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "tsx watch server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  },

type section:

"type": "module",

With the changes above we can now run npm run dev to test our app and have tsx watch for any updates to instantly update our dev environment. With npm run build and npm run start to build and run a production version of our app. Notice that it says server.ts - that tells you that we're planning to create server.ts to serve our backend app.

Before we go any further we should intiailize a git repo:

Create .gitignore:

touch .gitignore

Open & edit the .gitignore file to ignore node_modules

// .gitignore
node_modules
dist
.env

Intiailize a git repository

I don't know about you, but my computer always makes a hidden .DS_Store file. So before I initialize git at the root, I alwaysccreate another .gitignore and add .DS_Store to that file. However, this isn't required. Up to you.

We'll cd back to the root and then initialize git

cd ..
git init
git add . -A
git commit -m "Initial commit" -m "Setup basic framework for a MERN stack backend"

For the rest of the guide I won't advise when you should git add/commit/push