Criando Minha Primeira App Com React
Para dar início a série de posts sobre os frameworks e/ou bibliotecas (lib) para front-end, sendo eles: Angular, VueJS e ReactJS, vou começar falando sobre o React, como é o primeiro post sobre o mesmo, o processo será criar um Hello World, assim como será feito nos primeiros posts de Angular e Vue.
Criando nossa primeira app
Para estar criando nossa primeira app poderíamos fazer de forma manual, ou seja, baixar o arquivo .js do React, baixar suas dependências e/ou necessidades, baixar demais módulos para ajudar no desenvolvimento (Webpack, Babel, etc..) e finalmente realizar as configurações no projeto (básicas para um Hello World).
Como pode ver, esse trabalho é um tanto quanto burocrático, necessitanto muito esforço manual e tempo, será que não existe uma maneira mais simples? É isso que veremos nesse post.
Conhecendo o cli do React
Como de costume, atualmente está sendo uma boa prática os frameworks possuírem um cli (client) para ajudar na utilização do mesmo, assim como os outros o React também adotou esse padrão e criou seu cli, o famoso create-react-app. Com ele conseguimos criar uma aplicação em React, com boa parte das configurações realizadas (podem ser customizadas), com isso, conseguimos focar mais no aprendizado e desenvolvimento.
Instalando o cli do React
Para realizarmos a instalação do cli podemos realizar de duas maneiras: com yarn ou npm.
Não irei abordar como instalar ambos gerenciadores de pacotes ou dependência (talvez assunto para um próximo post), porém, o processo instalação pode facilmente ser encontrado na documentação oficial de ambos.
Instalando com Yarn
Para realizar a instalação com Yarn, podemos rodar o comando global add:
yarn global add create-react-app
Instalando com npm
Para realizar a instalação com npm, podemos rodar o comando install -g ou i -g:
npm install -g create-react-app
Ou
npm i -g create-react-app
Obs: Em ambos os casos estamos instalando o create-react-app como global, para que possa ser rodado em qualquer lugar do nosso terminal e compartilhado a mesma versão em todos os projetos (em alguns casos o pessoal preferem utilizar uma versão para cada projeto).
Criando a app com o cli do React
Pronto, agora que já temos nosso cli instalado, podemos finalmente criar a nossa app, o processo pode ser feito de duas maneiras diferentes, sendo elas: com o create-react-app ou npx.
A única diferença é que com o create-react-app precisamos tê-lo instalado em nossa máquina, agora o npx irá executar o create-react-app sem instalá-lo na máquina local.
Criando com create-react-app
Para criar uma aplicação com o create-react-app podemos fazer de duas maneiras: Em uma pasta já existente ou em uma nova pasta.
Criando em uma nova pasta
Para criarmos a aplicação (estou chamando de aplicação para melhor entendimento do post), em uma nova pasta apenas rodamos o create-react-app seguido pelo noma da aplicação:
create-react-app minha-primeira-app
Criando em uma pasta já existente
Assim como podemos criar uma nova pasta, também podemos utilizar uma pasta já existente para criar nossa aplicação em React. A diferença é que devemos navegar até a pasta pelo terminal (cd caminho_ate_a_pasta) e em vez de passar um nome para o create-react-app passamos um . (para referenciar a pasta atual):
create-react-app .
Criando com npx
Além de utilizar o create-react-app já instalado na máquina, podemos pedir para o npx executá-lo e criar nossa aplicação, nesse caso a instalação do create-react-app não precisa e nem será feita:
npx create-react-app minha-primeira-app
Obs: A opção de utilizar uma pasta já existente, também vale para o npx e deve ser feita da mesma maneira, apenas adicionando o npx na frente do comando, ou seja, precisamos navegar até a pasta (cd) para executar o comando e passar um . em vez de um nome.
Subindo nossa app
Com a nossa aplicação criada, podemos subí-la de duas maneiras, através do yarn ou npm, isso vai depender da sua preferência ou gosto por um desses gerenciadores de pacote.
Subindo app com yarn
Para subir a app utilizando o yarn precisamos apenas rodar o comando start:
yarn start
Subindo app com npm
De forma semelhante ao yarn, com o npm precisamos também rodar o start:
npm start
Em ambos os casos, assim que nossa app subir, o navegador será automaticamente aberto com uma página principal padrão (default) do React.
Hello World com React
Se você já foi um pouco curíoso, já deve ter dado uma olhada nos arquivos que o create-react-app cria para a gente (explicação dos arquivos fica para um próximo post), para fazer o famoso Hello World abra o arquivo App.js que fica dentro de src (localizada na raiz da aplicação).
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Aqui podemos ver o código padrão (default) do React, vamos trocar todo o conteúdo da div que tem a classe App para um simples h1 com nosso Hello World:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
}
export default App;
Voltando ao nosso navegador veja que a página já foi recarregada graças ao live reloading do React:
.
E como podemos ver, já temos o nosso Hello World com React.
.
O projeto pode ser encontrado em meu github minha-primeira-app-comt-react.
Se você quiser, em meu canal eu gravei um vídeo falando sobre o assunto, dessa forma, fica um pouco mais prático:
