Setting Up a React Development Environment and Project Structure

Before developing a React application, you need to install the underlying Node.js runtime and its package manager npm; optional tools such as Yarn, Git, and an IDE like WebStorm or VS Code are also recommended.

Check the installed versions with node -v and npm -v.

Use the Create React App scaffolding tool to generate a new project:

npx create-react-app my-app

cd my-app

npm start

The generated project has the following directory structure (files and their purpose): README.md – project overview package.json – npm configuration, scripts, dependencies yarn.lock – lock file for Yarn .gitignore – files ignored by Git src/ – source code folder, including App.js, App.css, index.js, etc. public/ – static assets such as index.html, favicon.ico, manifest.json, and robots.txt.

Additional files like serviceWorker.js enable Progressive Web App capabilities, and setupTests.js is used for testing.

Reference documentation includes the Chinese and English React official sites, a video tutorial on environment setup, and the Node.js download page.