React Tutorial - Parte 2

Olá caros leitores,

Link do gitHub do projeto aqui!


Estamos na parte 2 e caso queira consultar o que foi visto na Parte 1 clique aqui.

Utilizaremos o mesmo projeto da parte 1 que está versionado no Github.


O que veremos neste post: 

1. Falaremos neste post sobre Rotas  

De posse de um projeto rodando o básico siga os passos abaixo e em poucos minutos ja teremos condições de usar as premissas básicas sobre rotas em nossos projetos.


1. Crie 3 componentes:

home

outraPagina.jsx  

 

sobre.jsx

2. Faça o import do React-Router-Dom:

npm install react-router-dom

O comando acima instala o React Router

3. Em nosso App.js adicione o seguinte codigo:


Os imports

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Sobre from './Pages/Sobre';

import OutraPagina from './Pages/OutraPagina';

import Home from './Pages/Home';

A tag RETURN agora será a que abre e fecha o return no App.js

function App() {

return (

<Router>

<div>

<nav>

<ul>

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/sobre/">Sobre</Link>

</li>

<li>

<Link to="/outrapagina/">Outra Página</Link>

</li>

</ul>

</nav>

</div>

<Route path="/" exact component={Home} />

<Route path="/sobre/" component={Sobre} />

<Route path="/outrapagina/" component={OutraPagina} />

<div>

<Button primary> react bootstrap </Button>

<InputText value="InputText do Primefaces" />

</div>

</Router>

);

}

export default App;

Pronto.

Ainda temos nosso botão e nosso Input do primeiro tutorial e no próximo vamos começar a dar um tapa no visual desse projeto.








Fácil e prático. Rodou ?
Se sim já conseguimos fazer o basicão e podemos  ir aos poucos melhorando e aplicando boas práticas que serão abordadas em tóticos futuros.


O projeto pode ser baixado no GitHub citado no início da postagem.


Próximos tópicos incluem: Componentes atômicos, rotas, styled components, lifecyle etc.


Dúvidas e sugestões ?