# 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:

 npm install -g npx

No linux (ubuntu):

 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:

 npx create-react-app 'nome do site'

## Estruturas de Pastas
Após iniciar um react tem por padrão a seguinte estrutura de pastas:


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:


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:


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:


## 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


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

##### No final ficará assim:


- 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

 import axios from 'axios'

- logo embaixo digitar:

###### Obs: baseURl é a rota da sua API

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


- 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:

 npm start