Iniciar um novo projeto React é muito complicado, com tantas ferramentas de construção. Ele usa muitas dependências, arquivos de configuração e outros requisitos, como Babel, Webpack, ESLint antes de escrever uma única linha de código React. A ferramenta Create React App CLI remove todas essas complexidades e torna o aplicativo React simples. Para isso, você precisa instalar o pacote usando NPM e, em seguida, executar alguns comandos simples para obter um novo projeto React.

O criar-reagir-app é uma excelente ferramenta para iniciantes, que permite criar e executar projetos React muito rapidamente. Não é necessária nenhuma configuração manualmente. Esta ferramenta envolve todas as dependências necessárias, como Webpack , Babel para o projeto React em si e então você precisa se concentrar em escrever apenas o código React. Essa ferramenta configura o ambiente de desenvolvimento, oferece uma excelente experiência ao desenvolvedor e otimiza o aplicativo para produção.

Requisitos

O aplicativo Create React é mantido por Facebook e pode funcionar em qualquer plataforma , por exemplo, macOS, Windows, Linux, etc. Para criar um projeto React usando create-react-app, você precisa ter instalado os seguintes itens em seu sistema.

1. Versão do nó >= 8.10
2. Versão NPM >= 5.6

Vamos verificar a versão atual do Nó e NPM no sistema.

Execute o seguinte comando para verificar a versão do Node no prompt de comando.

 $ node -v 

Execute o seguinte comando para verificar a versão do NPM no prompt de comando.

 $ npm -v 

Instalação

Aqui, aprenderemos como podemos instalar o React usando CRA ferramenta. Para isso, precisamos seguir os passos abaixo.

Instale o React

Podemos instalar o React usando o gerenciador de pacotes npm usando o seguinte comando. Não há necessidade de se preocupar com a complexidade da instalação do React. O gerenciador de pacotes create-react-app npm gerenciará tudo o que for necessário para o projeto React.

 C:Usersjavatpoint> npm install -g create-react-app 

Crie um novo projeto React

Assim que a instalação do React for bem-sucedida, podemos criar um novo projeto React usando o comando create-react-app. Aqui, eu escolho o nome ‘reactproject’ para meu projeto.

 C:Usersjavatpoint> create-react-app reactproject 

OBSERVAÇÃO:Podemos combinar as duas etapas acima em um único comando usandonpx. O npx é uma ferramenta executora de pacotes que vem com a versão npm 5.2 e superior.

 C:Usersjavatpoint> npx create-react-app reactproject 

O comando acima levará algum tempo para instalar o React e criar um novo projeto com o nome ‘reactproject’. Agora, podemos ver o terminal como abaixo.

A tela acima informa que o projeto React foi criado com sucesso em nosso sistema. Agora precisamos iniciar o servidor para que possamos acessar a aplicação no navegador. Digite o seguinte comando na janela do terminal.

 $ cd Desktop $ npm start 

NPM é um gerenciador de pacotes que inicia o servidor e acessa o aplicativo no servidor padrão http://localhost:3000 . Agora teremos a seguinte tela.

A seguir, abra o projeto no editor de código. Aqui, estou usando o Visual Studio Code. A estrutura padrão do nosso projeto se parece com a imagem abaixo.

No aplicativo React, existem vários arquivos e pastas no diretório raiz. Alguns deles são os seguintes:

node_modules:Ele contém a biblioteca React e quaisquer outras bibliotecas de terceiros necessárias.público:Detém o patrimônio público da aplicação. Ele contém o index.html onde o React montará o aplicativo por padrão no elemento.fonte:Ele contém os arquivos App.css, App.js, App.test.js, index.css, index.js e serviceWorker.js. Aqui, o arquivo App.js é sempre responsável por exibir a tela de saída no React.pacote-lock.json:Ele é gerado automaticamente para qualquer operação em que o pacote npm modifica a árvore node_modules ou package.json. Não pode ser publicado. Ele será ignorado se encontrar qualquer outro local além do pacote de nível superior.pacote.json:Ele contém vários metadados necessários para o projeto. Fornece informações ao npm, o que permite identificar o projeto, bem como tratar as dependências do projeto.LEIA-ME.md:Ele fornece a documentação para leitura sobre os tópicos do React.

Configuração do ambiente React

Agora, abra o src >> App.js arquivo e faça as alterações que deseja exibir na tela. Depois de fazer as alterações desejadas, salvar o arquivo. Assim que salvamos o arquivo, o Webpack recompila o código e a página será atualizada automaticamente e as alterações serão refletidas na tela do navegador. Agora podemos criar quantos componentes quisermos, importar o componente recém-criado dentro do Aplicativo.js arquivo e esse arquivo será incluído em nosso principal index.html arquivo após compilação pelo Webpack.

A seguir, se quisermos fazer o projeto para o modo de produção, digite o seguinte comando. Este comando irá gerar a compilação de produção, que é melhor otimizada.

 $ npm build