Como criar o aplicativo React em 2021 [Guia]

Introdução

Diga o que quiser sobre o mundo da criação de aplicativos, mas não há como negar que ele é excepcionalmente vasto e contém possibilidades praticamente infinitas em si mesmo. E você não precisa ir tão longe, por exemplo, apoiando essa afirmação. Basta pensar em qualquer situação na vida que não tenha um aplicativo voltado para ajudar a lidar com ela. Provavelmente, você não encontrará tal situação. Se você, no entanto, conseguir encontrá-lo, em primeiro lugar, parabéns para você e sua imaginação e, em segundo lugar, essa pode ser uma oportunidade para você criar um aplicativo necessário. Mas estamos divagando.

O que é importante aqui é o fato de que a vastidão de possibilidades que o mundo da criação de aplicativos oferece é o que permite que você entre nele perfeitamente. E, ainda mais do que isso, permite que você crie ótimos aplicativos que melhoram a vida e também melhora significativamente suas finanças. Agora que estamos todos na mesma página sobre por que você deve tentar criar um aplicativo, vamos dar uma olhada em como criá-lo de dois pontos de vista: um teórico e um prático.

Razões para criar seus aplicativos no React

Vamos começar com o lado teórico da questão. Há muitas maneiras de criar um aplicativo, desde Xamarin e AppInstitute até o herói principal deste artigo – React . Não nos interpretem mal, esta não é uma opinião tendenciosa, cada ferramenta tem suas vantagens (e desvantagens, para ser honesto), mas de todas elas o React se destaca por uma série de razões. Vamos dar-lhes um rápido resumo:

· React é experimentado e testado. Como React foi lançado no longevo 2013 e, ainda mais importante, melhorou imensamente desde então, ele provou sua versatilidade e longevidade. Além disso, alguns dos maiores e mais piores aplicativos móveis e da web, como Facebook, Instagram e Discord, para citar apenas alguns, são feitos no React. Portanto, você pode ter certeza de que seu aplicativo não será o primeiro rodeio do React e será mais do que criar um aplicativo que valha a pena nas mãos de um desenvolvedor competente.

· React é baseado em JavaScript. Em sua essência, React é uma biblioteca JavaScript de código aberto . Portanto, não há necessidade de aprender novas linguagens de programação, pois é provável que você ou alguém de sua equipe já saiba escrever em JavaScript.

· React é escalonável. Criado pelo Facebook, o React pode apoiar projetos gigantescos. Isso pode ser muito útil se você planeja criar um grande aplicativo ou planeja expandir seu projeto no futuro.

· O código do React é reutilizável. Por ser uma biblioteca JavaScript de código aberto, o React permite a reutilização de componentes de código. Isso economiza tempo e acelera tremendamente o processo de desenvolvimento de aplicativos . Este aspecto do React entrará em ação se você planeja criar vários aplicativos ou se já possui aplicativos anteriores, com componentes que gostaria de introduzir em seu projeto atual.

· React tem uma comunidade enorme. Todos nós precisamos de uma ajudinha de vez em quando, e os desenvolvedores experientes do React não são exceção. A comunidade React é uma grande solucionadora de problemas que será capaz de ajudá-lo a resolver um problema difícil, minimizando os atrasos no processo de desenvolvimento.

Como você pode ver, o React tem seu quinhão de vantagens, o que realmente consolida sua posição no mercado e no coração de muitos desenvolvedores. E esses corações também incluem o nosso e, com sorte, o seu no futuro. Agora, vamos dar uma olhada em como o processo real de criação de um aplicativo no React funciona com um exemplo prático.

Tutorial sobre a criação do aplicativo React manual

Neste exemplo, vamos criar um aplicativo React simples com a ajuda de Create React App e três outras ferramentas que serão necessárias para concluir a tarefa. Eles são:

· Node.js – um ambiente de tempo de execução JavaScript back-end de código aberto , necessário para que o aplicativo Create React funcione;

· O gerenciador de pacotes npm , versão 5.2 ou mais recente;

· E um editor de código . O que vamos usar neste exemplo é o Visual Studio Code.

A primeira etapa – Instalando o aplicativo Create React

Para instalar e posteriormente usar o aplicativo Create React, abrimos o terminal / linha de comando em nosso computador e usamos a ferramenta npx . O último oferece a capacidade de usar o pacote create-react-app sem a necessidade de instalá-lo em seu computador e garante o uso da versão mais recente do Create React App. Portanto, para inicializar o aplicativo Create React, use a seguinte linha de codificação em seu terminal / linha de comando:

· Npx create-react-app awesome-react-app

Imediatamente depois disso, a pasta apropriadamente chamada «awesome-react-app» aparecerá com todos os pacotes que requer instalação automática. Depois disso, a primeira etapa está concluída.

A segunda etapa – A Revisão da Estrutura do Projeto

Agora é hora de dar uma olhada na estrutura do nosso projeto. Idealmente, deve ser assim:

Vamos fazer um rápido resumo dos elementos contidos em awesome-react-app .

· README.md é um arquivo na linguagem Markdown, que contém muitas dicas úteis e links para aprender a criar um aplicativo React.

· Node_modules é um folde r, sem vírgula contendo todo o código relacionado à dependência que foi instalado por Create React App. Deixe assim e não vá para esta pasta.

· Package.json é “o coração” de qualquer projeto feito com o Node. Ele gerencia todas as dependências na pasta node_module , bem como todos os scripts necessários para executar nosso incrível aplicativo.

· O arquivo .gitignore é necessário para excluir arquivos e pastas do rastreamento Git.

· A pasta pública é usada para armazenar todos os ativos estáticos de nosso aplicativo React, como imagens, svgs e fontes, etc.

· E, por último, mas não menos importante, a pasta src . Este é muito importante, pois contém todo o código-fonte do nosso aplicativo. É também o lugar onde trabalhamos principalmente durante a construção de um aplicativo React.

Agora que sabemos o que nosso projeto contém, é hora de darmos o terceiro passo.

A terceira etapa – Executando o Projeto React

Começamos arrastando nosso projeto para o editor de código e executando o seguinte comando:

· Asl começar

Este comando abrirá uma nova guia com nosso aplicativo no navegador padrão do computador em localhost: 3000 . E, como vemos, já possui algum conteúdo, conforme figura abaixo:

Agora podemos entrar na pasta src , onde todo o código do aplicativo está contido. Aqui podemos alterar e modificar o código para se adequar aos nossos propósitos e objetivos. Neste ponto, o código será semelhante a este:

Vamos mudar algumas coisas aqui e ali. Por exemplo, vamos remover o p e um Tag, e adicione um h1 elemento, renomeando-o para o “Reagir Posts Sharer”. Após essas modificações, esta parte da codificação ficará assim:

Após as alterações serem feitas, podemos pressionar a combinação Command / Ctrl + S para ver imediatamente as atualizações feitas, como na imagem abaixo, e seguir para a quarta etapa.

A quarta etapa – Executando Testes com a Biblioteca de Testes React

A ferramenta Create React App está equipada com um dispositivo de teste integrado, denominado React Testing Library e pode ser executado com o seguinte comando:

· Teste de execução Npm

Mas se executarmos o teste neste estágio, ele falhará devido às alterações feitas na etapa anterior, sendo o principal motivo a perda de um elemento de link, que foi alterado para um de título. Portanto, precisamos fazer os pequenos ajustes listados abaixo:

A quinta etapa – Mudando os MetaDados do aplicativo

O React Apps funciona implementando um conceito bastante simples – o pacote ReactDOM renderiza o aplicativo anexando-o a um elemento HTML com um valor de id ‘root’. Podemos encontrar este elemento no arquivo public / index.html :

Como podemos ver no código acima, todo o nosso aplicativo React está anexado à página HTML por meio do div com o id de raiz . E é aqui que nossos metadados entram em ação, já que ao alterá-los nas tags de cabeçalho , estamos efetivamente informando aos mecanismos de pesquisa e aos usuários em potencial sobre nosso aplicativo React especificamente.

Agora que este aplicativo difere um pouco mais dos outros, podemos prosseguir para a sexta etapa.

A sexta etapa – Trabalhar com imagens e outros tipos de ativos

É bem provável que seu projeto venha a incluir alguns tipos de ativos e apostamos nas imagens. Portanto, para trabalhar com eles, precisamos olhar dentro de nosso componente App :

Tendo esclarecido isso, podemos ir para o sétimo passo.

A sétima etapa – Instalando Dependências

Em primeiro lugar, instale a dependência axios para fazer solicitações para obter os posts dentro de nosso aplicativo React de compartilhamento de post ilustrativos. Para fazer isso, vamos executar o seguinte comando:

· Npm instalar axios

Em segundo lugar, após a conclusão da instalação, vamos adicioná-lo à pasta node_module do aplicativo. Quando isso for feito, precisamos revisar todas as dependências instaladas diretamente no arquivo package.json de nosso aplicativo para garantir que a dependência axios foi adicionada à seção correta:

Se tudo estiver certo, podemos passar para a oitava etapa.

{
"name": "awesome-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
}
}

Se tudo estiver bem, podemos passar para a oitava etapa.

A oitava etapa – Importando componentes

Não há necessidade particular de escrever todo o nosso código dentro do componente App , pois podemos criar um componente separado que será capaz de buscar e exibir os dados necessários a qualquer momento. Criaremos este componente dentro da pasta src sob o nome de Postagens e, por sua vez, colocaremos dentro dele os Postagens. arquivo js .

Para buscar as postagens de que precisamos, uma solicitação do JSON Placeholder deve ser feita, após a qual iremos colocá-las em uma variável de estado ‘postagens’ e mapear sobre elas, para que seus títulos e corpos:

   // src/components/Posts.js
 
import React from "react";
import axios from "axios";
 
function Posts() {
const [posts, setPosts] = React.useState([]);
 
React.useEffect(() => {
axios
.get("http://jsonplaceholder.typicode.com/posts")
.then((response) => setPosts(response.data));
}, []);
 
return (
<ul className="posts">
{posts.map((post) => (
<li className="post" key={post.id}>
<h4>{post.title}</h4>
<p>{post.body}</p>
</li>
))}
</ul>
);
}
 
export default Posts;

Agora, a busca e o retorno de dados de postagens de nosso componente Postagens estão protegidos. Mas ainda precisamos exibi-lo em nosso aplicativo. Importe-o para o componente App para torná-lo seguro. Então, voltamos para a pasta de componentes do App.js e obtemos o componente Posts de Posts.js . Agora podemos colocar o componente Postagens sob nosso cabeçalho :

  // src/App.js
 
import Posts from "./components/Posts";
import "./App.css";
 
function App() {
return (
<div className="App">
<header className="App-header">
<img src="/logo.svg" className="App-logo" alt="logo" />
<h1>React Posts Sharer</h1>
</header>
<Posts />
</div>
);
}
 
export default App;

E isso nos permite parar de pensar no oitavo passo e pensar no nono.

A nona etapa – Styling React App com CSS

O estilo e o design do aplicativo são importantes. Portanto, é muito útil que o aplicativo Create React venha com suporte CSS pré-instalado. Mas somos mais que bem-vindos para melhorá-lo no arquivo App.css, que pode ser encontrado em src . Por exemplo:

/* src/App.css */
 
.App {
text-align: center;
margin: 0 auto;
max-width: 1000px;
}
 
.App-logo {
height: 40vmin;
pointer-events: none;
}
 
.App-header {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
}
 
li {
list-style-type: none;
}
 
.post {
margin-bottom: 4em;
}
 
.post h4 {
font-size: 2rem;
}

A estilização do app, em geral, pode ser feita no arquivo index.css . Lá, podemos adicionar outras prioridades. Por exemplo, vamos deixar o fundo do nosso aplicativo escuro e seu texto branco pelas seguintes linhas de código:

/* src/index.css */
 
body {
background-color: #282c34;
color: white;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

Agora que estamos felizes com o estilo do nosso aplicativo, podemos finalmente chegar à décima e última etapa do processo manual de criação do aplicativo React.

A décima etapa – Construindo e publicando o aplicativo React

Esta etapa é muito fácil e agradável, pois simplesmente precisamos construir nosso aplicativo React para garantir que seu tamanho não afete sua produtividade. Para fazer isso, executamos o comando build :

npm run build

Como resultado, obteremos a saída, semelhante a esta:

· Compilado com sucesso.

Tamanhos de arquivo após gzip:

46,62 KB build / static / js / 2.1500c654.chunk.js

1,59 KB build / static / js / 3.8022f77f.chunk.js

1,17 KB build / static / js / runtime-main.86c7b7c2.js

649 B build / static / js / main.ef6580eb.chunk.js

430 B build / static / css / main.5ae9c609.chunk.css

E tudo está bom e adequado, podemos finalmente executar nosso aplicativo React usando o pacote serve npm:

   npx serve

Este comando iniciará nosso aplicativo React, pronto para ser usado ou publicado na web ou em serviços de implantação. E isso conclui o processo de criação de um aplicativo da web do zero, o que, como você pode ver, não é um processo inerentemente difícil de forma alguma. Mas é sempre tentador facilitar ainda mais o seu trabalho.