Criando uma Aplicação React do ZER0

Vamos de um diretório vazio à uma estrutura pronta para o desenvolvimento em um único comando. A ferramenta Create React App cuidará de toda a configuração complicada para nós, então, podermos focar no desenvolvimento da nossa aplicação.

Antes de começar, vamos verificar nosso ambiente de desenvolvimento. Vamos usar o nvm para gerenciar nossa instalação do NodeJS. Assim podemos manter nosso ambiente atualizado com mais facilidade.

Você pode verificar sua instalação do nvm usando o comando:

 ❯ type nvm
nvm is a shell function from /usr/local/opt/nvm/nvm.sh

Verifique também as suas versões do NodeJS, com um dos dois primeiros comandos que vão te dar essa informação, e do npm que é o gerenciados de dependências do ecosistema javascript usando o terceiro comando.

❯ nvm current
v7.5.0
❯ node --version
v7.5.0
❯ npm --version
4.1.2

Instalando o Create React App

Com tudo pronto, vamos começar instalando o CLI (command line interface) create-react-app globalmente em nosso ambiente.

❯ npm install -g create-react-app

Criando um aplicação

Com ele instalado, podemos usá-lo para criar uma aplicação do zero aproveitando todas as melhores práticas que envolvem esse processo.

❯ create-react-app react-bootstrap
❯ cd react-bootstrap

Em alguns instantes, teremos uma aplicação com essa estrutura básica. Onde podemos começar a desenvolver.

react-bootstrap/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Perceba que o create-react-app vem com alguns comandos npm pré-instalados. Você verá esse output quando a inicialização estiver terminado.

Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-bootstrap
  npm start

Happy hacking!

O que precisamos agora é entrar no código e inciar o servidor de desenvolvimento para começar a programar.

❯ atom .
❯ npm start
❯ open http://localhost:3000 # essa url deve abrir automaticamnte

Comece dando uma olhada no arquivo src/App.js. Perceba como o logo.svg e o App.css são carregados e utilizados no código. Edite a mensagem na tag <p> e quando salvar, a página atualizará automaticamente.

Com um simples comando em nosso terminal, nós configuramos uma nova aplicação React com todas as ferramentas que precisamos para atualizar o browser quando fizermos alguma alteração, executar os testes e compilar para deploy em produção.

Vamos ver um pouco de código agora!

CHECKPOINT:

❯ git init
❯ git add .
❯ git commit -am "initial commit"