O objetivo deste manual é fornecer instruções passo a passo que ajudarão você a aprender os principais conceitos do React.

Em vez de abordar todas as teorias e conceitos do React na íntegra, ensinarei os principais componentes da biblioteca. Você aprenderá sobre JSX, componentes, props, estados, manipuladores de eventos, criação de formulários e execução de solicitações de rede.

Índice

  • Requisitos
  • Capítulo 1: Introdução
    • Configuração do computador
    • Seu primeiro aplicativo React
    • Explicando o código-fonte
  • Capítulo 2: Como criar componentes React
    • Como retornar vários elementos com fragmentos
    • Como renderizar na tela
    • Como escrever comentários no React
    • Como compor vários componentes como um só
  • Capítulo 3: Fazendo sentido do JSX
    • Como renderizar uma lista usando JSX
    • Como adicionar o atributo de classe
  • Capítulo 4: Adereços e Estados
    • Como Passar Vários Adereços
    • Os adereços são imutáveis
    • Estado em React
    • Como passar o estado para um componente filho
    • Como usar o React DevTools para inspecionar estados e propriedades
  • Capítulo 5: Renderização Condicional do React
    • Renderização parcial com uma variável regular
    • Renderização em linha com o operador &&
    • Renderização em linha com o operador condicional (ternário)
  • Capítulo 6: Como lidar com eventos do usuário
    • Como alterar a interface do usuário manipulando eventos
  • Capítulo 7: CSS em React
    • Estilo em linha do React
    • Arquivos CSS
    • Módulos CSS
    • CSS do Tailwind
    • Qual você deve usar?
  • Capítulo 8: Como construir formulários em React
    • Como lidar com a entrada do formulário
    • Como lidar com o envio de formulários
    • Como lidar com a validação de formulários
  • Capítulo 9: Solicitações de rede no React
    • O gancho useEffect
  • Concluindo

Ao abordar esses conceitos, você estará preparado para se aprofundar em tópicos avançados do React.

Requisitos

Para aproveitar ao máximo este manual, você precisa ter conhecimentos básicos de HTML, CSS e JavaScript. Não é necessário conhecimento prévio de React, pois começaremos do básico.

 

Capítulo 1: Introdução

React é uma biblioteca front-end JavaScript muito popular. Ela recebeu muita atenção de desenvolvedores do mundo todo por sua simplicidade e desempenho rápido .

O React foi desenvolvido inicialmente pelo Facebook como uma solução para problemas de front-end que eles estavam enfrentando:

  • A manipulação do DOM é uma operação cara e deve ser minimizada
  • Não havia nenhuma biblioteca especializada em lidar com desenvolvimento front-end na época (existe o Angular, mas é um framework INTEIRO).
  • Usar muito JavaScript puro pode transformar um aplicativo web em uma bagunça difícil de manter.

Por que os desenvolvedores adoram o React? Como desenvolvedor de software, posso pensar em alguns motivos pelos quais adoro o React:

  • É minimalista . O React cuida de apenas UMA coisa: a interface do usuário e como ela muda de acordo com os dados que você insere. O React torna sua interface dinâmica com o mínimo de código.
  • A curva de aprendizado é baixa . Os conceitos básicos do React são relativamente fáceis de aprender, e você não precisa de meses ou 40 horas de videoaulas para aprender o básico.
  • Não é opinativo . O React pode ser integrado a diversas tecnologias diferentes. No front-end, você pode usar diferentes bibliotecas para lidar com chamadas Ajax (Axios, Superagent ou simplesmente Fetch). No back-end, você pode usar PHP/Ruby/Go/Python ou qualquer linguagem de sua preferência.
  • Conta com forte apoio da comunidade . Para aprimorar os recursos do React, colaboradores de código aberto criaram um ecossistema incrível de bibliotecas que permite criar aplicativos ainda mais poderosos. Mas a maioria das bibliotecas de código aberto para React são opcionais. Você não precisa aprendê-las até dominar os fundamentos do React.

O ponto principal é que, com uma curva de aprendizado baixa, o React oferece um poder incrível para tornar sua interface de usuário flexível, reutilizável e sem complicações.

Aprender React abre enormes oportunidades se você quer trabalhar como desenvolvedor web.

Configuração do computador

Para começar a programar com React, você precisará ter três coisas:

  1. Um navegador da web
  2. Um editor de código
  3. Node.js

Usaremos o navegador Chrome para executar nosso código JavaScript, então, se você não o tiver, poderá baixá-lo aqui .

O navegador está disponível para todos os principais sistemas operacionais. Após a conclusão do download, instale o navegador no seu computador.

Em seguida, você precisará instalar um editor de código, caso ainda não tenha um. Existem vários editores de código gratuitos disponíveis na internet, como Sublime Text, Visual Studio Code e Notepad++.

Desses editores, meu favorito é o Visual Studio Code, porque é rápido e fácil de usar.

Como instalar o Visual Studio Code

O Visual Studio Code, ou VSCode, é um aplicativo criado com o propósito de escrever código. Além de ser gratuito, o VSCode é rápido e está disponível em todos os principais sistemas operacionais.

Você pode baixar o Visual Studio Code aqui .

Ao abrir o link acima, deverá aparecer um botão mostrando a versão compatível com seu sistema operacional, conforme mostrado abaixo:

ImagemBaixando o Visual Studio Code

Clique no botão para baixar o VSCode e instalá-lo no seu computador.

Agora que você tem um editor de código instalado, o próximo passo é instalar o Node.js

Como instalar o Node.js

Node.js é um aplicativo de tempo de execução JavaScript que permite executar JavaScript fora do navegador. Você precisa instalar este aplicativo no seu computador para instalar os pacotes necessários para o desenvolvimento em React.

Você pode baixar e instalar o Node.js em https://nodejs.org . Escolha a versão LTS recomendada, pois ela oferece suporte de longo prazo. O processo de instalação é bem simples.

Para verificar se o Node foi instalado corretamente, digite o comando abaixo na sua linha de comando (Prompt de Comando no Windows ou Terminal no Mac):

node -v

A linha de comando deve responder com a versão do Node.js que você tem no seu computador.

Seu primeiro aplicativo React

É hora de executar sua primeira aplicação React. Primeiro, crie uma pasta no seu computador que será usada para armazenar todos os arquivos relacionados a este livro. Você pode nomear a pasta "beginning_react".

O próximo passo é abrir seu terminal e executar o comando npm para criar um novo aplicativo React usando o Vite.

Vite (pronuncia-se "veet") é uma ferramenta de construção que você pode usar para inicializar um novo projeto React. Dentro da pasta "beginning_react", você precisa executar o seguinte comando para criar um novo projeto React com o Vite:

npm create vite@5.1.0 my-react-app -- --template react

Você deverá ver o npm solicitando a instalação de um novo pacote (create-vite), conforme mostrado abaixo. Prossiga digitando "y" e pressionando Enter:

Need to install the following packages:
  create-vite@5.1.0
Ok to proceed? (y) y

Em seguida, o Vite criará um novo projeto React chamado 'my-react-app' da seguinte maneira:

Scaffolding project in /dev/beginning_react/my-react-app...

Done. Now run:

  cd my-react-app
  npm install
  npm run dev

Quando terminar, siga os próximos passos mostrados na saída acima. Use o cdcomando para alterar o diretório de trabalho para o aplicativo que você acabou de criar e execute npm installpara instalar os pacotes necessários para o aplicativo.

Em seguida, você precisa executar o npm run devcomando para iniciar seu aplicativo:

$ npm run dev

> my-react-app@0.0.0 dev
> vite


  VITE v5.0.10  ready in 509 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Agora você pode visualizar o aplicativo em execução no navegador, no endereço localhost designado:

ImagemPágina inicial do Vite-React

Isso significa que você criou seu primeiro aplicativo React com sucesso. Parabéns!

Explicando o código-fonte

Agora que você executou com sucesso um aplicativo React, vamos dar uma olhada no código-fonte gerado pelo Vite para entender como as coisas funcionam.

Execute o Visual Studio Code que você instalou na seção anterior e abra a pasta 'my-react-app' dentro do VSCode.

Aqui, você deverá ver várias pastas e arquivos que compõem o aplicativo React da seguinte maneira:

ImagemEstrutura do aplicativo Vite-React

Este vite.config.jsé um arquivo de configuração que instrui o Vite sobre como executar o aplicativo. Como temos um aplicativo React, você verá o plugin React importado dentro:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

Quando você executa o npm run devcomando, o Vite examinará esse arquivo para saber como executar o programa.

O package.jsonarquivo armazena informações sobre o projeto, incluindo os pacotes necessários para executá-lo sem problemas. O package-lock.jsonarquivo mantém um registro das versões dos pacotes instalados.

O .eslintrc.cjsarquivo contém regras do ESLint. O ESLint é uma ferramenta de análise de código que pode identificar códigos problemáticos no seu projeto sem a necessidade de executá-lo. Ele relatará quaisquer erros e avisos no VSCode.

O index.htmlarquivo é um documento HTML estático que será usado ao executar o aplicativo React e README.mdcontém uma introdução ao projeto.

Você não precisa modificar nenhum desses arquivos. Em vez disso, vamos para a src/pasta onde o código do aplicativo React está escrito.

src
├── App.css
├── App.jsx
├── assets
│   └── react.svg
├── index.css
└── main.jsx

Primeiro, o App.cssarquivo contém as regras CSS aplicadas ao App.jsxarquivo, que é o código principal do aplicativo React.

A assets/pasta contém os recursos necessários para este projeto. Neste caso, é o ícone do React, que você viu no navegador.

O index.cssarquivo é o arquivo CSS raiz aplicado globalmente ao aplicativo, e o main.jsxarquivo raiz que acessa o index.htmlarquivo para renderizar o aplicativo React. Aqui está o conteúdo do main.jsxarquivo:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Aqui, você pode ver que a biblioteca ReactDOM cria uma raiz no <div>elemento que contém o rootID e, em seguida, renderiza todo o aplicativo React para esse elemento.

Você pode abrir o App.jsxarquivo para visualizar o código React:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Neste arquivo, um único componente chamado Appé definido. Os logotipos Vite e React são renderizados com um link para a respectiva biblioteca, e há um botão de contador que incrementará o contador em 1 ao clicar nele.

Este arquivo é onde exploraremos os fundamentos do React. Vamos apagar tudo neste arquivo e escrever um Appcomponente simples que renderiza um <h1>elemento:

function App() {
  return <h1>Hello World</h1>
}

export default App

Em seguida, exclua as pastas index.css, app.csse assets/. Você também precisa excluir a import './index.css'instrução do seu main.jsxarquivo.

Se você abrir o navegador novamente, deverá ver um único título renderizado da seguinte maneira:

ImagemSaída do React a partir de alterações no código

Certo! Agora você está pronto para aprender os fundamentos do React. Começaremos sua primeira lição no próximo capítulo.

Capítulo 2: Como criar componentes React

No React, um componente é uma unidade independente de uma interface de usuário (IU). O que você escreve dentro de um componente determinará o que deve aparecer na tela do navegador em um determinado momento.

No capítulo anterior, criamos um Appcomponente que retorna um elemento de título:

function App() {
  return <h1>Hello World</h1>
}

export default App

Um componente é composto por uma função que retorna um único elemento de interface do usuário.

Quando você deseja que um componente não renderize nada, você pode retornar um nullou falseem vez de um elemento.

function App() {
  return null
}

Todos os componentes do React são salvos na .jsxextensão de arquivo . Como você pode ver neste projeto, você tem main.jsxe App.jsx.

O que é JSX? É uma extensão do JavaScript que produz elementos HTML baseados em JavaScript. Aprenderemos mais sobre isso mais tarde.

Como retornar vários elementos com fragmentos

Um componente deve sempre retornar um único elemento. Quando você precisa retornar vários elementos, é necessário envolvê-los em um único elemento, como <div>:

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </div>
  )
}

export default App

Mas isso fará com que seu aplicativo renderize um <div>elemento extra no navegador. Para evitar bagunçar seu aplicativo, você pode renderizar uma tag vazia <>como esta:

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </>
  )
}

export default App

A tag vazia acima é um recurso do React chamado Fragmento. Ao usar um Fragmento, seu componente não renderizará um elemento extra na tela.

Você também pode importar o Fragmentmódulo do React para torná-lo explícito da seguinte maneira:

import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </Fragment>
  )
}

export default App

Mas você não precisa declarar a Fragmenttag explicitamente. Usar uma tag vazia <>é suficiente.

Como renderizar na tela

Para renderizar um componente React no navegador, você precisa criar um componente React raiz usando a biblioteca ReactDOM, que você viu anteriormente ao visualizar o main.jsxarquivo.

Você precisa ter um arquivo HTML como a fonte a partir da qual seu componente React será renderizado.

Normalmente, um documento HTML muito básico com um <div>é suficiente, como você pode ver no index.htmlarquivo:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

Em seguida, você renderiza o componente no <div>elemento.

Observe como o ReactDOM é importado do react-dompacote e document.getElementById('root')é usado para selecionar o <div>elemento abaixo:

import React from 'react'
import ReactDOM from 'react-dom/client'

function App() {
  return <h1>Hello World!</h1>
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Aqui, você pode ver que o Appcomponente está localizado no mesmo arquivo que a biblioteca ReactDOM. Você pode fazer isso se quiser remover o App.jsxarquivo, para que tenha apenas um único main.jsxarquivo como fonte para o seu aplicativo React.

Mas é confuso ter vários componentes em um arquivo, então não vamos fazer isso.

Como escrever comentários no React

Escrever comentários em componentes React é semelhante a comentar em código JavaScript comum. Você pode usar a sintaxe de barra dupla //para comentar qualquer código.

O exemplo a seguir mostra como comentar a exportdeclaração:

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <h2>Learning to code with React</h2>
    </>
  )
}

// export default App

Quando você quiser comentar o código dentro da returninstrução, você precisa usar o formato de chaves, barra e asterisco, {/* comment here */}conforme mostrado abaixo:

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      {/* <h2>Learning to code with React</h2> */}
    </>
  )
}

Pode parecer muito chato ter que se lembrar de duas maneiras diferentes de comentar ao escrever aplicativos React. Mas não se preocupe, porque uma ferramenta moderna como o VSCode sabe como gerar a sintaxe de comentário correta.

Você só precisa pressionar o atalho de comentário, que é CTRL + /para Windows/Linux ou Command + /macOS.

Como compor vários componentes como um só

Até este ponto, você renderizou apenas um Appcomponente para o navegador. Mas aplicativos criados com React podem ser compostos por dezenas ou centenas de componentes.

A composição de componentes é o processo de formação da interface do usuário utilizando componentes fracamente acoplados. É como construir uma casa com blocos de Lego, como mostrarei no exemplo a seguir:

export default function ParentComponent() {
  return (
    <>
      <UserComponent />
      <ProfileComponent />
      <FeedComponent />
    </>
  );
}

function UserComponent() {
  return <h1> User Component </h1>;
}

function ProfileComponent() {
  return <h1> Profile Component </h1>;
}

function FeedComponent() {
  return <h1> Feed Component</h1>;
}

No exemplo acima, você pode ver como o <ParentComponent>renderiza três componentes filhos:

  • <UserComponent>
  • <ProfileComponent>
  • <FeedComponent>

A composição de muitos componentes formará uma única árvore de componentes React em uma abordagem de cima para baixo.

A árvore será então renderizada no DOM através do ReactDOM.render()método:

ImagemÁrvore de componentes do React ilustrada

Ao compor vários componentes, você pode dividir a interface do usuário em partes independentes e reutilizáveis, e desenvolver cada parte isoladamente.

Capítulo 3: Fazendo sentido do JSX

No capítulo anterior, você aprendeu que um componente sempre deve ter uma returninstrução que contenha elementos a serem renderizados na tela:

function App() {
  return <h1>Hello World</h1>
}

A tag <h1>parece uma tag HTML comum, mas na verdade é uma linguagem de modelo especial incluída no React chamada JSX.

JSX é uma extensão de sintaxe que produz elementos HTML baseados em JavaScript. Ela pode ser atribuída a variáveis JavaScript e pode ser retornada de chamadas de função. Por exemplo:

function App() {
  const myElement = <h1>Hello World</h1>
  return myElement
}

Graças ao JSX, você também pode incorporar expressões JavaScript dentro de um elemento usando chaves {}:

const lowercaseClass = 'text-lowercase';
const text = 'Hello World!';
const App = <h1 className={lowercaseClass}>{text}</h1>;

É isso que diferencia os elementos React dos elementos HTML. Não é possível incorporar JavaScript diretamente usando chaves em HTML.

Em vez de criar uma linguagem de modelagem totalmente nova, você só precisa usar funções JavaScript para controlar o que está sendo exibido na tela.

Como renderizar uma lista usando JSX

Por exemplo, digamos que você tenha uma série de usuários que gostaria de mostrar:

const users = [
  { id: 1, name: 'Nathan', role: 'Web Developer' },
  { id: 2, name: 'John', role: 'Web Designer' },
  { id: 3, name: 'Jane', role: 'Team Leader' },
]

Você pode usar a map()função para fazer um loop no array:

function App() {
  const users = [
    { id: 1, name: 'Nathan', role: 'Web Developer' },
    { id: 2, name: 'John', role: 'Web Designer' },
    { id: 3, name: 'Jane', role: 'Team Leader' },
  ]

  return (
    <>
      <p>The currently active users list:</p>
      <ul>
      {
        users.map(function(user){
          // returns Nathan, then John, then Jane
          return (
            <li> {user.name} as the {user.role} </li>
          )
        })
      }
      </ul>
    </>
  )
}

No React, você não precisa armazenar o valor de retorno da map()função em uma variável. O exemplo acima retornará um <li>elemento para cada valor de array no componente.

Embora o código acima já esteja completo, o React disparará um erro no console, dizendo que você precisa colocar uma propriedade "key" em cada filho de uma lista (o elemento que você retorna da map()função):

ImagemAviso de 'chave' do React no console do navegador

Uma prop (abreviação de propriedade) é uma entrada que você pode passar para um componente ao renderizá-lo. A keyprop é uma prop especial que o React usará para determinar qual elemento filho foi alterado, adicionado ou removido da lista.

Você não o utilizará ativamente em nenhuma parte do código de renderização do seu array, mas o React solicitará um quando você renderizar uma lista.

É recomendável que você coloque o identificador exclusivo dos seus dados como o valor da chave. No exemplo acima, você pode usar os user.iddados. Veja como passar uma keypropriedade para cada <li>elemento:

return (
  <li key={user.id}> 
    {user.name} as the {user.role} 
  </li>
)

Quando você não tem nenhum identificador exclusivo para sua lista, você pode usar o indexvalor da matriz como último recurso:

users.map(function(user, index){
  return (
    <li key={index}>
      {user.name} as the {user.role}
    </li>
  )
})

Props são um dos ingredientes que tornam um componente React poderoso. Você aprenderá mais sobre isso no próximo capítulo.

Como adicionar o atributo de classe

Você pode adicionar o classatributo aos seus elementos usando a classNamepalavra-chave:

function App() {
  return <h1 className='text-lowercase'>Hello World!</h1>
}

A palavra-chave classé reservada para classes JavaScript, então você precisa usar className.

Capítulo 4: Adereços e Estados

Props e estados são usados para passar dados dentro de componentes React. Props (ou propriedades) são entradas passadas de um componente pai para seu componente filho.

Por outro lado, estados são variáveis definidas e gerenciadas dentro dos componentes.

Vamos começar entendendo props. Suponha que você tenha um ParentComponentque renderiza algo ChildComponentcomo isto:

function ParentComponent() {
  return <ChildComponent />
}

Você pode passar uma propriedade de ParentComponentpara ChildComponentadicionando um novo atributo após o nome do componente.

No código abaixo, a namepropriedade com o valor 'John' é passada para ChildComponent:

function ParentComponent() {
  return <ChildComponent name='John' />
}

Quando o componente for renderizado no navegador, ele ChildComponentreceberá o nome prop no componente.

Você pode acessar o propsobjeto definindo-o no argumento do componente de função:

function ChildComponent(props){
  return <p>Hello World! my name is {props.name}</p>
}

O propsparâmetro sempre será um objeto, e qualquer prop que você definir ao renderizar o componente será passado como uma propriedade para o objeto.

Como Passar Vários Adereços

Você pode passar quantos props quiser para um único componente filho. Basta adicionar os props ao usar o componente, conforme mostrado abaixo:

function ParentComponent() {
  return (
    <ChildComponent
      name="John"
      age={29}
      hobbies={["read books", "drink coffee"]}
      occupation="Software Engineer"
    />
  )
}

Todos os adereços acima serão passados para o propsparâmetro do ChildComponent.

Você pode até passar uma função para props como esta:

function ParentComponent() {
  function greetings() {
    return 'Hello World'
  }

  return <ChildComponent greetings={greetings} />
}

No componente filho, você pode chamar a função da seguinte maneira:

function ChildComponent(props) {
  return <p>{props.greetings()}</p>
}

Observe que se você passar qualquer coisa diferente de uma string como valor prop, você precisa colocar o valor entre chaves (números, funções, matrizes, objetos e assim por diante)

Isso ocorre porque expressões JavaScript não podem ser processadas pelo JSX, a menos que você coloque a expressão entre chaves.

Os adereços são imutáveis

Imutável significa que o valor de um objeto não pode ser alterado, não importa o que aconteça.

No código abaixo, ele ChildComponenttenta alterar o valor da props.namepropriedade:

function ChildComponent(props){
  props.name = 'Mark';
  return <p>Hello World! my name is {props.name}</p>
}

function ParentComponent() {
  return <ChildComponent name='John'/>
}

export default ParentComponent

Mas você receberá um erro no console como o seguinte:

Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'

Como você pode ver, as propriedades do React não podem ser alteradas depois de declaradas. Mas e se seus dados precisarem ser alterados conforme o usuário interage com o aplicativo? É aí que o estado entra em ação.

Estado em React

No React, estados são dados arbitrários que você pode declarar e gerenciar em seus componentes. Para criar um estado no React, você precisa chamar o useStatehook conforme mostrado abaixo:

import { useState } from 'react'

function ParentComponent() {
  const [name, setName] = useState('John')

}

export default ParentComponent

No React, ganchos são funções que permitem que você explore os recursos oferecidos pelo React. O useStategancho é uma função que permite que você atribua valor ao mecanismo de estado.

Ao chamar a useState()função, você pode passar um argumento que servirá como valor inicial do estado. A função então retorna um array com dois elementos.

O primeiro elemento contém o valor do estado, e o segundo elemento é uma função que permite alterar o valor do estado. Você precisa usar a sintaxe de array de desestruturação para receber ambos os elementos, conforme mostrado acima.

Você pode dar qualquer nome às variáveis retornadas por useState, mas é recomendado usar [something, setSomething].

Para renderizar o valor do estado, você pode incorporá-lo ao JSX da seguinte maneira:

function ParentComponent() {
  const [name, setName] = useState('John')

  return <h1>Hello {name}</h1>
}

Se você quiser alterar o valor da namevariável, precisará usar a setName()função fornecida.

Mas você não pode chamar setName()o corpo do componente, porque o React será atualizado sempre que você alterar o valor do estado.

Em vez disso, você pode criar um botão que alterará o valor do nome quando você clicar nele:

function ParentComponent() {
  const [name, setName] = useState('John')

  return (
    <>
      <h1>Hello {name}</h1>
      <button onClick={() => setName('Mark')}>Change Name</button>
    </>
  )
}

No código acima, criamos um <button>elemento e adicionamos o onClickprop, que é executado sempre que clicamos no botão.

Dentro do prop, passamos uma função que simplesmente chama a setName()função, alterando o valor do estado.

Como passar o estado para um componente filho

Você pode passar o estado para qualquer componente filho. Quando precisar atualizar o estado de um componente filho, você precisa passar a setSomethingfunção recebida do useStatehook.

Aqui está um exemplo de passagem de um estado de ParentComponentpara ChildComponent:

function ParentComponent() {
  const [name, setName] = useState('John')

  return <ChildComponent name={name} setName={setName} />
}

No ChildComponent, você pode chamar a setName()função propsassim:

function ChildComponent(props) {
  return (
    <>
      <h1>Hello {props.name}</h1>
      <button onClick={() => props.setName('Mark')}>Change Name</button>
    </>
  )
}

Ao clicar no botão ChildComponent, o valor do nameestado será alterado. Internamente, o React atualizará o aplicativo e refletirá as alterações na interface do usuário.

Como usar o React DevTools para inspecionar estados e propriedades

Para ajudar a facilitar seu desenvolvimento, você pode instalar o React Developer Tools (DevTools para abreviar) para inspecionar o estado atual e o valor das propriedades dos seus componentes.

Você pode instalar o React DevTool para Chrome aqui .

Após a instalação, abra a ferramenta do desenvolvedor e você deverá ter duas abas extras chamadas Componentes e Profiler , conforme mostrado abaixo:

ImagemAbrindo o React DevTool

Semelhante à forma como você pode inspecionar regras CSS aplicadas a elementos HTML, você pode inspecionar o estado e as propriedades dos componentes React usando as ferramentas do desenvolvedor. Clique na aba Componentes e inspecione um dos dois componentes que criamos anteriormente.

Abaixo, você pode ver os adereços e o estado do ParentComponent, bem como outros detalhes:

ImagemInspecionando componentes com React DevTool

Ao clicar no botão, o valor do estado será alterado de acordo. Você pode inspecionar ChildComponentpara ver seus detalhes. Estas DevTools serão úteis ao desenvolver aplicativos React.

Capítulo 5: Renderização Condicional do React

Você pode controlar qual saída está sendo renderizada por um componente implementando a renderização condicional no seu código JSX.

Por exemplo, digamos que você queira alternar entre a renderização dos botões de login e logout, dependendo da disponibilidade do userestado:

function App(props) {
  const { user } = props

  if (user) {
    return <button>Logout</button>
  }
  return <button>Login</button>
}

export default App

Você não precisa adicionar uma elseinstrução no componente porque o React interromperá outros processos quando atingir uma returninstrução.

No exemplo acima, o React renderizará o botão de logout quando o uservalor for truey, e o botão de login quando userfor falsey.

Renderização parcial com uma variável regular

Ao desenvolver com React, haverá casos em que você desejará renderizar uma parte da sua interface do usuário dinamicamente em um componente.

No exemplo abaixo, o elemento JSX é armazenado em uma variável chamada button, e essa variável é usada novamente na returninstrução:

function App(props) {
  const { user } = props

  let button = <button>Login</button>

  if (user) {
    button = <button>Logout</button>
  }

  return (
    <>
      <h1>Hello there!</h1>
      {button}
    </>
  )
}

Em vez de escrever duas instruções de retorno, você armazena o elemento dinâmico da interface do usuário dentro de uma variável e usa essa variável na returninstrução.

Dessa forma, você pode ter um componente que possui elementos estáticos e dinâmicos.

Renderização em linha com o &&operador

É possível renderizar um componente somente se uma determinada condição for atendida e renderizá-lo nulo caso contrário.

Por exemplo, digamos que você queira renderizar uma mensagem dinâmica para usuários quando eles tiverem novos e-mails na caixa de entrada:

function App() {
  const newEmails = 2

  return (
    <>
      <h1>Hello there!</h1>
      {newEmails > 0 &&
        <h2>
          You have {newEmails} new emails in your inbox.
        </h2>
      }
    </>
  )
}

Neste exemplo, o <h2>elemento só é renderizado quando a newEmailscontagem é maior que 0.

Renderização em linha com o operador condicional (ternário)

Também é possível usar um operador ternário para renderizar a interface do usuário dinamicamente.

Veja o exemplo a seguir:

function App(props) {
  const { user } = props

  return (
    <>
      <h1>Hello there!</h1>
      { user? <button>Logout</button> : <button>Login</button> }
    </>
  )
}

Em vez de usar uma variável para armazenar o <button>elemento, você pode simplesmente usar o operador ternário no uservalor e renderizar o botão 'Logout' ou 'Login' de acordo com o valor da variável.

Capítulo 6: Como lidar com eventos do usuário

Por dentro, o React tem um manipulador de eventos interno que se conecta ao evento DOM nativo.

É por isso que podemos adicionar o onClicksuporte aos botões nos capítulos anteriores, que é executado em resposta a um evento de clique.

Quando você chama uma função em resposta a eventos, o eventobjeto será passado para a função de retorno de chamada da seguinte maneira:

function App() {
  const handleClick = (event) => {
    console.log("Hello World!");
    console.log(event);
  }
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  )
}

Ao clicar no botão acima, a eventvariável será registrada como um SyntheticBaseEventobjeto no seu console:

ImagemLog de eventos SyntheticBase do React

O SyntheticBaseEventobjeto é um objeto React integrado usado para interagir com os eventos nativos do DOM. Diferentes navegadores têm diferentes implementações do objeto de evento DOM, o que SyntheticBaseEventtorna o React compatível com esses navegadores.

Sempre que um evento DOM for acionado, esse evento sintético será manipulado pelo React para que você possa decidir o que fazer com ele.

O caso de uso para este evento sintético é o mesmo do evento DOM nativo. Três dos manipuladores de eventos mais comuns que você usará são:

  • onChange
  • onClick
  • onSubmit

Você pode responder às interações do usuário, como clicar, passar o mouse, focar ou digitar em uma entrada de formulário, enviar um formulário e assim por diante.

Como alterar a interface do usuário manipulando eventos

No capítulo anterior, você viu como a lógica condicional pode ser usada para renderizar diferentes saídas.

Ao combinar lógica condicional com estado, propriedades e manipuladores de eventos, você pode criar um componente dinâmico que renderiza diferentes saídas com base nos dados que ele contém no momento.

Por exemplo, digamos que você queira mostrar ou ocultar um <div>elemento com um clique de botão. Veja como fazer isso:

import { useState } from 'react';

function App() {
  // State to hold the visibility status of the paragraph
  const [isParagraphVisible, setIsParagraphVisible] = useState(true);

  // Function to toggle the visibility status of the paragraph
  const toggleStatus = () => {
    setIsParagraphVisible(!isParagraphVisible);
  };

  return (
    <>
      <h1>Change UI based on click</h1>
      {isParagraphVisible && (
        <p>This paragraph will be shown/hidden on click</p>
      )}
      <button onClick={toggleStatus}>
        {isParagraphVisible ? 'Hide' : 'Show'} Paragraph
      </button>
    </>
  );
}

export default App;

Primeiro, você cria um estado para manter o status de visibilidade do parágrafo usando o useStategancho. O valor padrão do estado é true.

Em seguida, uma função chamada toogleStatus()é definida. Esta função alterará o statusvalor de truepara falsee vice-versa.

Por fim, uma returninstrução é adicionada para renderizar os elementos na tela. Ao clicar no botão, a toogleStatus()função será executada. Isso mostrará ou ocultará o parágrafo dependendo do status atual.

Ao usar estados, propriedades e manipuladores de eventos, o código que você escreve se torna uma descrição de como a interface do usuário deve ser. O React então pega essa descrição e a renderiza no navegador.

Capítulo 7: CSS em React

Há quatro maneiras comuns de adicionar CSS em um aplicativo React:

  1. Estilo em linha
  2. Arquivos CSS
  3. Módulos CSS
  4. CSS do Tailwind

Este capítulo explorará essas quatro maneiras diferentes de escrever CSS em componentes React e qual delas você deve usar ao iniciar um aplicativo React.

Estilo em linha do React

Os componentes React são compostos por elementos JSX. Mas só porque você não está escrevendo elementos HTML comuns não significa que não possa usar o antigo método de estilo inline.

A única diferença com JSX é que os estilos inline devem ser escritos como um objeto em vez de uma string. Veja o exemplo abaixo:

function App() {
  return (
    <h1 style={{ color: 'red' }}>Hello World</h1>
  );
}

No atributo de estilo acima, o primeiro conjunto de chaves é usado para escrever expressões JavaScript. O segundo conjunto de chaves inicializa um objeto JavaScript.

Nomes de propriedades de estilo com mais de uma palavra são escritos em camelCase em vez do estilo tradicional hifenizado. Por exemplo, a text-alignpropriedade usual é escrita como textAlignem JSX:

function App() {
  return (
    <h1 style={{ textAlign: 'center' }}>Hello World</h1>
  );
}

Como o atributo style é um objeto, você também pode separar o estilo escrevendo-o como uma constante. Dessa forma, você pode reutilizá-lo em outros elementos, conforme necessário:

const pStyle = {
  fontSize: '16px',
  color: 'blue'
}

export default function App() {
  return (
    <>
      <p style={pStyle}>Hello World!</p>
      <p style={pStyle}>The weather is sunny today.</p>
    </>
  )
}

Se precisar estender seu estilo de parágrafo ainda mais, você pode usar o operador de propagação.

Isso permitirá que você adicione estilos embutidos ao objeto de estilo já declarado. Veja o <p>elemento abaixo:

const pStyle = {
  fontSize: '16px',
  color: 'blue'
}

export default function App() {
  return (
    <p style={{ ...pStyle, color: 'green', textAlign: 'right' }}>
      When you go to work, bring your umbrella with you!
    </p>
  )
}

Os estilos embutidos do JSX permitem que você escreva CSS diretamente no seu componente.

Uma das vantagens de usar a abordagem de estilo em linha é que você terá uma técnica de estilo simples e focada em componentes. Ao usar um objeto para estilização, você pode estender seu estilo espalhando o objeto.

Mas em um projeto grande e complexo, onde você tem centenas de componentes React para gerenciar, esta pode não ser a melhor escolha para você.

Não é possível especificar pseudoclasses usando estilos embutidos. Isso significa que não é possível definir regras como :hover, :focus, :active, e assim por diante.

Além disso, você não pode especificar consultas de mídia para estilo responsivo. Vamos considerar outra maneira de estilizar seu aplicativo React.

Arquivos CSS

Outra maneira de adicionar CSS no React é usar .cssarquivos. O Vite já sabe como lidar com um .cssarquivo, então tudo o que você precisa fazer é importar o arquivo CSS para o seu arquivo JSX e adicionar a classNamepropriedade correta ao seu componente.

Vamos criar um style.cssarquivo na pasta do seu projeto com o seguinte conteúdo:

/* style.css */
.paragraph-text {
  font-size: 16px;
  color: #ff0000;
}

Agora, vamos importar o arquivo CSS para o App.jsxarquivo e adicionar a propriedade class ao componente:

import './style.css';

function App() {
  return (
      <p className="paragraph-text">
        The weather is sunny today.
      </p>
  );
}

Dessa forma, o CSS será separado dos seus arquivos JavaScript, e você poderá escrever a sintaxe CSS normalmente.

Você pode até incluir um framework CSS como o Bootstrap no React com essa abordagem. Tudo o que você precisa fazer é importar o arquivo CSS para o seu componente raiz.

Este método permitirá que você use todos os recursos do CSS, incluindo pseudoclasses e consultas de mídia.

Módulos CSS

Um módulo CSS é um arquivo CSS comum com todos os seus nomes de classes e animações com escopo local por padrão.

Ao aplicar esse método, cada componente React terá seu próprio arquivo CSS, e você precisará importar esse arquivo CSS para seu componente.

Para que o React saiba que você está usando módulos CSS, nomeie seu arquivo CSS usando a [name].module.cssconvenção.

Aqui está um exemplo:

/* App.module.css */
.BlueParagraph {
  color: blue;
  text-align: left;
}
.GreenParagraph {
  color: green;
  text-align: right;
}

Em seguida, importe-o para seu arquivo de componente:

import styles from "./App.module.css";

function App() {
  return (
    <>
      <p className={styles.BlueParagraph}>
        The weather is sunny today.
      </p>
      <p className={styles.GreenParagraph}>
        Still, don't forget to bring your umbrella!
      </p>
    </>
  )
}

Ao criar seu aplicativo, o Vite procurará automaticamente por arquivos CSS que tenham o .module.cssnome e processará os nomes das classes para um novo nome localizado.

O uso de módulos CSS garante que suas classes CSS tenham escopo local, evitando que as regras CSS colidam umas com as outras.

Outra vantagem de usar Módulos CSS é que você pode compor uma nova classe herdando de outras classes que você escreveu. Dessa forma, você poderá reutilizar código CSS que escreveu anteriormente, como este:

.MediumParagraph {
  font-size: 20px;
}
.BlueParagraph {
  composes: MediumParagraph;
  color: blue;
  text-align: left;
}
.GreenParagraph {
  composes: MediumParagraph;
  color: green;
  text-align: right;
}

Mas não vamos explorar todos os recursos dos módulos CSS aqui, apenas o suficiente para você se familiarizar com eles.

CSS do Tailwind

Tailwind CSS é um framework CSS moderno e utilitário que permite estilizar elementos combinando diversas classes.

Frameworks CSS como Bootstrap e Bulma fornecem componentes de alto nível que você pode usar imediatamente no seu projeto. Quando precisar estilizar um botão, basta aplicar as classes que contêm as propriedades CSS desejadas:

<button className="btn btn-primary">Subscribe</button>

Ao usar o Bootstrap, a btnclasse fornece uma combinação de propriedades CSS, como preenchimento, cor, opacidade, espessura da fonte e assim por diante.

Por outro lado, o Tailwind oferece classes utilitárias onde cada classe tem apenas uma ou duas propriedades:

<button className='px-5 py-2 text-white bg-blue-500 border-2'>
  Subscribe
</button>

No exemplo acima, "the" px-5é a abreviação de "padding" padding-lefte padding-right", enquanto 5 é um tamanho específico para os "paddings". " text-whiteAplica" color: white, " bg-blue-500aplica a background-colorpropriedade" e border"aplica" border-width.

Qual você deve usar?

Depende do método com o qual você se sente mais confortável. Se estiver trabalhando em equipe, é preciso discutir e concordar sobre o método que deseja aplicar, pois misturar estilos dificulta o desenvolvimento e a manutenção da aplicação.

Lembre-se: sempre use apenas uma maneira de estilizar componentes React em um projeto específico para evitar confusão.

Capítulo 8: Como construir formulários em React

Uma das interfaces mais comuns que você criará como desenvolvedor web é um formulário. No React, você pode criar um formulário usando o estado como a única fonte de dados desse formulário.

Neste capítulo, mostrarei como lidar com a entrada, o envio e a validação de formulários usando o React.

Como lidar com a entrada do formulário

Por exemplo, suponha que você queira criar um formulário com uma única entrada de texto e um botão.

Você pode primeiro configurar o estado que servirá como valor de entrada:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();
}

Em seguida, adicione a returninstrução e defina o formulário. No <input>elemento, atribua o usernameestado como valueprop:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();
  return (
    <form>
      Username:
      <input type='text' name='username' value={username} />
    </form>
  );
}

Em seguida, adicione a onChangepropriedade ao <input>elemento. Nessa propriedade, atribua o valor valueda entrada de texto como o valor do usernameestado:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();
  return (
    <form>
      Username:
      <input
        type='text'
        value={username}
        onChange={e => setUsername(e.target.value)}
      />
    </form>
  );
}

O objeto eor eventé passado pela onChangepropriedade para a função de retorno de chamada. A partir desse objeto, podemos obter o valor do texto de entrada na event.target.valuepropriedade.

Agora, sempre que o valor de entrada mudar, o estado será atualizado para refletir as alterações.

Como lidar com o envio de formulários

O próximo passo é enviar o formulário. Vamos criar uma função que manipula o evento de envio, chamado handleSubmit()da seguinte forma:

import { useState } from 'react';

function Form() {
  const [username, setUsername] = useState();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(username);
  }

  return (
    <form onSubmit={handleSubmit}>
      Username:
      <input
        type='text'
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button>Submit</button>
    </form>
  );
}

Aqui, a handleSubmit()função interromperá o comportamento padrão de envio do formulário, o que acionará uma atualização e, em seguida, criará uma caixa de alerta para exibir o usernamevalor.

A função é então passada para a onSubmitpropriedade do <form>elemento. Um atributo A <button>também é adicionado para que o usuário possa enviar o formulário.

Como lidar com a validação de formulários

Para lidar com a validação do formulário, você precisa criar outro estado que armazenará a mensagem de erro. Você pode nomear esse estado usernameErrorda seguinte forma:

const [usernameError, setUsernameError] = useState();

Em seguida, crie uma handleUsername()função que será executada quando a usernameentrada for alterada.

Dentro desta função, você pode chamar a setUsername()função para atualizar o estado e, em seguida, escrever a lógica para validar o valor de entrada.

Por exemplo, suponha que o usernamecomprimento deve ser maior que 6. Veja como fazer isso:

const handleUsername = e => {
  const { value } = e.target;
  setUsername(value);

  // Validate username value:
  if (value.length <= 6) {
    setUsernameError('Username length must be more than 6 characters');
  } else {
    setUsernameError();
  }
};

Agora que você tem alguma lógica de validação, precisa definir a handleUsername()função como o onChangemanipulador de propriedades.

Além disso, adicione um parágrafo abaixo do <input>elemento que mostrará a mensagem de erro da seguinte maneira:

return (
  <form onSubmit={handleSubmit}>
    Username:
    <input type='text' value={username} onChange={handleUsername} />
    <p>{usernameError}</p>
    <button>Submit</button>
  </form>
);

Dentro da handleSubmit()função, você pode verificar se há um erro no formulário verificando o usernameErrorestado e, em seguida, impedir que o formulário seja enviado quando houver um erro:

const handleSubmit = (e) => {
  e.preventDefault();
  if(usernameError){
    alert('Unable to submit: Form contain errors');
  } else {
    alert(username);
  }
}

Dessa forma, o formulário não será enviado até que o erro seja corrigido.

Aqui está o código-fonte completo do formulário, caso você queira experimentá-lo:

import { useState } from 'react';

function App() {
  const [username, setUsername] = useState();
  const [usernameError, setUsernameError] = useState();

  const handleSubmit = (e) => {
    e.preventDefault();
    if(usernameError){
      alert('Unable to submit: Form contain errors');
    } else {
      alert(username);
    }
  }

  const handleUsername = e => {
    const { value } = e.target;
    setUsername(value);

    // Validate username value:
    if (value.length <= 6) {
      setUsernameError('Username length must be more than 6 characters');
    } else {
      setUsernameError();
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      Username:
      <input
        type='text'
        value={username}
        onChange={handleUsername}
      />
      <p>{usernameError}</p>
      <button>Submit</button>
    </form>
  );
}

export default App;

Um formulário pode ser tão complexo ou simples quanto necessário, mas você usará o padrão que vê aqui, não importa o formulário que criar:

  • Os valores de estado são usados como fonte de dados de formulário e validação
  • onChangeprop como forma de atualizar o estado
  • As validações são acionadas por entradas do usuário
  • Uma handleSubmit()função é executada quando o formulário é enviado

Usando esses blocos de construção, você pode criar qualquer formulário necessário para seu aplicativo.

Capítulo 9: Solicitações de rede no React

Os aplicativos web modernos tendem a ter uma arquitetura modular, onde o back-end é separado do front-end. O aplicativo front-end precisará enviar uma solicitação de rede HTTP para um endpoint remoto.

O React não informa como você deve enviar solicitações de rede. A biblioteca se concentra apenas na renderização da interface do usuário com gerenciamento de dados usando propriedades e estados.

Para buscar dados usando o React, você pode usar qualquer biblioteca JavaScript válida, como Axios, Superagent e até mesmo a API Fetch nativa.

Neste capítulo, veremos como fazer solicitações de rede usando o Fetch no React.

O gancho useEffect

Ao criar um aplicativo React que precisa ser sincronizado com um sistema fora do React, você precisa usar o useEffecthook.

Este gancho permite que você execute algum código após a renderização para que você possa sincronizar seu componente com algum sistema fora do React.

Quando o gancho terminar de executar a solicitação de dados, você poderá definir a resposta nos estados do componente e renderizar os componentes apropriados com base nos valores do estado.

Para mostrar um exemplo, vamos buscar dados de https://jsonplaceholder.typicode.com/todos/1 , que é um ponto final fictício:

function App() {
  const [title, setTitle] = useState('');

  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const task = await response.json();
    console.log(task)
    setTitle(task.title);
  };

  return <h1>{title}</h1>;
}

No código acima, criamos um Appcomponente que tem um estado chamado titlee executamos a Fetch API para obter uma tarefa a fazer da API.

Quando uma resposta é recebida, analisamos a string JSON em um objeto JavaScript, registramos o objeto e, em seguida, definimos o titleestado para o task.titlevalor da propriedade.

A resposta é a seguinte:

ImagemLog de uso de efeitos do React

Aqui, você pode ver que o console.log()é chamado duas vezes. Isso ocorre porque o <React.StrictMode>wrapper sempre executa um useEffecthook duas vezes para ajudar no desenvolvimento.

Se você remover o <React.StrictMode>wrapper em main.jsx, o useEffectgancho será executado apenas uma vez.

O useEffectgancho em si é uma função que aceita dois argumentos:

  • Uma função de retorno de chamada para executar em cada renderização
  • Uma série de variáveis de estado para observar alterações. useEffectserá ignorada se nenhuma das variáveis for atualizada.

Quando você deseja executar useEffectapenas uma vez, você pode passar um array vazio como o segundo argumento para a função, como mostrado no exemplo acima.

Ao usar o useEffectgancho, o React pode enviar solicitações HTTP e buscar dados de qualquer sistema externo e, em seguida, armazenar esses dados no estado do componente.

Concluindo

Parabéns por terminar este manual! Espero que você o tenha achado útil e agora sinta que aprender React não é impossível nem confuso. Tudo o que você precisa é de um guia passo a passo que revele os principais conceitos do React, um por um.

Se você está ansioso para se aprofundar no React e expandir suas habilidades, recomendo que confira meu novo livro chamado Beginning React aqui:

O objetivo deste livro é ajudar você a ver como criar um aplicativo usando React. Há dois projetos incluídos neste livro que lhe darão a "experiência" de criar um aplicativo web usando React.

Você verá como conceitos do React, como componentes, JSX, props, estados, hooks e Context API são usados para criar um aplicativo front-end dinâmico.

Aqui está minha promessa: você realmente se sentirá confiante ao criar aplicativos web do zero usando React.