React zero-based introduction to project practice scaffolding create-react-app to build React projects

Getting started with React from scratch to actual project practice

Chapter 2 Scaffolding create-react-app to build React applications

---

---

1. What is create-react-app?

create-react-app is a scaffolding tool officially developed by FaceBook's React team to build React single-page applications .
It integrates Webpack itself and is configured with a series of built-in loaders and default npm scripts, allowing you to develop React applications with zero configuration.
Create React App allows you to build modern web applications with just one line of commands. There is no need to learn and configure a large number of build tools, and the real-time page refresh function allows you to focus more on coding.

2. Required environment

1. Node.js: http://nodejs.cn/download/
   Just keep going to the next step during installation. Install in your own environment directory.
2. Git: https://git-scm.com/downloadsMirror
   : https://npm.taobao.org/mirrors/git-for-windows/

3. Scaffolding create-react-app

1. Create a new folder (for example: react-project) and open the terminal or VsCode in the target folder.

# 全局安装 create-react-app
npm install -g create-react-app
# 或者如果不想全局安装，可以直接使用npx（临时安装，拿的是最新的脚手架）
npx create-react-app

# 查看是否安装成功
create-react-app -V

2. Create the first React application
1) create-react-app to build a React application

# 这里的 my-app 是项目名称，注意命名方式（不能有大写字母）
create-react-app my-app

--------------创建中-------------
Creating a new React app in E:\React\project\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

It takes a while, but this process actually installs three things:

• react: top-level library for react
• react-dom: Because react has many operating environments, for example, the App side is react-native, and react-dom is used when running on the web.
• react-scripts: Contains all scripts and configurations for running and packaging react applications

When the following interface appears, it means the project was created successfully!

2) According to the prompt, use cd my-appthe command to enter the project directory you created and run itnpm start to run the project and open the browser access by default. The default port number is 3000.

3) We use VsCode to open the project just now!

During project development, the directory structure description:

• build/: store configuration files
  (dev.js: configuration file for development environment services. webpack.dev.conf.js: background server configuration file for development environment.)
• node_modules: used to store dependency files installed by npm install (dependency packages required for project engineering)
• package-lock.json: Lock the version number of the package during installation to ensure that the dependencies developed by the team are consistent
• public: static public directory
• src: project source code directory
  (where, modules: module code. less: style file)
• static: Static resource file
• static/js: public library
• dist: packaged executable file

Let’s stop here first, see you next time!