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
[editar | editar código-fonte]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
[editar | editar código-fonte]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:
[editar | editar código-fonte]npm create vite@latest
- Dê um nome ao projeto, selecione as opções React e Javascript.
[editar | editar código-fonte]- Vá até a pasta com o nome do projeto, instale as dependências e suba a aplicação para o navegador:
[editar | editar código-fonte]cd nome-do-projeto
npm install
npm run dev
Agora basta acessar a porta informada para visualizar a aplicação.
Estrutura de pastas
[editar | editar código-fonte]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
[editar | editar código-fonte]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
[editar | editar código-fonte]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>
);
}