# Session Six | Checkin
Murillo Tadeu Oliveira | N°33
## React
### Subcomponetes e Estilização
Podemos tem mais de um componente utilizando o React, e para fazer a junção e para que todos os componentes estejam perfeitamente organizados utilizamos o import na pasta de Apps.js, que seria onde guarda todas as informações de um site. Para que conseguimos fazer isto devemos criar pastas em SRC que seria configurada como um componente.
Para utilizar o css e fazer com ele funcione devemos importar ele ao componente sugerido como por exemplo:
Devemos ter dois arquivos, um com o nome Alunos.js, e o outro com o Alunos.css, onde será colocado todo o codigo para formatação do site, para utilizar este arquivo devemos importar ele no arquivo Alunos.js da seguinte maneira:
```html=
import './Alunos.css'
```
Usamos o "./" para que ele ache o arquivo na mesma pasta que ele esteja.
Para casterizar estes componentes devemos só criar uma pasta para cada pagina de site, ou faixa que será inserido.
### Roteamento Part. 1
Este rotiamento é como se fosse um sistema que vai gerenciar as rotas de todas paginas do site.
Usamos a dependecia react-router-dom, para usar este conceito de roteamento
Para usar este roteamento precisamos ter duas paginas ao minimo de site.
Para fazermos este roteamento precisamos dar import na pagina index.js do react-router-dom, e usarmos as seguintes variaveis, cujo elas BrowserRouter, Switch, Route e Link.
```htmlembedded=
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
```
Para configurar esse roteamento devemos ir ao arquivo index.js e logo apos dar este import acima, usar as variaveis, como por exemplo:
```htmlembedded=
<BrowserRouter>
<Switch>
<Route path="/pagina1" component {Page1} />
<Route path="/pagina2" component {Page2} />
</Switch>
</BrowserRouter>
```
para fazermos uma busca exata usamos o exact={true}
### Roteamento Part. 2
Conseguimos usar também a formatação de link, como por exemplo, clicar em certo texto e este texto te direcionar a uma outra pagina. Isto torna seu site mais chamativo e te ajuda a torna-lo mais organizado, fazendo com que se torne mais facil mudar de uma pagina para outra
Criamos uma pagina Routes.js para transferir uma pagina a outra usando os componentes acima.
```htmlembedded=
<Link to="/"> Para ir a outra pagina </Link>
```
{"metaMigratedAt":"2023-06-16T03:16:31.462Z","metaMigratedFrom":"Content","title":"Session Six | Checkin","breaks":true,"contributors":"[{\"id\":\"ddf4ea40-fb01-4dc1-b147-92a7051a20c0\",\"add\":2346,\"del\":0}]"}