react.md

⚛️ React Cheat Sheet

🚀 Introdução ao React

React é uma biblioteca JavaScript para criar interfaces de usuário interativas e reutilizáveis.

---

📥 Instalação

1️⃣ Criando um projeto React com Vite (Recomendado)

npm create vite@latest my-app --template react
cd my-app
npm install
npm run dev

2️⃣ Criando um projeto React com Create React App

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

3️⃣ Adicionando React a um projeto existente

npm install react react-dom

---

📂 Estrutura de Arquivos

my-app/
├── src/
│   ├── components/
│   ├── App.jsx
│   ├── main.jsx
│   ├── index.css
├── public/
├── package.json

---

🏗️ Criando um Componente Simples

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

export default Welcome;

Usando o Componente

import Welcome from "./Welcome";

function App() {
  return <Welcome name="João" />;
}

export default App;

---

🎯 Hooks Principais

useState - Estado no React

import { useState } from "react";

function Contador() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Contagem: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

useEffect - Efeitos colaterais

import { useEffect, useState } from "react";

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

---

📡 Comunicação entre Componentes

Props

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

function App() {
  return <Saudacao nome="Maria" />;
}

Context API (Gerenciamento de Estado Global)

import { createContext, useContext, useState } from "react";

const TemaContext = createContext();

function ProvedorTema({ children }) {
  const [tema, setTema] = useState("claro");
  return (
    <TemaContext.Provider value={{ tema, setTema }}>
      {children}
    </TemaContext.Provider>
  );
}

function BotaoTema() {
  const { tema, setTema } = useContext(TemaContext);
  return <button onClick={() => setTema(tema === "claro" ? "escuro" : "claro")}>Mudar Tema</button>;
}

---

🏗️ Estilização no React

CSS Modules

/* styles.module.css */
.botao {
  background-color: blue;
  color: white;
}

import styles from "./styles.module.css";

function Botao() {
  return <button className={styles.botao}>Clique aqui</button>;
}

Styled Components

npm install styled-components

import styled from "styled-components";

const Botao = styled.button`
  background: blue;
  color: white;
`;

function App() {
  return <Botao>Styled Button</Botao>;
}

---

📖 Links de Referência

• Documentação Oficial
• React Hooks
• Vite para React
• Styled Components