React — Setup

1. Setting Up Development Environment

• Installing Node.js and npm (Node Package Manager).

Download nodejs for your OS:

Node.js - Download Node.js®

Below is the screenshot for windows running x64:

Download NodeJS

This will install LTS of NodeJS v20.11.1 and NPM v10.5.0.

Open Terminal and verify if The installation is successful:

Verify NodeJS and NPM versions

• Creating a new React project using Create React App.

Choose appropriate framework:

Start a New React Project - React

I’ll be going with NextJS but feel free to use your preferable version:

npx create-next-app@latest

Create Next.JS app

my-app is created

• Overview of project structure.

Open the project folder in your favorite editor. I’ll be using VSCode:

Next.JS project

appApp Router

pagesPages Router

publicStatic assets to be served

next.config.jsConfiguration file for Next.js

package.jsonProject dependencies and scripts

instrumentation.tsOpenTelemetry and Instrumentation file

middleware.tsNext.js request middleware

.envEnvironment variables

.env.localLocal environment variables

.env.productionProduction environment variables

.env.developmentDevelopment environment variables

.eslintrc.jsonConfiguration file for ESLint

.gitignoreGit files and folders to ignore

next-env.d.tsTypeScript declaration file for Next.js

tsconfig.jsonConfiguration file for TypeScript

jsconfig.jsonConfiguration file for JavaScript

Below link has detailed explanation for the project structure:

Getting Started: Project Structure | Next.js

Congratulations, you have created a new NextJS project.