---
# System prepended metadata

title: Estudo React

---


![image alt](https://www.paragyte.com/img/React_Banner.png =1999x200)

# 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
    ```javascript=
    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:
    ```javascript=
    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:
    ```javascript=
    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:
    
![Primeiro contato](https://programadoresbrasil.com.br/wp-content/uploads/2020/07/Captura-de-Tela-2020-07-08-a%CC%80s-18.17.49-1024x590.png)



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

![Após a instalação](https://i.imgur.com/bKYxYJ1.png)


+ 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.
![Aquivo App.js](https://i.imgur.com/JSPlpHP.png)
+ Após isso entramos no arquivo index.js e apagamos a linha 5 e 17.
![](https://i.imgur.com/JfgMn1P.png)



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


![Depedence](https://i.imgur.com/rqV51Ou.png)

:::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**
    ```javascript=
    npm --save react-router-dom
    ```

2. instalar **react-toatify**
    ```javascript=
    npm --save react-toastify
    ```

3. instalar **react-top-loading-bar**
    ```javascript=
    npm --save react-top-loading-bar
    ```


4. instalar **axios**
    ```javascript=
    npm --save axios
    ```

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



## Estrutura de Pastas
```graphviz
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.
![Estrutura da pages](https://i.imgur.com/qBSo6Sp.png)


>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. 
![Estrutura da pages](https://i.imgur.com/0cRleOc.png)

### Pasta App
:::info
Index.js do App ficará mais ou mesmo assim:
:::
1. Importar Componentes
    * Componentes Padrões
      
    ``` javascript=
    import React from "react";
    import "SuaApi" from "LocalApi";
    import { Link } from "react-router-dom";
    ```
    
2. Seu código
    ```javascript=
    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

```javascript=
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.

```javascript=
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:
```javascript=
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.
```javascript=
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.
