20 – Golang – Fiber – React – Router

Voltar para página principal do site

Todas as aulas desse curso

Aula 19                          Aula 21

Fiber

Pacote Programador Fullstack

Redes Sociais:

       

Link para a Digital Innovation

Quer aprender python3 de graça e com certificado? Acesse então:

workover

Meus link de afiliados:

Hostinger

Digital Ocean

One.com

Código da aula: Github

Melhore seu NETWORKING

Participe de comunidades de desenvolvedores:

• https://impulser.me/

• https://developers.google.com/community/gdg

• https://comunidades.tech/

Fiquem a vontade para me adicionar ao linkedin.

E também para me seguir no GITHUB.

Canais do Youtube

Toti

Lofi Music Zone Beats

Backing Track / Play-Along

Código Fluente

Putz!

Vocal Techniques and Exercises

PIX para doações

PIX Nubank

20 – Golang – Fiber – React – Router

Tutorial de Fiber – Parte 2: Frontend – React – Router

Nesta aula vamos adicionar mais páginas ao projeto e ao mesmo tempo, demonstrar como usar o React Router Dom para gerenciar a navegação entre essas páginas.

Resumo

Instalaremos o React Router Dom com: npm install react-router-dom @types/react-router-dom

Também o pacote de tipos para TypeScript usando: npm install @types/react-router-dom por causa dos tipos.

E criaremos a pasta src/pages e dentro os arquivos: Login.tsx, Register.tsx e Home.tsx.

Mão a obra

Comece instalando o react-router-dom com o comando:

npm install react-router-dom @types/react-router-dom

Enquanto instala, aproveita pra tomar um cafezinho☕ ou uma água 🥤, whatever you want, just to pass the time.

Agora crie a pasta pages e dentro o arquivo Login.tsx, Register.tsx e Home.tsx.

react-auth/src/pages/Login.tsx

import React from 'react';

const Login: React.FC = () => {
  return (
    <form className='form-floating'>
      <h1 className="h3 mb-3 fw-normal">Please sign in</h1>
      <div className="form-signin">
        <input type="email" className="form-control" placeholder="name@example.com" required />
      </div>
      <div className="form-signin">
        <input type="password" className="form-control" placeholder="Password" required />
      </div>
      <button className="form-signin btn btn-primary w-100 py-2" type="submit">Sign in</button>
      <p className="mt-5 mb-3 text-body-secondary">&copy; 2017–2024</p>
    </form>
  );
}
export default Login;

react-auth/src/App.tsx

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './pages/Login';
import Home from './pages/Home';
import Register from './pages/Register';
function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

react-auth/src/pages/Home.tsx

import React from 'react';

const Home: React.FC = () => {
  return (
    <div className="container">
      <h1>You are not logged in!</h1>
    </div>
  );
}

export default Home;

react-auth/src/pages/Register.tsx

import React from 'react';

const Register: React.FC = () => {
  return (
    <form className='form-floating'>
      <h1 className="h3 mb-3 fw-normal">Please register</h1>
      <div className="form-signin">
        <input className="form-control" placeholder="First Name" required />
      </div>
      <div className="form-signin">
        <input className="form-control" placeholder="Last Name" required />
      </div>
      <div className="form-signin">
        <input type="email" className="form-control" placeholder="name@example.com" required />
      </div>
      <div className="form-signin">
        <input type="password" className="form-control" placeholder="Password" required />
      </div>
      <div className="form-signin">
        <input type="password" className="form-control" placeholder="Password Confirm" required />
      </div>
      <button className="form-signin btn btn-primary w-100 py-2" type="submit">Register</button>
      <p className="mt-5 mb-3 text-body-secondary">&copy; 2017–2024</p>
    </form>
  );
}
export default Register;

Agora rode o projeto localmente:

npm start

Se houver algum problema, tenta colocar antes do start, –openssl-legacy-provider, na parte de scripts no arquivo package.json.

Ao invés de:

"start": "react-scripts start",

Tente

"start": "react-scripts --openssl-legacy-provider start",

npm install --save-dev @types/body-parser

react-auth/tsconfig.json

{
  "compilerOptions": {
    "types": ["node", "body-parser"],
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Com isso, encerramos essa aula.

Na próxima aula, seguimos na construção do frontend.

Código da aula: Github

Voltar para página principal do blog

Todas as aulas desse curso

Aula 19                          Aula 21

Redes Sociais:

       

Novamente deixo meus link de afiliados:

Hostinger

Digital Ocean

One.com

É isso!

A gente se vê na próxima. 😉

Até lá!

\o/

Bons estudos. 😉