React Resources

• Official React Documentation: https://react.dev/
• Chinese React Documentation: https://zh-hans.react.dev/
• React GitHub Repository: https://github.com/facebook/react

Creating React Projects

Method 1: Use Official React Scaffolding Tools

Option A: Next.js Project (Full-Stack Ready)

Initialize a React-based Next.js project with interactive configuration prompts using npx:

npx create-next-app@latest

Respond to the setup questions based on your needs:

• What is your project named? Enter a custom project folder name (e.g., my-next-react-app)
• Would you like to use TypeScript? Choose yes/no for static typing support
• Would you like to use ESLint? Enable code quality checking
• Would you like to use Tailwind CSS? Add the utility-first CSS framework
• Would you like to use src/ directory? Organize source files under a dedicated src folder
• Would you like to use App Router? Select the recommended Next.js routing system
• Would you like to customize the default import alias (@/*)? Set up shortcut paths for imports
• What import alias would you like configured? Define your preferred alias (e.g., @/*)

Option B: Basic React Project

Install the create-react-app tool globally, then generate a new project:

npm install -g create-react-app
create-react-app my-react-app

The generated project includes a src/ directory, which will be your primary workspace for writing React code.

Method 2: Use Vite (Lightning-Fast Build Tool)

Vite provides faster development reloads and build times. Create a Vite-based React project with:

npm create vite@latest

Follow the prompts to select React as your framework, then choose between JavaScript or TypeScript. The resulting project’s core code will reside in the src/ directory.

Running the Development Server

Project startup commands are defined in the package.json file:

• For create-react-app projects: Start the development server with

  npm run start
  

  Access your app in a browser at http://localhost:3000.
• For Vite projects: Launch the dev server using

  npm run dev
  

  Open your browser to http://localhost:5173 to view the app.

Building for Production

Bundle your project for deployment with the build command:

npm run build

• create-react-app outputs bundled files to the build/ directory.
• Vite outputs bundled files to the dist/ directory.

Testing the Production Build Locally

To run the bundled production files on your local machine:

1. Install the http-server tool globally:

   npm install http-server -g
   

2. Navigate to your project’s build output directory (either build/ or dist/):

   cd build
   

3. Start the static file server:

   http-server
   

Access the production build at http://127.0.0.1:8080 in your browser.