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.