Setup Guide
How to Set Up the React Website
Below are the instructions to run your own React website, using Next.js and Tailwind CSS.
Install Node.js (LTS).
Go to nodejs.org and download Node.js (LTS). This will provide you access to commands using npm.
Install TypeScript.
Next, install TypeScript by typing the command in your terminal:
npm install -g typescriptDownload Visual Studio Code.
Go to code.visualstudio.com to download Visual Studio Code. This code editor will allow you to edit your code for your React app.
Create a Next.js app.
Create a new Next.js app by typing the command in your terminal:
npx create-next-app@latestOn installation, you’ll see the following prompts:
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*Use all the default settings provided.
After the prompts, create-next-app will create a folder with your project name and install everything required to run your React app.
Name your project.
Name your project your-project-name or whatever you want. Keep note of the folder location.
Open your project folder in Visual Studio Code.
Open Visual Studio Code, click File > Open Folder > your-project-name.
Open a Terminal.
In the upper left, click Terminal > New Terminal.
It could be hidden in the three dots.
Run your React app.
In the terminal, type npm i, then npm run dev, pressing Enter between the commands.
npm i
npm run dev