React: do básico ao avançado - Parte 2

React é uma biblioteca JavaScript para desenvolvimento de interfaces de usuário.

Esta é a segunda parte de uma série de artigos que ensina a desenvolver e estruturar aplicações com JavaScript e React.

Clique aqui caso você ainda não tenha lido a primeira parte.

Acredito que você esteja ansioso para criar sua primeira app utilizando React. Então vamos lá!

Node.js e npm

Antes de começar, certifique-se de que você instalou Node.js (v4+) no seu computador.

Node.js é utilizado para rodar programas JavaScript no seu computador.

No caso de aplicações front-end criadas com React, utilizamos Node.js apenas para rodar, testar e criar um build para produção do nosso projeto.

O Node.js possui um gerenciador de pacotes chamado npm (Node Package Manager), ele é automaticamente instalado quando você instala o Node.js.

Nesta série, não vamos falar muito sobre Node.js e npm, porém vamos explicar o que cada comando que usarmos faz.

Hello React!

Abra uma nova aba ou janela na sua linha de comando e execute:

npm install -g create-react-app create-react-app hello-react cd hello-react npm start 

Após isso, você pode abrir a URL http://localhost:3000 no seu navegador preferido para visualizar sua app.

Se você quiser alterar o código-fonte, abra o arquivo correspondente, faça as alterações e salve. A URL http://localhost:3000 será atualizada automaticamente (desde que você esteja rodando o comando npm start).

Importante: além de arquivos JavaScript, você pode importar arquivos CSS, imagens, entre outros. Vamos falar sobre importação de arquivos em detalhes nas próximas partes desta série.

Quando você estiver pronto para colocar sua app em produção, basta executar npm run build ao invés de npm start. Uma versão para produção será gerada na pasta build, basta copiar estes arquivos para seu servidor de produção.

Simples assim! :-)

O primeiro comando que executamos (npm install -g create-react-app) instala e torna disponível um novo comando chamado create-react-app.

Create React App é uma ferramenta criada e mantida pelos criadores do React. Ela é utilizada para criar apps sem a necessidade de configurar ferramentas de building e testing como webpack, Babel, Autoprefixer, ESLint, Jest, entre outras.

Se você tinha medo de aprender React porque iria precisar aprender um monte de outras ferramentas, pode ficar tranquilo! Graças ao time do React você só precisa se preocupar com JavaScript e React.

Resumindo, Create React App faz o trabalho "sujo" para que você não se preocupe com ferramentas de building e testing. Você pode se concentrar apenas no desenvolvimento da sua app sem precisar se preocupar com webpack, Babel, Autoprefixer, etc. Tudo está pronto para você apenas usar, sem necessidade de prévia configuração.

O segundo comando (create-react-app hello-react) cria um projeto React na pasta hello-react e instala os pacotes necessários.

O terceiro comando navega até a pasta hello-react.

O quarto - e último - comando torna disponível o acesso ao app através da URL http://localhost:3000.

Componentize tudo!

Imagem retirada de How we unit test React components using expect-jsx

A ideia principal do React é que você crie componentes para absolutamente tudo e que você fuja do estilo imperativo e adote o estilo declarativo.

Mais para frente, vou explicar porque a componentização é interessante, o que é estilo imperativo e o que é estilo declarativo. No momento, apenas memorize que, com React, você estará 100% do tempo criando componentes que fazem apenas uma coisa, mas as fazem muito bem.

Nosso primeiro componente.

Ao memorizarmos que, com React, estaremos criando componentes que fazem apenas uma coisa - e as fazem muito bem - vamos criar nosso primeiro componente.

Abra o arquivo App.js na pasta src do projeto hello-react recém-criado e substitua todo o código-fonte existente por:

Snippet 1 - https://github.com/hnordt/react-do-basico-ao-avancado/blob/master/snippet-1.js

Após salvar o arquivo, caso a URL http://localhost:3000 esteja aberta, ela será atualizada automaticamente e você poderá ver o resultado.

Ufa! Consegui. E agora?

Se você chegou até aqui, muito bem! Você instalou Node.js, rodou sua primeira React app e criou seu primeiro componente.

Provavelmente, você só copiou e colocou o código-fonte sem entender muito o que está acontecendo e está cheio de perguntas, talvez até frustrado.

Se este é seu caso, não se preocupe. Isso era esperado. Ao invés de mostrar um "Hello World!" comum, eu quis mostrar um exemplo que engloba praticamente tudo que você vai usar no seu dia a dia com React.

Sério?! React é só isso?!?! Existem várias outras funcionalidades que veremos posteriormente, mas isso é praticamente tudo que você usa no dia a dia pra criar front-end apps com React.

Nesta série vamos falar profundamente sobre todas as funcionalidades do React, routing e gerenciamento de estado, porém você provavelmente não irá usar todas as features no dia a dia, e isso é intencional. Menos é mais.

É importante conhecer todas as funcionalidades das tecnologias que você usa, porém é sábio as usar somente quando realmente necessário e preferir sempre código simples e legível.

O segredo para criar apps escaláveis, e que, podem crescer sem quebrar funcionalidades já existentes, é escrever código simples e legível. Isso também permite a inclusão ou troca de desenvolvedores sem grandes dores.

Os três tipos de desenvolvedores

Apenas para complementar, acredito que existem três tipos de desenvolvedores:

1. Iniciante: possui pouco ou nenhum domínio sobre a tecnologia que está usando e fica extremamente feliz quando algo funciona.

2. Intermediário: domina a tecnologia que está usando e escreve código complexo, utilizando técnicas avançadas ou otimizando prematuramente, gosta de mostrar pra todo mundo que escreveu um código que quase ninguém entende apenas para mostrar que possui conhecimento.

3. Avançado: possui total domínio sobre a tecnologia que está usando e escreve código extremamente simples e legível para que até mesmo um iniciante entenda. Conhece e domina técnicas avançadas, mas as usa apenas quando estritamente necessário.

Resumo

Nesta parte da série você instalou Node.js e rodou sua primeira app com React.

Também aprendeu que com React você cria componentes para absolutamente tudo, e que cada componente faz apenas uma coisa, mas a faz muito bem.

Se você não entendeu nada ou pouco do que o Snippet 1 faz, não tem problema. As próximas partes desta série irão explicar cada conceito de forma detalhada e fácil de entender.

Na terceira parte desta série, vamos entender o que o React soluciona e como ele funciona.