React é sem dúvidas é uma das bibliotecas mais usual entre os desenvolvedores front-end, que inclusive, é um dos maiores requisitos para quem procura algum trabalho nessa área. Com ela é possível criar incríveis projetos utilizado o Javascript enquanto podemos reaproveitar tudo o que já foi criado de forma muito mais eficiente.
É imprescindível que você conheça o Javascript, sem isso não é possível aprender o React, visto que vamos usar o JS o tempo todo.
Se você está aqui, então provavelmente já ouviu falar em React, mas de qualquer forma, vamos ver uma breve definição dos próprios mantenedores.
O React é uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. Fonte: Wikipedia
Sempre que a gente programar nossos scripts, será necessário compila-los para assim ter um projeto que é possível rodar no lado do cliente.
Okay, agora a gente já sabe que se trata de uma biblioteca Javascript que serve para criar as interfaces com o usuário, mas ainda existe uma pergunta que não se quer calar.
Por que devo utilizar React?
Bem, essa pergunta quem deve ter a resposta é única e exclusivamente você! Mas de qualquer forma, não estude algo por que alguém te indicou, por modinha ou algo do tipo se não pretende de fato torna-la parte do seu dia a dia ou dos seus projetos.
Espero que ao termino desse artigo você possa refletir sobre a pergunta e que você tenha uma resposta mais otimista, mas de qualquer forma, vamos ver alguns motivos para estudar React.
Primeiramente temos muitas vagas de trabalho com essa biblioteca, o que nos garante estar atuando com algo que é bem remunerado e que tem uma alta procura por profissionais.
Tirando a remuneração de lado que é algo bom, vamos olhar agora para os benefícios de criar um projeto, seja um pessoal, para estudos ou usar em alguma empresa. Quando utilizamos o HTML, CSS e Javascript puro, é muito difícil a gente criar um componente, manter uma boa estrutura dos scripts JS e CSS, manter uma harmonia entre tudo o que é criado e mais algumas coisas.
Para ficar mais claro a explicação acima, para que a gente possa criar uma simples página que lista alguns produtos, é necessário ter um arquivo Javascript, arquivo CSS e todo nosso HTML. Cada pequena parte dessa página de produtos fica junto, se você pretende levar algum elemento para outra página, certamente irá fazer referência ao arquivo de estilo/javascript utilizado ou ter que duplicar o código, não é mesmo?
Com o React podemos criar um arquivo contendo todo o seu Javascript com HTML, importar apenas um trecho de CSS e chamar ele onde a gente quiser, sem precisar se preocupar com a duplicidade, já que uma vez que alteramos arquivo único e original, todas as partes que os chamam também serão afetados.
Ainda mantendo a estrutura de componentização, podemos remover um componente ou fazer a substituição de forma rápida e quase que instantânea.
Outro ponto muito importante é que vamos manter nosso código dentro de uma estrutura já existente, evitando gambiarras, modificando a estrutura do projeto, entre outras má práticas. Assim qualquer programador pode modificar o projeto sem maiores problemas.
Para fechar com cereja esse tópico, ainda com o React é possível instalar através do NPM vários pacotes, como o Axios, garantindo que a gente só faz a sua referência e começa a fazer requisições de dentro da aplicação.
O que são componentes?
Se você ainda não está habituado com o conceito de componentes, então vamos ver uma definição.
React e Componentes Web são construídos para resolver problemas diferentes. Componentes Web fornecem forte encapsulamento para componentes reutilizáveis. Enquanto que o React fornece uma biblioteca declarativa que mantém o DOM em sincronia com os seus dados. Fonte: React
Observe a imagem abaixo, ela pode facilmente ser transformada em um componente. Note que temos três principais elementos, sendo:
- Imagem do usuário;
- Nome do usuário;
- Alguma descrição, comentário ou texto feito pelo usuário.
Com o modelo de componentização a gente simplesmente escreve um script que espera receber uma imagem, nome e descrição. Uma vez os dados recebidos pelo componente, o seu layout é renderizado e agora podemos levar esse mesmo componente para qualquer parte do sistema sem se preocupar em como ele deve ser construido, afinal, programamos uma única vez e usamos infinitas outras.
O que é necessário para rodar React?
Agora que a gente já entendeu mesmo que superficialmente o que é o React e a sua importância, precisamos criar nosso primeiro projeto, para isso, vamos precisar que o Node e o NPM esteja instalado em nosso computador.
Uma vez o Node instalado, o NPM já vai estar disponível, então só é necessário fazer uma única instalação.
Também vamos precisar de um editor de código, porém eles são como cadeiras de cinema, cada um escolhe a que melhor lhe convém. De qualquer forma, é muito comum ver desenvolvedores utilizando o Visual Studio Code, na qual também recomendo.
Acesse o site oficial do VS Code, faça o download e a instalação do editor. Não vamos abordar esse tema por aqui.
Instalando o Node.JS
Primeiramente acesse a página de download do Node.JS em https://nodejs.org/en/download, por fim, escolha a versão LTS (Long Term Support, suporte a longo prazo) compatível com seu sistema operacional. Note que no Linux é possível instalar via apt.
Abaixo o comando necessário para instalar no Linux Ubuntu, caso não seja seu caso, simplesmente ignore.
sudo apt install nodejs
No Windows, basta clicar no botão indicado para que um instalador comece a ser baixado. O processo de instalação é bem, mas caso você tenha dificuldade, recomendo acompanhar o artigo https://www.pluralsight.com/guides/getting-started-with-nodejs.
Uma vez que o Node esteja instalado, vamos precisar fazer a confirmação, para isso, abra o terminal de sua preferência, como CMD, Power Shell, Git Bash, ou qualquer outro. Caso você não saiba o que é isso, é muito importante que você de uma pausa e vá até o Google pesquisar por um desses terminais, vamos utiliza-los o tempo todo.
Com o terminal aberto, digite o comando abaixo para ver a versão do Node.
node -vE o comando abaixo para ver a versão do NPM.
npm -v
Para fazer as primeiras instalações do React, vamos utilizar o NPX ao invés do NPM, inclusive, você pode rodar o comando abaixo em seu terminal para garantir que ele esteja instalado e visualizar a sua última versão.
npx -vVou pular a explicação da diferença entre o NPM e NPX, mas nas referências desse artigo vou deixar um link muito importante que esclarece isso.
Criando o seu primeiro projeto em React
Okay, tudo o que a gente precisa já está instalado, agora finalmente vamos começar a criar nosso projeto para finalmente criar nosso Hello World.
Antes de mais nada, crie uma pasta no seu sistema, é dentro dela que nosso projeto será criado e que vai conter todos os nossos códigos.
Lembra que mais acima falei sobre os terminais? Pois bem, vamos utilizar ele daqui para frente. Nas referências vou deixar uma postagem que a SatellaSoft fez no Instagram sobre esse tema, então não deixe de conferir e seguir a gente lá.
No Windows 10, clique com o botão direito do mouse enquanto segura a tecla CTRL Left (CTRL da esquerda), por fim, abra o terminal de sua preferência, aqui vou clicar em Abrir janela do PowerShell aqui.
Agora que você está com um terminal aberto, rode o comando abaixo. Note que onde está escrito meu-projeto, você pode trocar para qualquer outro nome desde que não use espaços, caracteres acentuados nem na maiúscula. Vamos manter essa convenção desde já.
npx create-react-app meu-projeto
Enquanto o projeto está sendo criado e as dependências baixadas, você verá várias mensagens na tela. Espere o processo terminar.
Uma vez que a instalação esteja concluída, vamos agora acessar a pasta meu-projeto através do próprio terminal, para isso, insira o código abaixo. Note que CD significa Change Directory (mude de diretório)
cd meu-projeto
Agora estamos dentro da pasta na qual o projeto foi criado, sendo assim, execute o comando abaixo para rodar o projeto em React e abrir o navegador de Internet.
npm startNo nosso caso foi aberto a URL localhost rodando na porta 3000, conforme mostra a seguir http://localhost:3000.
Programando em React
Dando continuidade, uma vez que você criou o projeto, abra a sua pasta no Visual Studio Code, para isso, com o VS Code aberto clique em File no canto superior esquerdo, em seguida clique em Open Folder. Agora selecione a pasta e clique em Selecionar Pasta.
Ainda no VS Code é possível utilizar o terminal integrado, mas vamos pular esse assunto por enquanto.
Como já discutido logo no inicio, o React tem sua própria estrutura e a prova disso, é que ele é muito organizado a ponto de nos trazer o .gitignore com exclusões de arquivos e pastas que não devem ser versionadas, como a node_modules, por exemplo.
Versionamento é um assunto que não vamos abordar aqui, mas é bom que você estude sobre Git e Github.
A pasta node_modules é gigante, é nela que está todos os pacotes que a gente vai utilizar e também o React para compilar nossa build final.
No Visual Studio Code, de um duplo clique no arquivo App.js. Note que logo no inicio é feito a importação de um arquivo de logo e outro de estilo, ambos estão dentro da pasta /src.
h1{
color: #3d65ac;
padding:5px 10px;
}
h1 span{
color: #ef3e39;
}Nosso código basicamente coloca o elemento h1 na cor azul e seu filho span na cor vermelho.
Agora de um duplo clique no arquivo App.js, apague a primeira linha de importação da logo. Apague também todo o conteúdo da div que contenha o atributo className App.
Vamos incluir um elemento h1 e um span, deixando nosso código como mostrado abaixo.
import './App.css';
function App() {
return (
<div className="App">
<h1>Olá, <span>mundo!</span></h1>
</div>
);
}
export default App;Se até aqui você executou tudo corretamente, ao abrir a página do projeto no navegador, vamos ver algo como mostra a figura a seguir.
Finalizamos nosso primeiro contato por aqui, mas ainda tem algo muito importante que precisa ser entendido.
O que é o JSX?
Você certamente deve ter estranhado o fato de inserir HTML dentro de uma função Javascript, mas acredite, aquilo não era HTML e sim JSX. Existe algumas regras que veremos nos próximos artigos.
Primeiramente vamos a uma breve definição do que é JSX.
JSX é uma extensão da sintaxe da linguagem JavaScript que fornece uma maneira de estruturar a renderização de componentes usando uma sintaxe familiar para muitos desenvolvedores. É semelhante ao HTML. Fonte: Wikipedia
JSX significa JavaScript XML e nos permite incluir códigos Javascript muito próximo do HTML, mantendo assim tudo muito mais organizado e fácil de entender. Com esse recurso a gente não precisa criar elementos (createElement).
O interessante é que ao invés de usar o atributo class para inserir um estilo a um elemento, devemos usar className, que é a forma como o próprio Javascript faz essa atribuição. Veja um exemplo no código abaixo.
<div className="App">No final do túnel, existe algum pré-processador, como Babel, por exemplo, que lê todas as nossas instruções JSX e cria os códigos Javascript puro para gerar nossos elementos do DOM.
Conclusão
Bem, finalizamos por aqui nosso guia básico de como dar os primeiros passos com React. Embora a gente tenha feito um mínimo esforço por parte de codificar em React, saiba que tudo o que foi discutido, instalado e configurado, é de suma importância para que você possa seguir com nossos próximos artigos e conteúdos sobre o tema.
Não deixe de conferir abaixo a seção de referência, deixei alguns links muito importantes para você e que vai agregar muito no seu conhecimento. Não se esqueça de comentar abaixo o que achou, isso nos ajuda na produção de mais materiais como esse.
