---
# System prepended metadata

title: Guia de React

---

# Guia de React

## Por onde começar?

- **Baixar VsCode**
  https://code.visualstudio.com/download
 
 Após baixar o Vscode, o própio irá necessitar de algumas extensões.
 
 
 #### Extensões do VsCode:

1. material icon theme
1. debugger for chorme
1. pretter- Code formater
1. vscode-styled-components


- **Baixar o NodeJS**
  https://nodejs.org/en/download/
 
 Após baixar o NodeJS, o própio necessita de um gerenciador de pacotes que pode ser instalado via terminal no VsCode. O nome do gerenciador de pacotes é npx, e ele pode ser instalado com o seguinte comando no terminal:

No windows:
```powershell
 npm install -g npx
```

No linux (ubuntu):
```powershell
 sudo npm install -g npx
```


## Criando o React
  Após instalar o VsCode, o NodeJS e a biblioteca do NodeJS, no própio terminal você vai criar o seu React com o seguinte comando:
  ```powershell
 npx create-react-app 'nome do site'
```

## Estruturas de Pastas
  Após iniciar um react tem por padrão a seguinte estrutura de pastas:
  
![](https://cdn.discordapp.com/attachments/690959219696074835/750135831548919848/unknown.png)

  Para criar uma estrura de pastas no react vamos usar como exemplo a criação de duas telas, a cadastrar e consultar.
  Primeiramente iremos criar uma pasta chamada Pages, que é a pasta de onde irá ficar os arquivos .js das telas, ou seja, a tela de menu, cadastro e consulta; Após concluir sua estrutura deve estar assim:
  
![](https://cdn.discordapp.com/attachments/690959219696074835/750138760049459299/unknown.png)

  Depois você tem que criar uma pasta chamada services, é nela que você ira colocar os comandos para chamar a API, logo sua estrutura vai estar assim:
  
![](https://cdn.discordapp.com/attachments/690959219696074835/750139735443505212/unknown.png)

  Depois você pode criar mais uma pasta para colocar uma pasta chamada assets e criando outras subpastas para colocar mídias como: videos, imagens, icones e etc; Sua estrutura de pastas deve estar finalizada, e deve estar dessa maneira:
  
![](https://cdn.discordapp.com/attachments/690959219696074835/750141019382612019/unknown.png)

  
## Requisítos para API

- DotnetCore (site)
https://dotnet.microsoft.com/download
- C# Extensions 
- Nuget Package Manager
- $ dotnet tool install --global dotnet-ef
  ###### OBS: O dotnet deve ser instalado no terminal do Vs Code apertando ctrl + ' e inserido o comando dotnet mostrado acima.


## Montagem da rota

- criar na pasta 'src' o arquivo "routes.js"
- baixar o pacote "react-router-dom" ( ctrl+' )
- usar as 3 tags para criacao da rota(Switch, BrowserRouter, Route)
- ordens das tags(BrowserRouter,Switch,Route)


##### importar paginas

![](https://cdn.discordapp.com/attachments/690959219696074835/750133652775501885/unknown.png)

- colocar nome da pasta(pode ser qualquer um)
- colocar o diretório da pasta(aonde o arquivo/pasta se encontra)


##### No final ficará assim:

![](https://cdn.discordapp.com/attachments/690959219696074835/750132320325075145/unknown.png)

- path: lugar aonde voce define como será a rota da página
- exact: só é usado na primeira rota, serve para não bugar a rota
- component: local aonde voce colocá o nome da pasta
 

## Montagem do Services

- importar o axios
```powershell
 import axios from 'axios'
```
- logo embaixo digitar:

![](https://cdn.discordapp.com/attachments/690959219696074835/750136467514196038/unknown.png)
###### Obs: baseURl é a rota da sua API

- após isso fazer as funções da sua API, exemplo a funcao de cadastro:

![](https://cdn.discordapp.com/attachments/690959219696074835/750139586541518850/unknown.png)

- colocamos o nome da função cadastrar,mas tambem pode ser qualquer um, o nome do parametro tambem pode ser qualquer um
- dentro dela abrimos uma variavel do tipo "const",pois é uma variavel que nao pode ser mudada
- esta "api.post" esta relacionada a URL que colocamos lá emcima, o post é apenas o verbo que é usado na chamada da API
- abre-se parenteses, e colocamos a rota da api(esta rota se baseia no proprio back-end) e ao seu lado colocamos o parametro da funcao cadastrar
- o "await" é um comando que age da seguinte maneira,ele só retorna algo quando recebe uma resposta, ele serve para nao retorna um campo vazio,caso a api demore um pouco e tambem se usa o "async" que vem antes da criacao da funcao
- o "async" e o "await" precisam estar juntos, portanto se vc utilizar um "await" será necessario a utilização de um "async"

###### OBS: ao colocar os parametros da api, é necessário saber o nome do Controller da sua API e o seu verbo


## Iiniciando o React

 Após ter feito tudo e programado seu site, para iniciarmos o seu site com react, tem que colocar o seguinte comando no terminal do VsCode:
 ```powershell
 npm start
```
 
 


  

