Partilhar via

Tutorial: Reagir no Windows para iniciantes

Se você é novo no uso do React, este guia irá ajudá-lo a começar com algumas noções básicas.

Pré-requisitos

Alguns termos e conceitos básicos

React é uma biblioteca JavaScript para a construção de interfaces de usuário.

  • É de código aberto, o que significa que podes contribuir reportando problemas ou fazendo pedidos de pull. (Tal como estes documentos !)

  • É declarativo, o que significa que você escreve o código desejado e o React pega esse código declarado e executa todas as etapas JavaScript/DOM para obter o resultado desejado.

  • É baseado em componentes, o que significa que os aplicativos são criados usando módulos de código independentes pré-fabricados e reutilizáveis que gerenciam seu próprio estado e podem ser colados usando a estrutura React, tornando possível passar dados pelo seu aplicativo enquanto mantém o estado fora do DOM.

  • O lema do React é "Aprenda uma vez, escreva em qualquer lugar". A intenção é reutilizar o código e não fazer suposições sobre como você usará a interface do usuário do React com outras tecnologias, mas tornar os componentes reutilizáveis sem a necessidade de reescrever o código existente.

  • JSX é uma extensão de sintaxe para JavaScript escrita para ser usada com o React que se parece com HTML, mas na verdade é um arquivo JavaScript que precisa ser compilado ou traduzido para JavaScript regular.

  • DOM Virtual: DOM significa Document Object Model (Modelo de Objeto de Documento) e representa a interface do usuário do seu aplicativo. Sempre que o estado da interface do usuário do seu aplicativo é alterado, o DOM é atualizado para representar a alteração. Quando um DOM é atualizado com frequência, o desempenho torna-se lento. Um DOM Virtual é apenas uma representação visual do DOM, portanto, quando o estado do aplicativo muda, o DOM virtual é atualizado em vez do DOM real, reduzindo o custo de desempenho. É uma representação de um objeto DOM, como uma cópia leve.

  • Visualizações: são o que o usuário vê renderizado no navegador. No React, o modo de exibição está relacionado ao conceito de elementos de renderização que você deseja que um usuário veja na tela.

  • Estado: refere-se aos dados armazenados por diferentes modos de exibição. O estado normalmente dependerá de quem é o usuário e o que ele está fazendo. Por exemplo, iniciar sessão num site pode apresentar o seu perfil de utilizador (visualização) com o seu nome (estado). Os dados de estado serão alterados com base no usuário, mas a exibição permanecerá a mesma. O estado é usado para alcançar a maior parte da interatividade do usuário com o aplicativo.

  • Props de componente: é uma maneira de o componente pai passar algumas informações como um valor ou dados (incluindo objetos, matrizes e funções) para seus componentes filho. As propriedades são somente leitura e não podem ser atualizadas pelo componente filho.

Tente usar o React no Visual Studio Code

Há muitas maneiras de criar um aplicativo com o React (consulte a Visão geral do React para obter exemplos). Este tutorial explicará como usar o vite para avançar rapidamente a configuração de um aplicativo React em funcionamento para que você possa vê-lo em execução e se concentrar em experimentar o código, não se preocupando ainda com as ferramentas de compilação.

  1. Use vite no Windows ou WSL (consulte os pré-requisitos acima) para criar um novo projeto: npm create vite@latest hello-world -- --template react

  2. Altere os diretórios para que você esteja dentro da pasta do seu novo aplicativo: cd hello-world, instale as dependências: npm install e, em seguida, inicie o servidor de desenvolvimento local: npm run dev

    Seu novo aplicativo React Hello World compilará e abrirá seu navegador da Web padrão para mostrar que ele está sendo executado no http://localhost:5173.

  3. Pare de executar seu aplicativo React (Ctrl+c) e abra seus arquivos de código no VS Code digitando: code .

  4. Localize o arquivo src/App.jsx e localize a seção de cabeçalho que diz:

    <p>Edit <code>src/App.jsx</code> and save to test HMR</p>

    Altere-o para ler:

    <p>Hello World! This is my first React app.</p>

  5. Abra a janela do terminal e inicie o servidor de desenvolvimento local: npm run dev ou você pode usar o terminal VS Code integrado (Ctrl + ') e iniciar o servidor de desenvolvimento a partir daí.

    Screenshot da aplicação HelloWorld React no navegador

Durante todo o desenvolvimento do seu aplicativo React, você pode manter seu servidor de desenvolvimento local em execução e todas as alterações serão imediatamente renderizadas em http://localhost:5173 seu navegador.

Estrutura do arquivo do aplicativo

A estrutura inicial do ficheiro parece-se com

hello-world
├── node_modules 
├── README.md 
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

Para começar, estes são os arquivos e pastas importantes que você precisa saber.

index.html é o arquivo no qual o Vite injeta seu código da src pasta para que seu navegador o execute. Este arquivo não deve ser editado, exceto para alterar o título do seu aplicativo React.

A src pasta é onde reside o código-fonte do seu aplicativo React. Este é o lugar onde você cria seus componentes personalizados, arquivos CSS e outros arquivos de código que você precisa para construir seu aplicativo. Esses arquivos são processados pelas ferramentas de construção do Vite para analisá-los e construí-los para criar seu projeto final React.

A public pasta contém todos os seus arquivos estáticos que serão servidos diretamente no seu navegador. Esses arquivos não são processados pelo Vite.

Tente usar o React com uma API

Utilizando o mesmo "Hello World!". que você criou com o React e atualizou com o Visual Studio Code, vamos tentar adicionar uma chamada de API para exibir alguns dados.

  1. Vamos começar de novo. Vamos remover quase todo o código clichê fornecido pelo Vite e manter apenas o nosso código da etapa anterior.

    Seu arquivo App.jsx agora deve ter esta aparência:

    import "./App.css";

function App() {
  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

    Captura de ecrã da aplicação simplificada HelloWorld React no navegador

  2. Em seguida, vamos definir um estado local onde podemos salvar dados de uma API. Um estado é onde podemos armazenar dados para serem usados na exibição.

    Para adicionar um estado local, precisamos primeiro importar o gancho useState React que permite adicionar a variável de estado ao seu componente.

    Também temos de inicializar o estado local. O useState retorna uma matriz de dois valores: estado atual e uma set função. Chamaremos o nosso estado atual de posts, inicializado como uma matriz vazia que podemos preencher com dados de publicação mais tarde da nossa API usando a função setPosts.

    Seu arquivo App.jsx agora deve ter esta aparência:

    import { useState } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  3. Para chamar uma API com dados para usarmos em nosso aplicativo React, usaremos o método JavaScript .fetch. A API que vamos chamar é JSONPlaceholder, uma API gratuita para testes e prototipagem que serve dados de espaço reservado falsos no formato JSON.

    Usamos o useEffect React Hook para atualizar o posts estado usando a função set.

    import { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const url = "https://jsonplaceholder.typicode.com/albums/1/photos";
    fetch(url)
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <>
      <p>Hello world! This is my first React app.</p>
    </>
  );
}

export default App;

  4. Vamos dar uma olhada em que tipo de dados a API salvou em nosso posts estado. Abaixo está algum do conteúdo do arquivo JSON API falso. Podemos ver o formato em que os dados estão listados, usando as categorias: "albumId", "id", "title", "url" e "thumbnailUrl".

    [
  {
    "albumId": 1,
    "id": 1,
    "title": "accusamus beatae ad facilis cum similique qui sunt",
    "url": "https://via.placeholder.com/600/92c952",
    "thumbnailUrl": "https://via.placeholder.com/150/92c952"
  },
  {
    "albumId": 1,
    "id": 2,
    "title": "reprehenderit est deserunt velit ipsam",
    "url": "https://via.placeholder.com/600/771796",
    "thumbnailUrl": "https://via.placeholder.com/150/771796"
  }
]

  5. Para exibir os dados da API, agora precisaremos adicionar um pouco de código JSX dentro da instrução renderizada return() . Usaremos o map() método para exibir nossos dados do posts objeto em que os armazenamos como chaves. Cada postagem exibirá um cabeçalho com "ID #" e, em seguida, o valor da chave post.id + valor da chave post.title de nossos dados JSON. Seguido pelo corpo exibindo a imagem com base no valor da chave thumbnailUrl.

    // rest of the code 
  return (
    <article>
      <h1>Posts from our API call</h1>
      {posts.map((post) => (
        <article key={post.id}>
          <h2>ID #{post.id} {post.title}</h2>
          <img src={post.thumbnailUrl} />
        </article>
      ))}
    </article>
  );
}

export default App;

    aplicação React exibindo dados de espaço reservado de uma API

Recursos adicionais