Como começar a

sua aplicação
React em poucos
minutos
produzido por:
Agradecimentos

Seja muito bem-vindo!

Você está prestes a configurar, subir e deployar na internet sua primeira aplicação em React! Está
animado? Esperamos que sim! Agradecemos a confiança e o download deste ebook. Trabalhamos
sempre para trazer pra você o melhor conteúdo de tecnologia.

Agora, sem mais delongas, boa leitura e bons códigos!

Diego Martins de Pinho

Cofundador da Code Prestige
Introdução

Um dos maiores problemas que os desenvolvedores enfrentam ao começar a desenvolver em React é

a exigência do conhecimento de todo um ecossistema de ferramentas JavaScript que o suporta,
dificultando bastante a vida de quem quer começar a estudar React. Não é raro o desenvolvedor ter
que aprender como funciona:

1. node e npm
2. ferramentas de build como o webpack ou gulp
3. tradutores como o Babel
4. entre outras ferramentas

Para evitar todo esse transtorno, vamos ensinar como subir e deployar a sua aplicação React em
poucos passos! Isso te dará a liberdade de aprender React no seu ritmo e ir fazendo experimentos e
aplicações sem se preocupar com configurações chatas e complicadas de build.

Está pronto para subir a sua primeira aplicação?

Sumário

1. Introdução
2. Requisitos
3. Primeiros passos
4. Conhecendo o create-react-app
5. Criando o projeto
6. Estrutura do projeto
7. Componentes padrões
8. Package.json
9. Comandos essenciais
10. O ciclo de desenvolvimento
11. Deploy para produção
12. Referências
Requisitos

Para conseguir subir a nossa aplicação, vamos precisar instalar algumas ferramentas:

Node (versão 6 LTS) npm (versão > 3.x) Editor de texto

Para editor de texto, recomendamos o Atom, editor de código aberto desenvolvido pela equipe do
GitHub. Mas há também outras ótimas opções, como o Sublime e o Visual Code Studio, da Microsoft.

- Ensino de programação à distância | 1

Primeiros passos

O primeiro passo para fazer a aplicação funcionar é instalar o pacote create-react-app globalmente
na sua máquina utilizando o npm. Para isso, basta executar no seu terminal o seguinte comando:

npm install -g create-react-app

Este comando irá fazer com que o pacote seja
instalado na sua máquina de forma global, ou
seja, você poderá acessar a qualquer momento
através do seu terminal

Para mais informações:

https://www.npmjs.com/package/create-react-app

- Ensino de programação à distância | 2

Conhecendo o create-react-app
O create-react-app* é um pacote que nos
permite criar aplicações web utilizando o
React sem a necessidade fazer qualquer auto
prefixer
eslint
configuração de build. Todas as ferramentas
necessárias para desenvolvimento e deploy já
estão embutidas.

webpack
jest

babel muito
* Neste ebook estaremos utilizando mais!
a versão 1.0.7

- Ensino de programação à distância | 3

Criando o projeto

Feita a instalação, para criar o seu projeto, execute o seguinte comando:

create-react-app meu-aplicativo
Neste exemplo, o projeto a ser criado será chamado
de “meu-aplicativo”. Fique à vontade para trocar
este nome para qualquer outro.

O create-react-app irá baixar todas as dependências necessárias no repositório oficial do npm. Este
processo pode levar alguns minutos. Caso tudo ocorra como esperado, ao final da instalação, o
terminal exibirá a mensagem “Happy Hacking!”

- Ensino de programação à distância | 4

Estrutura do projeto
Todo projeto criado pelo create-react-app possui a seguinte estrutura pré-definida:

Arquivo de orientações do
create-react-app. Está em inglês.

meu-aplicativo/ Todas as dependências necessárias

para o projeto.
README.md
node_modules/
Arquivo de descrição do projeto.
package.json Possui informações como o nome,
.gitignore autor, versão e as dependências.
public/
src/ Diretório que possui os arquivos
públicos do seu projeto. Contém o
html inicial.

Pasta onde está contido todos os

recursos do projeto, arquivos de
imagem, css, javascript e afins.

- Ensino de programação à distância | 5

Componentes padrões

Para que o desenvolvedor não comece a desenvolver os componentes do zero, o projeto padrão já
vem criado com alguns componentes para inspirar e servir como exemplo:

src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

* A estrutura criada é somente uma

sugestão. É possível estruturar de
qualquer maneira.

- Ensino de programação à distância | 6

Package.json
O package.json é o arquivo que descreve a sua aplicação. Ele contém informações importantes, como
o nome do projeto, autor, data, versão, e-mail e a declaração de suas dependências.

{
"name": "meu-aplicativo",
"version": "0.1.0", Dependências utilizadas
"private": true, exclusivamente para
"devDependencies": { desenvolvimento. O “react-scripts”
"react-scripts": "1.0.7" já incorpora toda a configuração
},
"dependencies": {
necessária para utilizar o Webpack,
"react": "^15.5.4", Babel, Hot Reload e demais plugins
"react-dom": "^15.5.4" na sua aplicação
package.json },
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Para mais informações:

https://docs.npmjs.com/files/package.json
- Ensino de programação à distância | 7
Comandos essenciais
O create-react-app oferece quatro comandos por padrão, sendo eles:

Comando O que faz? Resultado

Inicia o servidor de desenvolvimento

Inicia o servidor de
start desenvolvimento
na porta 3000 e abre no navegador
automaticamente

Executa os testes utilizando o Jest e

Inicia a execução dos
test testes
exibe os resultados no próprio
console

Reúne o aplicativo em Compila, traduz, minifica os recursos

run build arquivos estáticos da aplicação e gera arquivos
para produção estáticos

Remove a dependência do “react-scripts” Remove a dependência do

run eject e copia explicitamente as ferramentas de
build, configurações e scripts dentro do
“react-scripts” e deixa tudo manual
diretório da aplicação para controle do desenvolvedor

- Ensino de programação à distância | 8

O ciclo de desenvolvimento

create-react-app * normalmente a etapa de testes é realizada

Criação por ferramentas de integração contínua
meu-app

cria o projeto

meu-app salva
codifica
executa
inicia abre
Desenvolvimento npm start

servidor de
desenvolvimento carrega compila
alterações

executa

dispara gera
Deploy npm run build build

compila novas
alterações

- Ensino de programação à distância | 9

Deploy para produção

Uma vez que os arquivos estáticos tenham

sido gerados, é possível hospedá-los
facilmente em qualquer servidor web. Uma
opção gratuita e fácil é o serviço oferecido
pela BitBalloon.

1. Acesse o site
https://www.bitballoon.com/
2. Criei uma conta
3. Zipe o seu projeto (no caso a pasta
build gerada)
4. Faça o upload do zip para o site
5. Pronto! Seu projeto está na internet!

- Ensino de programação à distância | 10

Referências

● create-react-app - https://github.com/facebookincubator/create-react-app
● React - https://facebook.github.io/react/
● BitBalloon - https://www.bitballoon.com/
● Node - https://nodejs.org/en/
● npm - https://www.npmjs.com/

- Ensino de programação à distância | 11

Conheça os nossos cursos!
React 16 Definitivo
A última versão do React é uma reescritura
do core da biblioteca com uma série de
novas funcionalidades, mais performance e
melhorias. Saiba como aproveitá-la ao
máximo.
+5500 alunos | Exercícios | Resumos |
Certificado de Conclusão
Entendendo o ECMAScript 6
Aprenda tudo sobre o ES6 no curso mais
completo do tema baseado no livro
ECMAScript 6 - Entre de cabeça no futuro
do JavaScript publicado pela Casa do
Código.
+900 alunos | +6 horas | Exercícios |
Resumos | Certificado de Conclusão
 /

Confira outros e-books, vídeos e cursos nas nossas redes sociais!

E-book produzido em 01/06/2017. © 2017 Code . Todos

os direitos reservados.