Como criar sua

aplicação em
React em poucos
minutos
um ebook produzido por:

CodePrestige
Agradecimentos

Seja muito bem-vindo!

Você está prestes a criar a 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

Co-founder 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 o ecossistema de ferramentas JavaScript que o suporta. 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

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

Está pronto para criar 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 de 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.

* Confira dicas de como utilizar o Atom com o nosso ebook “Produtividade no

editor Atom”

CodePrestige - 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

CodePrestige - 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
mais!

CodePrestige - 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!”

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

Estrutura do projeto
Todo projeto criado pelo create-react-app possui uma 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órios 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.

CodePrestige - 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 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.

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

CodePrestige - 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

CodePrestige - 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

CodePrestige - 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!

CodePrestige - 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/

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

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

/ CodePrestigeBrasil

/ CodePrestige

Ebook produzido em 01/06/2017. Todos os direitos reservados.