Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React

Usando Create React App

by
Length:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image
What You'll Be Creating

React rapidamente virou um framework popular para criação de visões do lado cliente e servidor. Havia uma barreira enorme com o ferramental junto da frustração com a fatiga do JavaScript na comunidade. Assim, create-react-app foi criada para acabar com isso.

Começando

Devemos, primeiro, garantir que Node está instalado no sistema. Precisamos, pelo menos, da versão 4 instalada, mas o recomendado é a versão 6 para downloads mais rápidos e melhor uso de disco. Podemos usar nvm para alternar facilmente entre versões também.

Com o Node instalado, usaremos o programa de linha de comando favorito e instalaremos create-react-app globalmente para executá-lo onde quisermos no sistema.

npm install -g create-react-app

Criando Nosso Primeiro App

Primeiro, usaremos a linha de comando para navegar ou criar um diretório onde desenvolveremos o projeto. Depois, criaremos o app executando create-react-app tuts-plus-react-app. Isso usará a ferramenta de linha de comando para criar o tuts-plus-react-app.

The command-line

Após a ferramenta terminar, veremos uma tela de resumo informando onde o app foi criado e mostrando uma lista de comando que podemos usar.

The available tools

Depois, navegaremos ao app digitando cd tuts-plus-react-app.

Iniciando o App

Podemos executar o app localmente executando npm start. Depois de iniciado, seremos levados automaticamente para http://localhost:3000/ no navegador padrão para vermos a nova aplicação React em ação.

The basic React homepage

O app usa webpack para executar um servidor local de desenvolvimento. Há uma funcionalidade de vigia para quando alterarmos o código do React e salvá-lo, as mudanças aparecem automaticamente no navegador.

When you run the watch feature

Se cometermos qualquer erro no código, veremos esses erros e avisos no navegador.

An example of failing to compile

Estilo de Código e Testes

ESLint está incluso para garantir que o código segue os estilos mais comuns. Isso ajudará a garantir que o código é consistente, o que é bem útil quando temos vários contribuidores no projeto. Sugerimos usá-lo se for novo no React, bem como para aprender bons estilos de codificação JavaScript e React.

Se for acostumado a criar testes para códigos, Jest está incluso para isso. Ele é uma framework criado e mantido pelo Fcebook, criadores do React. Para executar testes, usemos npm test na linha de comando. Isso executará os testes e iniciará um vigia para executar os tests quando o código de produção altera. Há um teste que podemos adicionar em src/App.test.js.

Publicando o App

Ao finalizar as edições é hora de publicar o app. O que precisamos é executar npm run build na pasta do app. Isso usará Babel para converter o código React em código entendível pelo navegador. Também reduzirá o código e garantirá que tem a melhor performance no navegador.

Guia do Usuário

Se decidir continuar usando create-react-app, sugerimos passar um temo lendo o guia do usuário. Tem muita informação útil sobre outros tópicos relacionados a visões, como adicionar folhas de estilo CSS; importar outros componentes, imagens e fontes; e outros. Também traz informações sobre práticas de desenvolvimento web, como HTTPS; conexão com backend em Node; criação de aplicações web progressivas; e mais.

Há também uma documentação extensiva sobre testes e publicação de aplicações.

Ótimo Hacking

Esperamos que possam ver o quão fácil é criar uma aplicação React usando o projeto create-react-app e que esse artigo tenha diminuído a barreira de entrada para começar com o React. Sabemos que gostarão!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.