Guia de Introdução ao React: Construindo sua Primeira Interface de Usuário do Zero

React é uma biblioteca JavaScript para construir interfaces de usuário. Desenvolvida e mantida pelo Facebook, tornou-se uma das ferramentas mais populares no desenvolvimento front-end. Este guia irá levá-lo do zero, passo a passo, para entender os conceitos básicos do React e construir uma interface de usuário simples.

Por que escolher React?

React tem as seguintes vantagens:

• Componentização: React decompõe a interface do usuário em componentes independentes e reutilizáveis. Isso torna o código mais fácil de manter e entender.
• Declarativo: React usa um estilo de programação declarativo, o que significa que você só precisa descrever o que deseja apresentar, e o React cuidará automaticamente das atualizações e renderização.
• Eficiente: React usa o DOM virtual e um algoritmo diff inteligente, que pode atualizar a interface do usuário de forma eficiente, reduzindo a renderização desnecessária.
• Grande suporte da comunidade: React tem uma grande comunidade e um rico ecossistema, você pode encontrar muitos tutoriais, bibliotecas e ferramentas para ajudá-lo a desenvolver.
• Capacidade multiplataforma: React Native permite que você use React para desenvolver aplicativos móveis nativos (iOS e Android).

Preparação

Antes de começar, você precisa garantir que as seguintes ferramentas estejam instaladas em seu computador:

• Node.js: Node.js é um ambiente de tempo de execução JavaScript usado para executar ferramentas de desenvolvimento React. Você pode baixá-lo e instalá-lo em https://nodejs.org/.
• npm ou yarn: npm (Node Package Manager) e yarn são gerenciadores de pacotes JavaScript usados para instalar e gerenciar as dependências do React. Normalmente, o npm é instalado junto com o Node.js. O yarn pode ser instalado em https://yarnpkg.com/.

Criando seu primeiro aplicativo React

Usaremos create-react-app para criar rapidamente um projeto React.

1. Criar usando npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Criar usando yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Depois de executar os comandos acima, create-react-app criará automaticamente um diretório chamado my-first-react-app e inicializará um projeto React neste diretório. O comando npm start ou yarn start iniciará o servidor de desenvolvimento e você poderá acessar http://localhost:3000 no navegador para visualizar seu aplicativo React.

Estrutura de diretórios

A estrutura de diretórios do projeto criado por create-react-app é a seguinte:

my-first-react-app/
├── node_modules/         # Bibliotecas das quais o projeto depende
├── public/               # Recursos estáticos (por exemplo, arquivos HTML)
│   ├── index.html        # Arquivo HTML de entrada da aplicação
│   └── ...
├── src/                  # Código-fonte React
│   ├── App.css           # Estilos CSS do componente App
│   ├── App.js            # Componente App
│   ├── App.test.js       # Arquivo de teste do componente App
│   ├── index.css         # Estilos CSS globais
│   ├── index.js          # Arquivo JavaScript de entrada da aplicação
│   ├── logo.svg          # Logo do React
│   └── ...
├── .gitignore            # Arquivo de ignorados do Git
├── package.json          # Metadados e dependências do projeto
├── README.md             # Documentação do projeto
└── yarn.lock             # Arquivo de bloqueio de versão das dependências (se usar yarn)

Entendendo Componentes React

Aplicações React são construídas a partir de componentes. Componentes são blocos de código independentes e reutilizáveis, usados para renderizar partes específicas da interface do usuário.

No arquivo src/App.js, você pode ver um componente App padrão:

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

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Explicação do código:

• import React from 'react'; Importa a biblioteca React.
• function App() { ... } Define um componente de função chamado App.
• return ( ... ) Retorna uma expressão JSX, que descreve o que o componente deve renderizar.
• export default App; Exporta o componente App para que possa ser usado em outros arquivos.

JSX (JavaScript XML)

JSX é uma extensão de sintaxe JavaScript que permite escrever código semelhante a HTML dentro do código JavaScript. No exemplo acima, ... é uma expressão JSX. O código JSX é transformado em código JavaScript padrão pelo Babel, para que o navegador possa entendê-lo.

Modificando o Componente App

Vamos modificar o componente App para criar um contador simples.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Contador

      Contagem atual: {count}

      +
      -
    
  );
}

export default App;

Instruções de modificação:

• import React, { useState } from 'react'; Importa o Hook useState. useState é um Hook do React usado para adicionar estado em componentes de função.
• const [count, setCount] = useState(0); Usa o Hook useState para criar uma variável de estado chamada count e inicializa com 0. setCount é uma função usada para atualizar o estado count.
• const increment = () => { setCount(count + 1); }; Define uma função chamada increment para adicionar 1 ao estado count.
• const decrement = () => { setCount(count - 1); }; Define uma função chamada decrement para subtrair 1 do estado count.
• Contagem atual: {count} Exibe o valor do estado count na página. {count} é uma expressão JSX usada para inserir variáveis JavaScript no código JSX.
• + e - Cria dois botões, vinculando as funções increment e decrement respectivamente. onClick é um manipulador de eventos usado para executar a função especificada quando o botão é clicado.

Depois de salvar o arquivo src/App.js, o navegador será atualizado automaticamente e você verá um contador simples. Clicar no botão "+" aumentará a contagem e clicar no botão "-" diminuirá a contagem.

Usando estilos CSS

Você pode usar CSS para embelezar seu aplicativo React. create-react-app suporta CSS Modules e arquivos CSS comuns.

Usando CSS Modules:

CSS Modules permite que você crie estilos CSS independentes para cada componente, evitando conflitos de estilo. Para usar CSS Modules em um componente, você precisa criar um arquivo que termine com .module.css.

Por exemplo, crie um arquivo chamado App.module.css e adicione os seguintes estilos CSS:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Em seguida, importe CSS Modules no arquivo src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importa CSS Modules

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Usando o objeto styles para referenciar classes CSS */}
      

# Contador

      Contagem atual: {count}

      +
      -
    
  );
}

export default App;

Usando um arquivo CSS comum:

Você também pode usar um arquivo CSS comum para definir estilos globais. No arquivo src/index.css, você pode definir estilos globais.

Por exemplo, adicione o seguinte estilo CSS:

body {
  font-family: sans-serif;
}

Este estilo será aplicado ao elemento body de toda a aplicação.

Próximos Passos

Parabéns, você completou sua primeira aplicação React! Em seguida, você pode aprender mais sobre React, como:

• Comunicação entre componentes: Aprenda como fazer com que diferentes componentes se comuniquem entre si.
• Manipulação de formulários: Aprenda como criar e manipular formulários.
• Roteamento: Aprenda como usar o React Router para criar aplicações de múltiplas páginas.
• Redux ou Context API: Aprenda como gerenciar o estado da aplicação.
• Hooks: Aprofunde-se nos React Hooks, como useEffect, useContext, etc.

Lembre-se, React é uma tecnologia que requer prática e aprendizado contínuos. Desejo-lhe bons estudos!