Tópicos básicos de React (Natalya Silva Aragão)

React é uma biblioteca JavaScript utilizada para construção de interfaces de usuário (UIs) dinâmicas e interativas. É conhecido por sua arquitetura baseada em componentes que permite criar elementos de UI reutilizáveis, além de ajudar a minimizar erros. Para aplicações web, que é o foco principal desse tutorial, desenvolvedores usam React em conjunto com ReactDOM.

JSX

O React usa uma sintaxe conhecida como JSX (JavaScript XML). O JSX permite que você integre o HTML e o JavaScript em um único arquivo ou até mesmo em uma única linha de código. Por exemplo:

const nome = "Mundo"; 
const titulo = <h1>Olá, {nome}!</h1>;

Ao utilizar JSX, considere as seguintes observações:

• Todos os elementos devem ser colocados dentro de um elemento pai;
• Todos os elementos devem ser fechados;
• JSX reconhece JavaScript por meio de chaves { };
• O atributo class em HTML se torna className em JSX.

Criando um projeto

Para criar um projeto, é necessário ter o Node.js instalado em sua máquina.

Existem diferentes maneiras de criar uma aplicação com React, que estão disponíveis para consulta na nova documentação. Para esse tutorial, iremos utilizar o vite. Seguiremos os seguintes passos:

- Crie uma nova aplicação:

npm create vite@latest

- Vá até a pasta com o nome do projeto, instale as dependências e suba a aplicação para o navegador:

cd nome-do-projeto
npm install   
npm run dev

Agora basta acessar a porta informada para visualizar a aplicação.

Estrutura de pastas

O vite irá criar a seguinte estrutura:

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

• O arquivo index.html é o ponto de entrada da aplicação;
• O diretório public contêm os arquivos estáticos que podem ser acessados publicamente;
• O diretório src armazena o código-fonte do projeto.

Componentes

Um componente é um bloco de código reutilizável e independente (como por exemplo: um botão, menu ou formulário), que divide a interface do usuário em partes menores. No exemplo abaixo, é criado o componente NovoBotao:

import './NovoBotao.css'

function NovoBotao() {
  return (
    <button>Eu sou um botão</button>
  );
}

export default NovoBotao;

Para reutilizar o componente, usamos a sintaxe <NovoBotao />, ou de maneira equivalente, <NovoBotao > </NovoBotao >.

import NovoBotao from './NovoBotao.jsx';

function MeuApp() {
    return (
        <div>
            <h1>Bem-vindo ao meu aplicativo</h1>
            <NovoBotao />
        </div>
    );
}

export default MeuApp;

A estrutura básica de um componente é formada por:

• Declarações de import: permitem utilizar códigos definidos em outro lugar fora de nosso arquivo;
• A função do componente;
• Uma declaração de export: torna o componente disponível para outros módulos.

Observação: Os componentes são nomeados em pascal-case (palavras com a primeira letra maiúscula) para diferenciar componentes de tags de HTML comum.

Props

Uma prop é qualquer dado, como objetos, arrays e funções, passado para um componente filho. Para isso, pode-se:

• Utilizar props e extrair suas propriedades:

function Mensagem(props) {
  return <h1>Olá, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Mensagem name="Ana" />
      <Mensagem name="Maria" />
      <Mensagem name="Jose" />
    </div>
  );
}

• Utilizar as propriedades nominalmente:

function Mensagem({ name }) {
  return <h1>Hello, {name}</h1>;
}

function App() {
  return (
    <div>
      <Mensagem name="Ana" />
      <Mensagem name="Maria" />
      <Mensagem name="Jose" />
    </div>
  );
}

Referências

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

https://react.dev/learn

https://pt-br.legacy.reactjs.org/