Desenvolvimento full stack: Frontend

Neste minicurso iremos construir um sistema de cadastro de livros utilizando Node.js, ReactJS, Express e MongoDB. A imagem a seguir mostra a tela de listagem de livros da aplicação que será desenvolvida.

Tutorial

1 - Pelo terminal/cmd na pasta raiz do projeto execute o comando:

npx create-react-app frontend. 

Esse comando criará a estrutura básica do nosso projeto React (pode demorar alguns minutos).

Será criada a seguinte estrutura de arquivos:

• /frontend
  • /node_modules
  • /public
  • /src
  • .gitignore
  • package.json
  • README.md
  • yarn.lock\

Para iniciar a aplicação digite:

cd frontend
npm start

A seguinte mensagem aparecerá:

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3001/
  On Your Network:  http://10.55.4.110:3001/
  
  Note that the development build is not optimized.
  To create a production build, use yarn build.

2 - módulos que utlizaremos no projeto:

• bootstrap;
• react-bootstrap;
• react-router-dom;
• react-file-base64;
• axios.

Para instalar um módulo utilizamos o comando npm install modulo, por exemplo, para carregar o módulo do react-boostrap em nosso projeto utilizamos o comando:

  npm install boostrap react-bootstrap

Código-fonte para acompanhamento

Durante o minicurso o código-fonte do projeto será atualizado e compartilhado em tempo real através destes links:

• /frontend
  • /node_modules
  • /public
  • /src
    • App.js
    • index.js
  • /css
    • estilo.module.css
  • /components
    • CadastroLivro.js
    • EditarLivro.js
    • ListagemLivro.js
    • NavbarComponent.js
  • package.json