Skip to content

Latest commit

 

History

History
537 lines (400 loc) · 9.88 KB

ReactJs.md

File metadata and controls

537 lines (400 loc) · 9.88 KB
Raw

Guia de Estudos React.js

Este guia de estudos abrange tópicos essenciais de React.js, desde conceitos básicos até funcionalidades avançadas. Utilize este guia como um mapa para sua jornada de aprendizado em React.js.

Índice

  1. Introdução ao React.js
  2. Configuração do Ambiente
  3. Componentes
  4. JSX
  5. Props e State
  6. Ciclo de Vida dos Componentes
  7. Eventos
  8. Formulários
  9. Estilização
  10. React Router
  11. Hooks
  12. Context API
  13. Gerenciamento de Estado
  14. Boas Práticas
  15. Ferramentas e Recursos

Introdução ao React.js

React.js é uma biblioteca JavaScript para construir interfaces de usuário, mantida pelo Facebook e por uma comunidade de desenvolvedores. React permite a criação de componentes reutilizáveis e de fácil manutenção.

Configuração do Ambiente

Instalação do Create React App

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

Estrutura do Projeto

meu-app/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

Componentes

Componente Funcional

import React from 'react';

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

export default Saudacao;

Componente de Classe

import React, { Component } from 'react';

class Saudacao extends Component {
  render() {
    return <h1>Olá, {this.props.nome}</h1>;
  }
}

export default Saudacao;

JSX

Sintaxe Básica

const elemento = <h1>Olá, Mundo!</h1>;

Expressões em JSX

const nome = 'João';
const elemento = <h1>Olá, {nome}!</h1>;

Atributos em JSX

const elemento = <img src="logo.png" alt="Logo" />;

Props e State

Props

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

<Saudacao nome="João" />;

State

class Contador extends React.Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }

  incrementar = () => {
    this.setState({ contador: this.state.contador + 1 });
  };

  render() {
    return (
      <div>
        <p>{this.state.contador}</p>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    );
  }
}

Ciclo de Vida dos Componentes

Métodos de Ciclo de Vida

  • componentDidMount: Chamado após o componente ser montado no DOM.
  • componentDidUpdate: Chamado após o componente ser atualizado.
  • componentWillUnmount: Chamado antes do componente ser desmontado e destruído.
class ExemploCicloDeVida extends React.Component {
  componentDidMount() {
    console.log('Componente montado');
  }

  componentDidUpdate() {
    console.log('Componente atualizado');
  }

  componentWillUnmount() {
    console.log('Componente será desmontado');
  }

  render() {
    return <div>Veja o console para os métodos de ciclo de vida</div>;
  }
}

Eventos

Manipulação de Eventos

function Botao() {
  function handleClick() {
    alert('Botão clicado!');
  }

  return <button onClick={handleClick}>Clique em mim</button>;
}

Eventos em Componentes de Classe

class Botao extends React.Component {
  handleClick = () => {
    alert('Botão clicado!');
  };

  render() {
    return <button onClick={this.handleClick}>Clique em mim</button>;
  }
}

Formulários

Manipulação de Formulários

class Formulario extends React.Component {
  constructor(props) {
    super(props);
    this.state = { valor: '' };
  }

  handleChange = (event) => {
    this.setState({ valor: event.target.value });
  };

  handleSubmit = (event) => {
    alert('Um nome foi enviado: ' + this.state.valor);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Nome:
          <input type="text" value={this.state.valor} onChange={this.handleChange} />
        </label>
        <button type="submit">Enviar</button>
      </form>
    );
  }
}

Estilização

CSS

/* App.css */
.titulo {
  color: blue;
  font-size: 24px;
}
import './App.css';

function App() {
  return <h1 className="titulo">Olá, Mundo!</h1>;
}

Styled Components

npm install styled-components
import styled from 'styled-components';

const Titulo = styled.h1`
  color: blue;
  font-size: 24px;
`;

function App() {
  return <Titulo>Olá, Mundo!</Titulo>;
}

React Router

Instalação

npm install react-router-dom

Configuração Básica

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function Home() {
  return <h2>Home</h2>;
}

function Sobre() {
  return <h2>Sobre</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/sobre">Sobre</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/sobre">
            <Sobre />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Hooks

useState

import React, { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>{contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

useEffect

import React, { useState, useEffect } from 'react';

function Exemplo() {
  const [contador, setContador] = useState(0);

  useEffect(() => {
    document.title = `Você clicou ${contador} vezes`;
  }, [contador]);

  return (
    <div>
      <p>Você clicou {contador} vezes</p>
      <button onClick={() => setContador(contador + 1)}>Clique em mim</button>
    </div>
  );
}

useContext

import React, { useContext } from 'react';

const TemaContext = React.createContext('claro');

function Titulo() {
  const tema = useContext(TemaContext);
  return <h1 style={{ color: tema === 'claro' ? '#000' : '#fff' }}>Tema Atual: {tema}</h1>;
}

function App() {
  return (
    <TemaContext.Provider value="escuro">
      <Titulo />
    </TemaContext.Provider>
  );
}

Context API

Criando e Usando um Contexto

const UsuarioContext = React.createContext();

function UsuarioProvider({ children }) {
  const [usuario, setUsuario] = useState({ nome: 'João' });

  return (
    <UsuarioContext.Provider value={usuario}>
      {children}
    </UsuarioContext.Provider>
  );
}

function MostrarUsuario() {
  const usuario = useContext(UsuarioContext);
  return <p>Nome do usuário: {usuario.nome}</p>;
}

function App() {
  return (
    <UsuarioProvider>
      <MostrarUsuario />
    </UsuarioProvider>
  );
}

Gerenciamento de Estado

Redux

Instalação

npm install redux react-redux

Configuração Básica

import {

 createStore } from 'redux';
import { Provider } from 'react-redux';

const estadoInicial = { contador: 0 };

function contadorReducer(state = estadoInicial, action) {
  switch (action.type) {
    case 'INCREMENTAR':
      return { contador: state.contador + 1 };
    default:
      return state;
  }
}

const store = createStore(contadorReducer);

function App() {
  return (
    <Provider store={store}>
      <Contador />
    </Provider>
  );
}

export default App;

Usando Redux com Hooks

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Contador() {
  const contador = useSelector((state) => state.contador);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{contador}</p>
      <button onClick={() => dispatch({ type: 'INCREMENTAR' })}>Incrementar</button>
    </div>
  );
}

Boas Práticas

  • Componentização: Divida a interface em componentes reutilizáveis.
  • Imutabilidade: Nunca modifique o state diretamente.
  • Uso de Hooks: Prefira hooks ao invés de componentes de classe.
  • Escreva Testes: Garanta a funcionalidade do seu código com testes.
  • Linting: Utilize ferramentas de linting para manter o código limpo e consistente.
  • Documentação: Mantenha seu código bem documentado para facilitar a manutenção.

Ferramentas e Recursos

Ferramentas

Recursos

Este guia é um ponto de partida. Explore cada tópico, pratique e aprofunde seus conhecimentos para se tornar um desenvolvedor React.js proficient. Boa sorte!