---
# System prepended metadata

title: Roteiro de Estudos

---

# Roteiro de Estudos 
## React
### primeiros passos
1. Bom a primeira coisa que você deve fazer é adicionar as dependências 
 


![](https://i.imgur.com/q0WXfC4.png)


2. depois tem que criar as pastas que é onde ficaram seus códigos 

```graphviz
digraph hierarchy {

                nodesep=1.0 // increases the separation between nodes

                node [color=Black,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                SRC->{Pages Services Routes }
                Routes->
                Pages->{Page1 Page2}
                Services->{ApiPage1 ApiPage2 }
                Page2 ->{IndexJs StylesCss}
                Page1 ->{IndexJs StylesCss}
                {rank=same; Page1 Page2 ApiPage1 ApiPage2}  // Put them on the same level
}
```
3. Depois nós temos que importar e exportar o react 

```javascript= 
import React from 'react'

export default function ListaNegraHome() {
    return (
    <div> 
      <h1> Page1 </h1>
    </div>);
}
```
4. No Service nós temos que colocar a Api das nossas paginas 

```javascript= 
import axios from 'axios';

const api = axios.create({
  baseURL: "https://nsf-lista-negra.herokuapp.com"
})


export default class ListaFofaApi {

  async cadastrar(lf) {
    const response = await api.post('/listafofa', lf);
    return response.data;
  }

  async alterar(id, lf) {
    const response = await api.put('/listafofa/' + id, lf);
    return response.data;
  }

  async excluir(id) {
    const response = await api.delete('/listafofa/' + id);
    return response.data;
  }

  async consultar() {
    const response = await api.get('/listafofa');
    return response.data;
  }

}
```
5. Agora no Routes nós devemos configurar todo nosso "site/trabalho" ligar as coisas

```javascript= 
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

import Home from './pages/Home'

import ListaFofaHome from './pages/Page1';

import Memelation from './pages/Page2';


export default function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/"   exact={true} component={Home} />
       <Route path="/Page1" component={Page1} />  
       <Route path="/Page2" component={Page2} /> 
      </Switch>
    </BrowserRouter>
  )
}

