Curso Completo de React

Bem-vindo ao curso completo de React! Neste curso, você aprenderá a construir interfaces de usuário modernas e eficientes com a biblioteca React.js.

Módulo 1: Introdução ao React

O React é uma biblioteca JavaScript para criar interfaces de usuário, desenvolvida pelo Facebook. Vamos explorar os principais conceitos de React, como componentes e JSX.

Exemplo básico de componente React:

import React from 'react';

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

export default App;

Módulo 2: Instalando o Ambiente de Desenvolvimento

Aprenda como configurar o ambiente de desenvolvimento React utilizando o create-react-app para criar um projeto React básico.

Comando para criar o projeto:

npx create-react-app minha-app

Módulo 3: Estrutura de um Projeto React

Entenda a estrutura de um projeto React, incluindo os arquivos principais como index.js, App.js e como o React renderiza o conteúdo no DOM.

Exemplo de estrutura de projeto:

src/
  App.js
  index.js
  index.css

Módulo 4: JSX - Sintaxe do React

JSX é uma extensão de sintaxe para JavaScript que permite escrever HTML dentro do código JavaScript. Aprenda a usar JSX para criar componentes.

Exemplo de JSX:

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

Módulo 5: Props - Passando Dados para Componentes

Props são usadas para passar dados de um componente pai para um componente filho. Aprenda como usá-las para tornar seus componentes reutilizáveis.

Exemplo de props:

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

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

Módulo 6: State - Gerenciando Estado no React

State permite que você armazene dados dinâmicos dentro de um componente. Aprenda a gerenciar o estado e atualizá-lo.

Exemplo de uso de state:

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>Clique aqui</button>
    </div>
  );
}

Módulo 7: Eventos no React

Eventos em React são tratados de maneira declarativa. Aprenda a lidar com eventos como cliques, mudanças em campos de texto, e outros.

Exemplo de evento de clique:

function HandleClick() {
  function clickHandler() {
    alert('Você clicou no botão!');
  }

  return <button onClick={clickHandler}>Clique-me</button>
}

Módulo 8: Manipulação de Formulários no React

Saiba como trabalhar com formulários no React, utilizando componentes controlados e não controlados.

Exemplo de formulário controlado:

function Formulario() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  function handleSubmit(event) {
    alert('Enviado: ' + value);
    event.preventDefault();
  }

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

Módulo 9: React Router - Navegação

O React Router é uma biblioteca para gerenciar navegação entre diferentes páginas ou rotas em uma aplicação de página única (SPA). Aprenda a usar o React Router para navegação.

Exemplo de configuração do React Router:

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>Página Inicial</Route>
        <Route path="/sobre">Sobre</Route>
      </Switch>
    </Router>
  );
}

Módulo 10: Projeto Final

Agora é hora de aplicar tudo que você aprendeu! Crie um projeto simples que utilize componentes, estado, props e navegação. Aproveite para personalizar seu projeto como quiser!

Exemplo de projeto simples:

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>Clique aqui</button>
    </div>
  );
}

Conclusão

Parabéns! Você completou o curso de React e agora tem uma boa base para criar aplicações com esta poderosa biblioteca. Continue praticando e explorando novos recursos do React!