Você já ouviu falar que aprender React pode ser complicado? Pois hoje eu vou te mostrar que não é bem assim. Na verdade, com alguns conceitos-chave na ponta da língua, você já pode começar a criar suas primeiras aplicações de maneira tranquila.
React é uma biblioteca JavaScript poderosa, mas sua simplicidade é o que mais atrai desenvolvedores. Se você está começando ou tem vontade de aprender, vou explicar de forma descomplicada alguns dos principais conceitos para te ajudar a perder o medo e se aventurar nesse mundo.
1. Hooks: Seus Superpoderes no React
Os hooks são uma das funcionalidades mais incríveis do React. Com eles, você consegue lidar com estados, efeitos e até mesmo a lógica da sua aplicação de forma simples e eficiente.
useState: Controlando o Estado dos Componentes
O useState é um hook que permite que você manipule estados dentro de um componente. Se você precisa atualizar algum dado na tela sem recarregar tudo, ele será seu aliado. Vamos ver um exemplo prático:
import { useState } from 'react';
function Contador() {
const [contador, setContador] = useState(0);
return (
<div>
<p>Você clicou {contador} vezes</p>
<button onClick={() => setContador(contador + 1)}>
Aumentar contador
</button>
</div>
);
}
export default Contador;Nesse exemplo, o useState inicializa o valor contador como 0 e o setContador atualiza esse valor sempre que o botão for clicado. É uma forma simples de lidar com estados sem complexidade.
useEffect: Controlando Efeitos Colaterais
Se você precisa que algo aconteça quando certos dados mudarem — como buscar dados de uma API ao carregar a página — o useEffect vai te ajudar:
import { useEffect, useState } from 'react';
function DadosDaAPI() {
const [dados, setDados] = useState([]);
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => setDados(data));
}, []); // O array vazio garante que o efeito só execute uma vez, no carregamento do componente.
return (
<div>
<h1>Dados da API:</h1>
<ul>
{dados.map((item, index) => (
<li key={index}>{item.nome}</li>
))}
</ul>
</div>
);
}
export default DadosDaAPI;Aqui, o useEffect faz a requisição à API quando o componente é montado. Se quiser que algo aconteça a cada atualização de algum estado específico, basta colocar o nome do estado no array de dependências.
useReducer: Simplificando Lógicas de Estado Mais Complexas
Se você precisa lidar com múltiplas ações e estados mais complexos, o useReducer entra em cena. Ele funciona como um controle remoto: você define ações, e ele decide o que fazer com base nessas ações.
import { useReducer } from 'react';
function contadorReducer(state, action) {
switch (action.type) {
case 'incrementar':
return { contador: state.contador + 1 };
case 'decrementar':
return { contador: state.contador - 1 };
default:
return state;
}
}
function ContadorComReducer() {
const [state, dispatch] = useReducer(contadorReducer, { contador: 0 });
return (
<div>
<p>Contador: {state.contador}</p>
<button onClick={() => dispatch({ type: 'incrementar' })}>
Incrementar
</button>
<button onClick={() => dispatch({ type: 'decrementar' })}>
Decrementar
</button>
</div>
);
}
export default ContadorComReducer;O useReducer permite que você tenha mais controle sobre o estado quando a lógica fica mais complexa, como em aplicações maiores.
2. CSS: Estilos Personalizados no Componente
Outra vantagem de React é como ele permite que você aplique estilos diretamente nos seus componentes. Você pode usar o CSS tradicional, mas também tem a liberdade de aplicar estilos diretamente nos elementos através de objetos JavaScript.
function BotaoPersonalizado() {
const estiloBotao = {
backgroundColor: 'blue',
color: 'white',
padding: '10px',
border: 'none',
borderRadius: '5px',
};
return <button style={estiloBotao}>Clique aqui</button>;
}
export default BotaoPersonalizado;Aqui, criamos um objeto estiloBotao com nossas regras de estilo e aplicamos diretamente no botão. Isso facilita muito a personalização de componentes sem precisar criar classes CSS adicionais.
3. Componentes e Props: A Montagem do Quebra-Cabeça
Em React, tudo gira em torno de componentes. Eles são como as peças de um quebra-cabeça que, quando montadas corretamente, formam sua aplicação. As props são os dados que você passa de um componente “pai” para um componente “filho”.
Exemplo básico:
function Titulo(props) {
return <h1>{props.texto}</h1>;
}
function App() {
return <Titulo texto="Bem-vindo ao meu site!" />;
}
export default App;Aqui, o componente Titulo recebe a prop texto e a utiliza para exibir um título personalizado. Isso te permite reutilizar componentes, mas com conteúdos diferentes dependendo das props que você passar.
4. React Router: Navegando Entre Páginas
Se você quiser criar um aplicativo com várias páginas, o React Router é a ferramenta certa. Ele permite que você crie rotas e navegue entre elas, como se estivesse passando de fase em um jogo.
Exemplo simples de navegação:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function Home() {
return <h2>Página Inicial</h2>;
}
function Sobre() {
return <h2>Sobre Nós</h2>;
}
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/sobre">Sobre</Link>
</nav>
<Route path="/" exact component={Home} />
<Route path="/sobre" component={Sobre} />
</Router>
);
}
export default App;Com isso, você consegue criar uma navegação fluida, onde cada link leva a uma página diferente dentro da sua aplicação React.
Conclusão: React é Simples, Basta Quebrar em Partes
No fim das contas, React é como montar um quebra-cabeça. Compreendendo esses conceitos básicos — hooks, componentes, props e rotas —, você já consegue criar aplicações poderosas e dinâmicas. Se precisar de mais dicas, fique à vontade para explorar meu site ou entrar em contato!
