React: Documentação

Introdução ao React

React é uma biblioteca JavaScript para a construção de interfaces de usuário interativas e dinâmicas. Criado pelo Facebook, permite o desenvolvimento de aplicações de página única (SPA) e componentes reutilizáveis.

Como o React Funciona

O React utiliza uma abordagem baseada em componentes, onde a interface é dividida em partes reutilizáveis. Ele usa JSX (JavaScript XML) para definir a estrutura da UI e o Virtual DOM para otimizar o desempenho, atualizando apenas as partes necessárias da interface.

Principais Conceitos

• Componentes: Blocos reutilizáveis de código que retornam elementos JSX.
• JSX: Sintaxe que permite escrever HTML diretamente no JavaScript.
• Virtual DOM: Representação em memória do DOM real, que melhora a eficiência das atualizações.
• Estado (State): Dados internos de um componente que podem mudar ao longo do tempo.
• Props: Dados passados de um componente pai para um componente filho.

Instalação do React

Para começar com React, você pode instalar usando o Create React App:

npx create-react-app minha-aplicacao

Ou configurar manualmente com:

npm install react react-dom

Componentes React

React utiliza componentes para dividir a UI em partes reutilizáveis.

Exemplo de Componente Funcional

function MeuComponente() {
    return <h1>Olá, React!</h1>;
}

Exemplo de Componente de Classe

class MeuComponente extends React.Component {
    render() {
        return <h1>Olá, React!</h1>;
    }
}

Props e State

Os props permitem passar dados para componentes. O state é usado para armazenar dados dinâmicos dentro de um componente.

Exemplo de Props

function Saudacao(props) {
    return <h1>Olá, {props.nome}!</h1>;
}

Exemplo de State

class Contador extends React.Component {
    constructor(props) {
        super(props);
        this.state = { contador: 0 };
    }
    render() {
        return <h1>Contagem: {this.state.contador}</h1>;
    }
}

Hooks do React

Os Hooks permitem usar o estado e outras funcionalidades do React sem escrever uma classe.

useState

import { useState } from 'react';

function Exemplo() {
    const [contador, setContador] = useState(0);
    return (
        <div>
            <p>Você clicou {contador} vezes</p>
            <button onClick={() => setContador(contador + 1)}>
                Clique aqui
            </button>
        </div>
    );
}

useEffect

import { useEffect } from 'react';

function Exemplo() {
    useEffect(() => {
        console.log('Componente montado');
    }, []);
    return <h1>Veja o console!</h1>;
}

Conceitos de Programação em JavaScript

Aqui estão alguns conceitos fundamentais de programação que são úteis ao trabalhar com React e JavaScript.

Classes e Métodos

Classes são modelos para criar objetos, e métodos são funções dentro dessas classes.

class Carro {
    constructor(marca, modelo) {
        this.marca = marca;
        this.modelo = modelo;
    }

    exibirDetalhes() {
        return `Marca: ${this.marca}, Modelo: ${this.modelo}`;
    }
}

const meuCarro = new Carro("Toyota", "Corolla");
console.log(meuCarro.exibirDetalhes()); // Saída: Marca: Toyota, Modelo: Corolla

Estruturas de Controle

Estruturas de controle permitem tomar decisões e repetir ações no código.

Condicionais (if-else)

let idade = 18;

if (idade >= 18) {
    console.log("Maior de idade.");
} else {
    console.log("Menor de idade.");
}

Loops (for)

for (let i = 0; i < 5; i++) {
    console.log(`Iteração: ${i}`);
}

Loops (while)

let contador = 0;

while (contador < 5) {
    console.log(`Contador: ${contador}`);
    contador++;
}

Switch-Case

let diaDaSemana = 3;

switch (diaDaSemana) {
    case 1:
        console.log("Domingo");
        break;
    case 2:
        console.log("Segunda-feira");
        break;
    case 3:
        console.log("Terça-feira");
        break;
    default:
        console.log("Dia inválido.");
}

Conclusão

React é uma ferramenta poderosa para o desenvolvimento moderno de interfaces. Com componentes, estado e Hooks, é possível criar aplicações eficientes e escaláveis. Além disso, entender conceitos básicos de JavaScript, como classes, métodos e estruturas de controle, é essencial para dominar o React.