React para principiantes – um guia do React.js para programadores de front-end

Artigo original: https://www.freecodecamp.org/news/react-beginner-handbook/

Tradução em português europeu

O React é um dos frameworks mais populares do JavaScript alguma vez criados, e acredito que seja uma das melhores ferramentas que anda por aí.

O objetivo deste manual é fornecer um guia inicial para aprender React.

Nota da tradução: grande parte dos conceitos trabalhados neste manual seguem válidos para todas as versões de React. No entanto, é importante reforçar que, desde a concepção do artigo original, o React passou por atualizações e é possível que algumas das soluções oferecidas aqui estejam diferentes em versões mais recentes.

No final deste manual, terás conhecimentos básicos sobre:

• O que é o React e porque é tão popular
• Como instalar o React
• Componentes do React
• State do React
• Props do React
• Manipulação de eventos de utilizador em React
• Eventos de ciclo de vida num componente do React

Estes tópicos serão a base sobre a qual construirás em outros tutoriais de React mais avançados.

Este manual é escrito especialmente para programadores de JavaScript que estão a começar com o React. Por isso, vamos começar.

O que é React?

O React é uma biblioteca do JavaScript que tem o objetivo de simplificar o desenvolvimento de interfaces visuais.

Desenvolvido pela Facebook e lançado ao mundo em 2013, ele impulsiona algumas das aplicações mais utilizadas no mundo, potenciando o Facebook e o Instagram, entre outras inúmeras aplicações.

O seu objetivo principal é facilitar o raciocínio sobre uma interface e o seu estado (em inglês, state), a qualquer momento. O React faz isso ao dividir a UI (Interface de Utilizador, em português) numa coleção de componentes.

Podes enfrentar algumas dificuldades iniciais ao aprender React. Porém, assim que fizer o "clique", garanto-te que será uma das melhores experiências que terás. O React facilita muitas coisas e o seu ecossistema está repleto de óptimas bibliotecas e ferramentas.

O React por si só tem uma API muito pequena e, basicamente, precisas compreender quatro conceitos para começar:

• Componentes
• JSX
• State
• Props

Vamos explorar todos eles neste manual e vamos deixar os conceitos mais avançados para outros tutoriais. Irei fornecer algumas dicas na última secção sobre como seguir em frente.

Podes também fazer o download deste manual em PDF / ePub / formato Mobi gratuitamente.

Resumo do manual

• Quanto JavaScript precisas saber para utilizar o React
• Porque deves aprender React?
• Como instalar o React
• Componentes do React
• Introdução ao JSX
• Utilizar JSX para compor uma UI
• A diferença entre JSX e HTML
• Incorporar JavaScript em JSX
• Gerir o state em React
• Props de componente em React
• Fluxo de dados numa aplicação em React
• Lidar com eventos de utilizador em React
• Eventos de ciclo de vida num componente React
• Para onde seguir a partir daqui

Quanto JavaScript precisas saber para utilizar o React

Antes de avançar diretamente para o React, deves ter uma boa compreensão de alguns conceitos fundamentais do JavaScript.

Não precisas ser um especialista em JavaScript, mas acho que precisas de uma compreensão (textos do autor abaixo em inglês) de:

• Variáveis
• Funções de seta
• Trabalhar com objetos e arrays utilizando Rest e Spread
• Desestruturação de objetos e arrays
• Literais de template
• Funções de callback
• Módulos da ES

Se estes conceitos não te forem familiares, deixei alguns links para descobrires mais sobre esses assuntos.

Porque deves aprender React?

Recomendo vivamente que qualquer programador para a Web tenha, pelo menos, uma compreensão básica do React.

Recomendo isto por algumas razões.

1. O React é muito popular. Como programador, é bem provável que vás trabalhar num projeto com React no futuro. Talvez num projeto existente, ou talvez a tua equipa vai querer que trabalhes numa nova aplicação com base no React.
2. Hoje em dia, muitas das ferramentas são criadas utilizando o React no seu núcleo. Frameworks populares e ferramentas como Next.js, Gatsby e muitos outros utilizam React em segundo plano.
3. Como engenheiro de front-end, o React provavelmente surgirá numa entrevista de emprego.

Estas são todas boas razões, mas uma das principais razões para eu querer que aprendas React é que o React é espetacular.

O React promove várias boas práticas de desenvolvimento, incluindo a capacidade de reutilizar o código e desenvolvimento orientado a componentes. É rápido, é leve, e a maneira como te faz pensar sobre o fluxo de dados na aplicação combina com vários cenários comuns.

Como instalar o React

Existem algumas formas diferentes de instalar o React.

Para começar, recomendo vivamente uma abordagem, que é utilizar a ferramenta oficial recomendada, chamada create-react-app.

create-react-app é uma aplicação de linha de comandos, que tem o objetivo de te colocar a par do React sem demoras.

Começas por utilizar o npx, que é uma forma fácil de descarregar e executar comandos do Node.js sem ter de instalá-los.

Vê o meu guia sobre o npx aqui: https://flaviocopes.com/npx/ (em inglês)

O npx vem com o npm (desde a versão 5.2). Se ainda não tiveres nenhum npm instalado, instala agora a partir de https://nodejs.org (o npm é instalado com o Node).

Se não tiveres a certeza que versão tens do npm, executa npm -v para verificar se precisas de atualizar.

Dica: analisa o meu tutorial sobre o terminal OSX, disponível em https://flaviocopes.com/macos-terminal/ (em inglês), caso ainda não te sintas à vontade a utilizar o terminal. Aplica-se ao Mac e ao Linux.

Quando executas npx create-react-app <app-name>, o npx irá descarregar a versão mais recente de create-react-app. Executa-a, e de seguida, remove-a do teu sistema.

Isto é ótimo porque nunca vais ter uma versão desatualizada no teu sistema, e sempre que a executares, iras obter a versão mais recente e o melhor código disponível.

Vamos então começar:

npx create-react-app todolist

Isto é quando termina a execução:

create-react-app criou uma estrutura de ficheiros na pasta que indicaste (todolist, neste caso), e inicializou um repositório Git.

Também adicionou alguns comandos no ficheiro package.json:

Nota da tradução: como é possível ver na parte das dependências, a versão na época da criação deste artigo é a versão 16.14.0. A versão atual, no momento em que esta tradução foi realizada, é a 18.2.0.

Então, podes iniciar imediatamente a aplicação ao seguir para a pasta da aplicação recentemente criada e executando npm start.

De início, este comando executa a aplicação na tua porta local 3000, e abre o teu navegador, apresentando o ecrã de boas vindas:

Agora, está tudo pronto para trabalhares na aplicação!

Componentes do React

Na última secção, viste como criar a tua primeira aplicação de React.

Esta aplicação vem com uma série de ficheiros que fazem várias coisas, em maior parte, relacionadas com a configuração, mas existe um ficheiro que se destaca: App.js.

App.js é o primeiro Componente do React que vais conhecer.

Este é o código dele:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

Uma aplicação criada utilizando React, ou um dos outros frameworks de front-end populares, como Vue e Svelte, por exemplo, é criada utilizando dezenas de componentes.

Vamos começar, no entanto, por analisar o primeiro componente. Vou simplificar o código deste componente, assim:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return /* algo */
}

export default App

Podes ver algumas coisas aqui. Importamos algumas coisas e exportamos uma função chamada App.

As coisas que importamos são, neste caso, uma biblioteca do JavaScript (o pacote de npm react), uma imagem SVG e um ficheiro CSS.

create-react-app está configurado num modo que nos permite importar imagens e CSS para utilizar no nosso JavaScript, mas isto não é algo que tenhamos de nos preocupar para já. O que precisas de te preocupar é o conceito de um componente

App é uma função que, no exemplo original, retorna algo que, à primeira vista, tem um aspeto muito estranho.

Parece ser HTML mas tem algum JavaScript incorporado.

Isto é JSX, uma linguagem especial que utilizamos para criar o resultado de um componente. Vamos falar mais sobre o JSX na próxima secção.

Para além de definir algum JSX para ser retornado, um componente tem muitas outras características.

Um componente pode ter o seu próprio state, que significa que encapsula algumas variáveis que outros componentes não conseguem aceder, a não ser que este componente exponha o state para a restante aplicação.

Um componente também pode receber dados de outros componentes. Neste caso, estamos a falar sobre props.

Não te preocupes, em breve vamos olhar com mais detalhes para todos estes termos (JSX, State e Props).

Introdução ao JSX

Não podemos falar sobre React sem explicar primeiro o JSX.

Na última secção, ficaste a conhecer o teu primeiro componente React, o componente App definido na aplicação predefinida criada pelo create-react-app.

O seu código era o seguinte:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

Anteriormente, ignoramos tudo o que estava dentro da instrução return, mas, nesta secção, vamos falar sobre isso.

Chamamos JSX a tudo o que esteja entre os parênteses do que é retornado pelo componente:

<div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
      Edit <code>src/App.js</code> and save to reload.
    </p>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

Isto parece HTML, mas não é realmente HTML. É um pouco diferente.

É um pouco estranho ter este código dentro de um ficheiro JavaScript. Isto não se parece nada com JavaScript!

Em segundo plano, o React irá processar o JSX e vai transformá-lo em JavaScript, que o navegador será capaz de interpretar.

Então, estamos a escrever JSX, mas, no final, existe um passo de tradução que o torna legível para um interpretador de JavaScript.

O React fornece-nos esta interface por uma razão: é mais fácil criar interfaces de UI utilizando JSX.

Assim que estiveres mais à vontade com o JSX, claro.

Na próxima secção, vamos falar sobre como o JSX te permite compor facilmente uma UI, e depois vamos ver as diferenças em relação ao "HTML normal" que precisas saber.

Utilizar JSX para compor uma UI

Tal como introduzido na secção anterior, um dos principais benefícios do JSX é que torna muito fácil criar uma UI.

Em particular, num componente do React, podes importar outros componentes do React e podes incorporá-los e exibi-los.

Um componente do React é geralmente criado no seu próprio ficheiro, porque é assim que podemos facilmente reutilizá-lo (ao importá-lo) em outros componentes.

Um componente do React, no entanto, também pode ser criado no mesmo ficheiro de outro componente, se planeares utilizá-lo apenas nesse componente. Aqui não existe uma "regra", podes fazer o que achares melhor.

Eu geralmente utilizo ficheiros separados quando o número de linhas fica muito grande.

Para manter as coisas simples, vamos criar um componente no mesmo ficheiro App.js.

Vamos criar um componente WelcomeMessage:

function WelcomeMessage() {
  return <p>Welcome!</p>
}

Vês? É uma simples função que retorna uma linha de JSX, que representa um elemento de HTML p.

Vamos adicioná-lo ao ficheiro App.js.

Agora, dentro do componente de JSX App, podemos adicionar <WelcomeMessage /> para exibir este componente na interface de utilizador:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function WelcomeMessage() {
  return <p>Welcome!</p>
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <WelcomeMessage />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

Aqui está o resultado. Consegues ver a mensagem "Welcome!" (em português, "boas-vindas") no ecrã?

Dizemos que WelcomeMessage é um componente-filho de App, e App é o seu componente-pai.

Vamos adicionar o componente <WelcomeMessage /> como se fizesse parte da linguagem HTML.

Esta é a beleza dos componentes React e do JSX: podemos compor uma interface de uma aplicação e utilizá-la como se estivéssemos a escrever HTML.

Com algumas diferenças, como veremos na próxima secção.

A diferença entre JSX e HTML

O JSX parece mais ou menos HTML, mas não é.

Neste secção, quero apresentar-te algumas das coisas mais importantes que precisas ter em mente ao utilizar o JSX.

Uma das diferenças pode ser bastante óbvia se observaste o componente de JSX App: existe um atributo estranho chamado className.

Em HTML, utilizamos o atributo class. É provavelmente o atributo mais utilizado, por várias razões. Uma dessas razões é o CSS. O atributo class permite-nos estilizar facilmente elementos de HTML. Frameworks de CSS, como o Tailwind, colocam este atributo no centro do processo de design em CSS da interface de utilizador.

Existe um problema, contudo. Estamos a escrever o código desta UI num ficheiro de JavaScript e o atributo class na linguagem de programação JavaScript é uma palavra reservada. Isto quer dizer que não podemos utilizar esta palavra reservada como quisermos. Ela serve um propósito específico (definir classes de JavaScript) e os criadores do React tiveram de escolher um nome diferente.

Foi assim que acabamos com className em vez de class.

Vais ter de memorizar isso, especialmente quando estiveres a copiar/colar algum HTML existente.

O React vai fazer o seu melhor para impedir que as coisas quebrem, mas irá criar uma série de alertas nas Ferramentas de Programador:

Esta não é a única funcionalidade do HTML que sofre deste problema, mas é uma das mais comuns.

Outra grande diferença entre JSX e HTML é que o HTML é muito relaxado, digamos. Mesmo que tenhas um erro na sintaxe, ou tenhas fechado incorretamente uma tag, ou tenhas uma discrepância, o browser fará o seu melhor para tentar interpretar o HTML sem dar problemas.

É uma das principais funcionalidades da Web. É muito indulgente.

O JSX não perdoa. Se te esqueceres de fechar uma tag, receberás uma mensagem clara de erro:

O React geralmente fornece mensagens de erro muito boas e informativas que te apontam na direção correta para resolver o problema.

Outra grande diferença entre JSX e HTML é que em JSX podemos incorporar JavaScript.

Vamos falar sobre isto na próxima secção.

Incorporar JavaScript em JSX

Uma das melhores funcionalidades do React é que podemos facilmente incorporar JavaScript no JSX.

Outros frameworks de frontend, por exemplo Angular e Vue, têm as suas próprias formas específicas de imprimir valores JavaScript no template, ou realizar coisas como ciclos.

O React não adiciona coisas novas. Em vez disso, permite-nos utilizar JavaScript no JSX, ao utilizar chavetas.

O primeiro exemplo disto que te vou apresentar vem diretamente do componente App que temos estado a estudar até agora.

Importamos o ficheiro SVG logo utilizando o comando

import logo from './logo.svg'

e de seguida, no JSX, atribuímos este ficheiro SVG ao atributo src de uma tag img:

<img src={logo} className="App-logo" alt="logo" />

Vamos fazer outro exemplo. Vamos supor que o componente App tem uma variável chamada message:

function App() {
  const message = 'Hello!'
  //...
}

Podemos imprimir este valor no JSX ao adicionar {message} em qualquer local do JSX.

Dentro das chavetas { }, podemos adicionar qualquer instrução JavaScript, mas apenas uma instrução por cada bloco de chavetas.

Á instrução deve retornar algo.

Por exemplo, esta é uma instrução comum que irás encontrar em JSX. Temos um operador ternário onde definimos uma condição (message === 'Hello!'), e imprimimos um valor caso a condição seja verdadeira, ou outro valor (o conteúdo de message, neste caso) caso a condição seja falsa:

{
  message === 'Hello!' ? 'The message was "Hello!"' : message
}

Gerir o state em React

Qualquer componente React pode ter o seu próprio state.

O que queremos dizer com state? O state é o conjunto de dados que é gerido pelo componente.

Imagina um formulário, por exemplo. Cada elemento input individual do formulário é responsável pela gestão do seu state: o que está escrito dentro dele.

Um botão está responsável por saber se está a ser clicado ou não. Se está a ser focado.

Um link está responsável por saber se o rato está por cima dele.

Em React, ou em qualquer framework/biblioteca com base em componentes, todas as nossas aplicações são baseadas e utilizam muito o state do componente.

Gerimos o state através do utilitário useState fornecido pelo React. É tecnicamente um hook (não precisas saber os detalhes dos hooks por enquanto, mas é o que isto é).

Importas o useState do React desta forma:

import React, { useState } from 'react'

Ao chamar useState(), irás receber uma nova variável de state e uma função que podemos chamar para alterar o seu valor.

useState() aceita o valor inicial do item de state e retorna um array que contém a variável de state e a função que chamas para alterar o state.

Exemplo:

const [count, setCount] = useState(0)

Isto é importante. Não podemos simplesmente alterar diretamente o valor de uma variável de state. Temos de chamar a sua função de modificação. Caso contrário, o componente React não ira atualizar a sua UI para refletir as alterações feitas aos dados.

Chamar o modificador é a maneira com que podemos indicar ao React que o state de um componente foi alterado.

A sintaxe é um pouco estranha, não é? Visto que useState() retorna um array, utilizamos desestruturação de array para aceder a cada item individual, assim: const [count, setCount] = useState(0)

Aqui está um exemplo prático:

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

Podes adicionar quantas chamadas useState() quiseres para criar quantas variáveis de state quiseres:

const [count, setCount] = useState(0)
const [anotherCounter, setAnotherCounter] = useState(0)

Props de componente em React

Chamamos props aos valores iniciais passados para um componente.

Anteriormente, criamos um componente WelcomeMessage

function WelcomeMessage() {
  return <p>Welcome!</p>
}

e utilizamos o componente desta maneira:

<WelcomeMessage />

Este componente não tem nenhum valor inicial. Não tem nenhum prop.

Os props podem ser passados como atributos para o componente no JSX:

<WelcomeMessage myprop={'somevalue'} />

Dentro do componente, recebemos os props como argumentos:

function WelcomeMessage(props) {
  return <p>Welcome!</p>
}

É comum utilizar desestruturação de objetos para obter os props pelo nome:

function WelcomeMessage({ myprop }) {
  return <p>Welcome!</p>
}

Agora que temos o prop, podemos utilizá-lo dentro do componente. Por exemplo, podemos imprimir o seu valor no JSX:

function WelcomeMessage({ myprop }) {
  return <p>{myprop}</p>
}

Aqui, as chavetas têm vários significados. No caso do argumento da função, as chavetas são utilizadas como parte da sintaxe de desestruturação do objeto.

De seguida, utilizamos as chavetas para definir o bloco de código da função, e por fim, no JSX, para imprimir o valor em JavaScript.

Passar props para os componentes é uma boa forma de transmitir valores na tua aplicação.

Um componente armazena dados (tem state) ou recebe dados através dos seus props.

Também podemos enviar funções como props. Por isso, um componente-filho pode chamar uma função no componente-pai.

Um prop especial, chamado children, contém o valor de tudo o que é passado entre as tags de abertura e de fecho do componente, por exemplo:

<WelcomeMessage> Here is some message </WelcomeMessage>

Neste caso, dentro de WelcomeMessage, poderíamos aceder ao valor Here is some message ao utilizar o prop children:

function WelcomeMessage({ children }) {
  return <p>{children}</p>
}

Fluxo de dados numa aplicação em React

Numa aplicação em React, os dados geralmente fluem de um componente-pai para um componente-filho utilizando props, tal como vimos na secção anterior:

<WelcomeMessage myprop={'somevalue'} />

Se passares uma função para o componente-filho, podes alterar o state do componente-pai a partir de um componente-filho:

const [count, setCount] = useState(0)

<Counter setCount={setCount} />

Dentro do componente Counter, podemos agora pegar no prop setCount e chamá-lo para atualizar o state de count no componente-pai, quando algo acontece:

function Counter({ setCount }) {
  //...

  setCount(1)

  //...
}

É preciso saberes que existem formas mais avançadas de gerir dados, que incluem a API Context e bibliotecas como Redux. Estas formas, contudo, trazem mais complexidade. Em 90% das vezes, as duas maneiras que acabei de te explicar são a solução ideal.

Lidar com eventos de utilizador em React

O React fornece uma forma fácil de gerir eventos acionados a partir de eventos DOM, como cliques, eventos de formulário, entre outros.

Vamos falar sobre eventos de clique, que são bastante simples de digerir.

Podes utilizar o atributo onClick em qualquer elemento JSX:

<button
  onClick={(event) => {
    /* gerir o evento */
  }}
>
  Click here
</button>

Quando o elemento é clicado, a função passada para o atributo onClick é acionada.

Podes definir esta função fora do JSX:

const handleClickEvent = (event) => {
  /* gerir o evento */
}

function App() {
  return <button onClick={handleClickEvent}>Click here</button>
}

Quando o evento click é aciona no botão, o React chama a função do gestor de eventos.

O React suporta uma grande variedade de tipos de eventos, como onKeyUp, onFocus,onChange, onMouseDown, onSubmit e muito outros.

Eventos de ciclo de vida num componente React

Até agora, vimos como gerir o state com o hook useState.

Existe outro hook que te quero introduzir neste manual: useEffect.

O hook useEffect permite aos componentes terem acesso aos eventos de ciclo de vida de um componente.

Quando chamas o hook, passas-lhe uma função. A função será executada pelo React quando o componente é renderizado pela primeira vez, e em todas as re-renderizações/atualizações subsequentes.

O React atualiza primeiro o DOM, e depois chama qualquer função passada para useEffect().

Tudo isto ocorre sem bloquear a renderização da UI, mesmo no código de bloqueio.

Aqui está um exemplo:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Visto que a função useEffect() é executada em todas as renderizações/atualizações subsequentes de um componente, podemos dizer ao React para passá-la à frente, para efeitos de desempenho. Fazemos isto ao adicionar um segundo parâmetro que é um array que contém uma lista de variáveis de state a ter em atenção.

O React irá executar novamente o efeito secundário apenas se um dos itens neste array for alterado.

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
}, [name, count])

Da mesma maneira, podes dizer ao React para executar o efeito secundário apenas uma vez (no início), ao passar um array vazio:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

Podes vir a utilizar essa opção muitas vezes.

useEffect() é ótimo para adicionar registos, aceder a APIs externas, e muito mais.

Para onde seguir a partir daqui

Dominar os tópicos explicados neste artigo é um grande passo no teu objetivo de aprender React.

Agora quero dar-te algumas dicas, porque é fácil perderes-te no mar de tutoriais e cursos sobre o React.

O que deves aprender a seguir? (os links citados pelo autor abaixo estão todos em inglês)

Aprende mais sobre o DOM Virtual, escrever código declarativo, fluxo de dados unidirecional, imutabilidade, composição.

Começa a criar algumas aplicações simples em React. Por exemplo, cria um simples contador ou uma interação com uma API pública.

Aprende como fazer renderizações condicionais, como fazer ciclos em JSX, como utilizar as Ferramentas de Programador do React.

Aprende como aplicar CSS numa aplicação em React, com CSS simples ou componentes estilizados.

Aprende a gerir o state utilizando a API Context, useContext e Redux.

Aprende como interagir com formulários.

Aprende como utilizar o Router do React.

Aprende como testar aplicações React.

Aprende uma aplicação de framework construída sobre o React, como Gatsby ou Next.js.

Acima de tudo, não te esqueças de praticar ao criar aplicações simples para aplicar tudo o que aprendeste.

Conclusão

Muito obrigado por leres este guia.

Espero que te inspire a aprender mais sobre o React e tudo o que podes fazer com ele!

Lembra-te que podes fazer download deste manual em PDF / ePub / e formato Mobi gratuitamente, caso queiras.

O autor publica tutoriais de programação com frequência em seu site, flaviocopes.com, se quiseres dar uma vista de olhos a outros bons conteúdos como este.

Podes entrar em contacto com o autor no Twitter: @flaviocopes.