---
# System prepended metadata

title: roteiro de React

---

# roteiro de React


## pré requisitos
- Instalar VisualCode [Baixar](https://code.visualstudio.com/)
- instalar node.js [baixar](https://nodejs.org/pt-br/download/)

###    baixar as extensões no visual code
- material ícon theme
- debugger for chrome
- prettier-code formatter
- vscode-styled formatter

congratulations :tada:, agora presta atenção meu 
parceiro :punch: 
### baixar o npx
``` shell=
npm install -g npx
```  
# Criação do Projeto 
- vc vai clicar em terminal e vai escrever o comando...
``` shell=
npx create-react-app site
``` 
-  depois disso você vai alterar a pasta no visual code (open folder) para a alterar a pasta do projeto cirado depois vai escrever o comando...
  ``` shell=
npm start
``` 
iai vc vai poder ver seu site :+1: 

## Adicionar Dependências
- As dependências são necessarias para os códigos serem executados
``` shell=
"dependencies": {
    "axios": "0.20.0",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "typescript": "3.8.3"
}
``` 



## Estrutura de Pastas

- public <-pasta
  index.html(arquivo)
- src  <--pasta
**componentes** <--subpasta
**pages**<-subpasta
    -home <-subpasta
    index.js (arquivo)
    -consultar <-subpasta
    index.js(arquivo)
    -cadastrar <-subpasta
    index.js(arquivo)
**services**<-subpasta
  talcoisaAPI.js
  router.js

 
    




## Configuração das Rotas
você vai primeiro importar suas paginas e tambem invocar o BrowserRouter, Switch, Route.
``` shell=
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import  talpagina from './pages/talpagina'

export default function Rotas() {
  return (
    <BrowserRouter>
      <Switch>
     
      </Switch>
    </BrowserRouter>
  );
}
```
depois vc vai fazer as escolhas do componetes que vai aparecer e tambem colocar a pagina inicial
``` shell=
import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import  talpagina from './pages/talpagina'

export default function Rotas() {
  return (
    <BrowserRouter>
      <Switch>
      <Route path="/" exact={true} component={paginainicial}/>
     <Route path="/talpagina" component={talpagina}/>
        <Route path="/talpagina" component={talpagina}/>
     
      </Switch>
    </BrowserRouter>
  );
}

``` 

## Services
Será a comunicação com a API
Coloque a função
``` shell=
import axios from "axios";

const api = axios.create({
  baseURL: "https://nsf-URL.herokuapp.com/nome"
});

export default class Memes {}

}
``` 


## Componente
Serão os componentes que serão compartilhados na aplicação
``` shell=
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
``` 

## Home
Nela ira redirecionar para as outras paginas do React
- importar os componentes
``` shell=
import Pagina from "../components/Nome/index.js";
import Pagina from "../components/Nome/index.js";
``` 


## Cadastrar 

- Importar o React para torna-lo um componente

```shell=
  import React from "react";
```  
- Agora é só criar a função para retornar um código html

```shell=
  export default function Cadastrar() {
    return (
       <div className="Cadastrar">
          <h1>Cadastrarsz</h1>
       </div>
    );
}
```
- Importar a função 
``` shell=
   import Cadastrar from "./pages/cadastrar";
```




##  Consultar

- Importar o React para torna-lo um componente

```shell=
  import React from "react";
```  
- Agora é só criar a função para retornar um código html

```shell=
  export default function Consultar() {
    return (
       <div className="Consultar">
          <h1>Consultarsz</h1>
       </div>
    );
}
```

- Importar a função
``` shell=
   import Consultar from "./pages/consultar";
```

  




![](https://i.imgur.com/2Qx9yIK.jpg)
