# Estudo React

[TOC]

## Pré-requisitos
1. Instalar Visual Code:

* https://code.visualstudio.com/download
2. Instalar as Extensões no Visual Code:
* Material Icon Theme
* Debugger for Chrome
* Prettier - Code formatter
3. Instalar NodeJS (NPM include)
* https://nodejs.org/pt-br/download/
4. Instalar NPX

* Para abrir o terminal do Visual Code apertamos as seguintes teclas: `ctrl` + `shift` + `'` (control shift apostrofo)

* Como o Visual Code aberto abra o terminal e de o seguinte comando

    npm install -g npx 

## Criando o projeto
1. Para criar um projeto um ReactJs, devemos criar um pasta e depois abri-lá no Visual Code, dando um Open Folder na pasta que queremos que o projeto fique salvo.
2. Quando você estiver dentro da pasta que você deseja, abra o terminal do Visual Code e de o seguinte comando:

    npx create-react-app meusite 

> O nome { meusite } no comando a cima pode ser trocado pelo nome que você deseja que o seu projeto tenha. Essa instalação levará alguns minutos. Quando a instalação terminal, dê um Open Folder na pasta que o comando criou.

3. Após isso abra o terminal novamente e digite o seguinte comando:

    npm start

Com esse comando conseguimos verificar se todos os arquivos foram instalados corretamente. Se tudo ocorreu bem uma aba do seu navegador irá abrir assim:


## Limpando o projeto
Esse comando irá criar duas pastas principais que demos no passo anterior criou duas pastas principais a public e a src. Iremos trabalhar mais dentro da src

Quando damos o comando: npx create-react-app meusite ele cria um monte de arquivos que não iremos usar. Então temos que limpar o nosso projeto antes de começarmos.


+ Podemos excluir os seguintes arquivos:
- App.test.js
- logo.svg
- serviceWorker.js
- setupTests.js

+ Após excluir esses arquivos entramos no arquivo App.js e apagamos a linha 2, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21.
+ Após isso entramos no arquivo index.js e apagamos a linha 5 e 17.

## Instalar as Depedencias

### CodeSandBox

1. Instalar **react-router-dom**
- Clicar em "Add Depedency"
- Digitar 'react-router-dom' e instalar

2. Instalar **react-toatify**
- Clicar em "Add Depedency"
- Digitar 'react-toatify' e instalar

3. Instalar **axios**
- Clicar em "Add Depedency"
- Digitar 'axios' e instalar


:::spoiler Tutorial no Youtube
[Colocar Depedencias CodeSandBox - YouTube](https://www.youtube.com/watch?v=NPbIWy-MmOg)
:::

---

### Visual Code
:::info
Para acessar o Terminal do VScode segure "shift" + "ctrl" + "apostrofo" .Pelo terminal do Visual Code digite os códigos a seguir, e espere instalar.
:::

1. instalar **react-router-dom**

    npm --save react-router-dom

2. instalar **react-toatify**

    npm --save react-toastify

3. instalar **react-top-loading-bar**

    npm --save react-top-loading-bar

4. instalar **axios**

    npm --save axios

:::spoiler Tutorial no Youtube
[Colocar Depedencias VsCode - YouTube](https://www.youtube.com/watch?v=NPbIWy-MmOg)
:::

## Estrutura de Pastas

digraph hierarchy {

  nodesep=0.4
  node [color=Black,fontname=Courier,shape=box] 
  edge [color=Blue, style=dashed] 

  src      ->  {pages  services assents components index Routes}
  components      ->  {lateral_do_site}
  pages    ->  { Home Alterar Consultar }
  services ->  {ListaTKApi}
  assents  ->  {Images Videos Icons}
  
}

:::success
A estrutura é requisito mais importante em um React , fazendo que pastas filhas se conectam com pastas pais
:::

## Pasta Pages
>Aqui você irá criar um pasta para cada página que o seu site irá ter. A organização fica a seu criterio aqui dentro da pages. Você pode ter pasta dentro de pasta para organizar melhor o seu projeto.

#### Ex.

>1. Dentro da pages pode ter quantas pastas que você quiser, mas lembre-se cada pasta aqui dentro é uma página no seu site.
>2. Dentro de cada pasta aqui dentro da pages tem que ter um arquivo index.js e opcionalmente um arquivo css (Caso você use um css próprio terá que importalo para o arquivo index.js da pasta da página que você está programando).

#### Ex.

### Pasta App
:::info
Index.js do App ficará mais ou mesmo assim:
:::
1. Importar Componentes
* Componentes Padrões

    import React from "react";
    import "SuaApi" from "LocalApi";
    import { Link } from "react-router-dom";

2. Seu código

    import React from "react";
    import "SuaApi" from "../../LocalApi";
    import "./styles.css";
    import { Link } from "react-router-dom";

    export default function App() {
      return (
        <div>
          ...
          Aqui fica o seu código
          ...
        </div>
      );
    }

## Arquivo Routes
Nesse aquivos iremos importar as paginas para conseguirmos navegar entre elas.

1. Importar Componentes

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import Home from './pages/(Nomde da Pagina)'

import Pagina1 from "./pages/(Nome da Pagina)";
import Pagina2 from "./pages/(Nome da Pagina)";
import Pagina3 from "./pages/(Nome da Pagina)";
...

export default function Routes() {
  return (
    <BrowserRouter>
      <Switch>
      
        <Route path="/"   exact={true} component={Home} />
        
        <Route path="/exemplo1" component={Pagina1} />
        <Route path="/exemplo2"     component={Pagina2} />
        <Route path="/exemplo3"       component={Pagina3} />
        ...
        
      </Switch>
    </BrowserRouter>
  )
}

> Neste arquivo iremos fazer as rotas de cada componente ,informando onde as paginas se localizam.

>
:::warning
Atenção com as rotas erradas , 85% dos erros é por causa de importações incorretas.
:::

## Arquivo index.js dentro da pasta src
>Já que agora configuramos a nossa Routes.js, temos que fazer a index.js apontar para ela, para conseguirmos fazer a navegação.

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

:::info
Aqui iremos mudar a linha 4 e 9. Iremos parar de importar o App from "./App" e começaremos a importar o import Routes from "./Routes"
:::

* Ficará assim:

import React from "react";
import ReactDOM from "react-dom";

import Routes from "./Routes";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
  rootElement
);

## Pasta Services
>Aqui será configurado o axios para o acesso a API.

import axios from "axios";
const api = axios.create({
  baseURL: "https://(linkdaApi)"
});

class NomedeSuaApi {
  async consultar() {
    const response = await api.get("/(endereço)");
    return response.data;
  }
  async alterar() {
    const response = await api.put("/(endereço)");
    return response.data;
  }
  async excluir() {
    const response = await api.delete("/(endereço)");
    return response.data;
  }
  async cadastrar() {
    const response = await api.post("/(endereço)");
    return response.data;
  }
  ...
}

export default NomedeSuaApi;

:::warning
Lembre-se de instalar a depedencia axios em seu projeto.
:::

## Pasta Components
Nessa pasta você coloca coisa que você vai usar com muita frequencia no site, como o menu lateral. Ela é parecida com a pasta pages, ou seja, aqui pode ter varias pastas com os componentes.