Introdução do React baseada em zero à prática do projeto scaffolding create-react-app para construir projetos React

Começando com React do zero até a prática real do projeto

Capítulo 2 Scaffolding create-react-app para construir aplicativos React

---

---

1. O que é o aplicativo create-react?

create-react-app é uma ferramenta de scaffolding desenvolvida oficialmente pela equipe React do FaceBook para construir aplicativos React de página única .
Ele integra o próprio Webpack e é configurado com uma série de carregadores integrados e scripts npm padrão, permitindo desenvolver aplicativos React sem configuração.
Create React App permite que você crie aplicativos web modernos com apenas uma linha de comandos. Não há necessidade de aprender e configurar um grande número de ferramentas de construção, e a função de atualização de página em tempo real permite que você se concentre mais na codificação.

2. Ambiente necessário

1. Node.js: http://nodejs.cn/download/
   Continue para a próxima etapa durante a instalação. Instale em seu próprio diretório de ambiente.
2. Git: https://git-scm.com/downloadsMirror
   : https://npm.taobao.org/mirrors/git-for-windows/

3. Andaime create-react-app

1. Crie uma nova pasta (por exemplo: react-project) e abra o terminal ou VsCode na pasta de destino.

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

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

2. Crie o primeiro aplicativo React
1) create-react-app para construir um aplicativo React

# 这里的 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...

Demora um pouco, mas esse processo na verdade instala três coisas:

• react: biblioteca de nível superior para reagir
• react-dom: como o react tem muitos ambientes operacionais, por exemplo, o lado do aplicativo é react-nativo e o react-dom é usado para rodar na web
• react-scripts: Contém todos os scripts e configurações para executar e empacotar aplicativos react

Quando a seguinte interface aparecer, significa que o projeto foi criado com sucesso!

2) De acordo com os prompts, insira o diretório do projeto que você criou atravéscd my-appnpm start do comando e execute -o. Você pode executar o projeto e abrir o navegador para acesso por padrão. O número da porta padrão é 3000.

3) Vamos usar o VsCode para abrir o projeto agora mesmo!

Durante o desenvolvimento do projeto, descrição da estrutura de diretórios:

• build/: armazena o arquivo de configuração
  (onde, dev.js: o arquivo de configuração do serviço do ambiente de desenvolvimento. webpack.dev.conf.js: o arquivo de configuração do servidor em segundo plano no ambiente de desenvolvimento.)
• node_modules: usado para armazenar arquivos de dependência instalados pelo npm install (pacotes de dependência necessários para engenharia do projeto)
• package-lock.json: bloqueie o número da versão do pacote durante a instalação para garantir que as dependências desenvolvidas pela equipe possam ser consistentes
• público: diretório público estático
• src: diretório do código-fonte do projeto
  (onde módulos: código do módulo. menos: arquivo de estilo)
• estático: arquivo de recurso estático
• static/js: biblioteca pública
• dist: arquivo executável empacotado

Por enquanto é isso, até o próximo artigo!