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


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

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

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

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

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>
  )
}