1 - Introdução 2 - Criando projeto 3 - Gerando tabela 4 - Estruturando projeto 5 - Configurando repositório 6 - Configurando controle 7 - Modelo para validar requisições 8 - Serviço para listar produtos 9 - Rota para listar produtos 10 - Serviço para cadastrar produtos 11 - Rota para cadastrar produtos 12 - Serviço para alterar produtos 13 - Rota para alterar produtos 14 - Serviço para remover produtos 15 - Rota para remover produtos 16 - Cors 17 - Criando projeto React 18 - Criando componentes no React 19 - Estrutura de formulário no React 20 - Estrutura de tabela no React 21 - Estilizando componentes 22 - Visibilidade dos botões 23 - Obtendo os produtos 24 - Exibindo os produtos na tabela 25 - Objeto produto 26 - UseState de produto 27 - Obtendo dados do formulário 28 - Cadastrar produtos 29 - Limpar formulário 30 - Selecionar produto 31 - Cancelando alteração e exclusão 32 - Remover produto 33 - Alterar produto 34 - Considerações finais

17 - Criando projeto React

Sejam bem vindos a nossa décima sétima parte do tutorial de Spring Boot e React, essa etapa do tutorial iremos criar nosso projeto React.

Inicialmente abra o Visual Studio Code e selecione o local onde será criado o nosso front-end, eu selecionei a área de trablho.

Abra o terminal do Visual Studio Code (Terminal -> New Terminal), você também pode utilizar o seguinte atalho: CTRL + ', com o terminal aberto digite: npx create-react-app front-end, o termo front-end é o nome do projeto, você pode definir outro nome se quiser, quando estiver 100% criado, no Visual Studio Code selecione a pasta do projeto (File -> Open Folder).

Projeto aberto, abra o terminal do Visual Studio Code e digite: npm start, espere alguns segundos e você terá em seu navegador o projeto em funcionamento, caso não apareça, abra uma vaa do se navegador e digite: localhost:3000, agora teremos o projeto front em funcionamento.

No vídeo abaixo sigo os passos utilizados acima para criar o projeto, em caso de dúvidas é só chamar.