✅ Chamada

✅ Acordos

✅ Apresentação das monitoras

⚠️ Após essa aula você estará preparada para consolidar o entendimento sobre ReactJS. O objetivo específico da aula é facilitar a criação de um projeto guiado do zero ao deploy.

Roadmap : trilha ReactJS

Iniciar nos testes unitários : React Testing Library

ReactJS para iniciantes : Minha palestra no FrontIn Elas Programam

Slides da palestra : Slides da palestra

5 Projetinhos para estudar : Projetos sugeridos na palestra

Lembra que com react estamos construindo SPA(single page application)? O que significa dizer que na real a gente só construiu uma única página. E quando a gente precisa criar um menu e algumas páginas diferentes. Precisamos usar uma biblioteca que nos ajude com isso, a construir rotas no react.

Para que no fim das contas, quando clicarmos no menu ou alterarmos na URL a gente consiga visualizar o conteúdo correto. Vamos aprender a usar a biblioteca react-router-dom.

1. Vamos instalar com o npm

npm install react-router-dom@6

2. Vamos criar o arquivo que irá gerenciar nossos endereços

import {  
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom';

import Home from '../Pages/Home'
import Sobre from '../Pages/Sobre'
import Portfolio from '../Pages/Portfolio'
import Contato from '../Pages/Contato'

function ApplicationRoutes(){
  return(
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="expenses" element={<Sobre />} />
        <Route path="invoices" element={<Portfolio />} />
         <Route path="invoices" element={<Contato />} />
      </Routes>
  </BrowserRouter>
  )
}
export default ApplicationRoutes

3. Vamos criar o menu

import { Link } from 'react-router-dom'

const Menu = () =>{
  return(
    <ul className="menu">
      <li>
        <Link className="link" to="/">Home</Link>
      </li>
      <li>
        <Link  className="link" to="/sobre">Sobre</Link>
      </li>
      <li>
        <Link  className="link" to="/portfolio">Portfólio</Link>
      </li>
      <li>
        <Link className="link" to="/contato">Contato</Link>
      </li>
    </ul>
  )

}

export default Menu

4. Podemos usar o menu nas páginas

5. No app em vez de chamar cada página, iremos usar as Rotas

import ApplicationRoutes from './ApplicationRoutes'

function App() {
  return (
    <div>      
      <ApplicationRoutes/>    
    </div>   
  )
}

export default App;

Acesse a documentação oficial: React Router

Passo a passo

Para Sala [x]Criar organização das pastas

[x] Criar rotas

[x] Criar Menu

[x] Criar Header

[ ] Criar páginas

• Projetos usando axios
• Comentários usando localStorage

[x] Subir no netlify e incluir a configuração de redirects

Para Casa [ ] Criar e incluir footer

[ ] Criar e inclir páginas

• Sobre
• Diário da reprograma
• Contato

|

 📁 projeto-guiado
   |- 📁 src
   |     |- 📁 assets
   |     |- 📁 components
   |       |- 📁 Footer
   |       |- 📁 Header
   |       |- 📁 Menu
   |     |- 📁 pages
   |       |- 📁 Sobre
   |       |- 📁 Comentarios
   |       |- 📁 Projetos
   |       |- 📁 Diario
   |       |- 📁 Contato
   |     |- 📁 routes
   |- 📁 node_modules
   |- 📄 app.jsx
   |- 📄 main.jsx
   |- 📄 .gitignore
   |- 📄 package.json  
   |- 📄 package-lock.json

• Utilize o mesmo projeto criado em sala de aula para incluir as páginas de sobre, diário da reprograma e contato.

• Lembre-se de incluir essas páginas no menu e na rota também

- Eu fiz o meu, vem aqui entender melhor e se inspirar: Meu portfólio da reprograma

Entrega pelo classroom

1. Link do github
2. Link do projeto no ar com o deploy feito pelo netlify
3. Tente fazer em tempo hábil pra aproveitar a aula de quinta e as monitorias pra tirar dúvidas.
4. Arraseee! E qualquer coisa, me chama!

Foi incrível compartilhar essa jornada com vocês! Qualquer dúvida ou sugestão, chama no contatinho!

• youtube
• instagram
• linkedin
• github
• spotify
• quero ser dev