---
# System prepended metadata

title: Olá! Esse é nosso Roteiro to.Ninja_();

---

# Olá! Esse é nosso Roteiro to.Ninja_();
 Link: [`https://hackmd.io/@cfh8PDFcRwOP5OPGAm5ywA/SkNqG_UXv/edit
`](https://)

[TOC]

## Nosso React ♥
 Vamos fazer uma revisão para criar um React, com o propósito de refrescar nossas cucas!!

## Requisitos

1. Instalar o Visual Code
[Visual Code](https://code.visualstudio.com/download)
2. Dar um *open Folder* na pasta da qual será criada o react, e pressionar **ctrl + '**, para abrir o terminal e digitar **npx create-react-app**.

```clike=
npx create-react-app [nomeSite]
```


## Instalar as dependências

```sql==
npm i react-router-dom
npm i react-toastify
npm i axios
```

Após isso vamos digitar ***npm start*** para poder rodar o nosso Site.

```coffeescript=
 npm start
```

## Estrutura das pastas
 Depois de criar a suas pasta do seu site, aparecerá as seguintes pastas:
- node_modules
- public
  - index.html
- src
  - app.css
  - app.js
  - app.test.js
  - index.css   
  - index.js
  - serviceWorker.js

Você pode apagar todos os arquivos da pasta **src**, deixe apenas o arquivo **index.js** e o **App.js**.

Depois disso você irá criar dentro de **src** as pastas **pages**, **components**, **assets**, **services** e por último um arquivo chamado **Routes.js**. Agora a sua estrutura de pastas estará assim:
- node_modules
- public
  - index.html
- src
  - assets
  - components
  - pages
  - services
  - index.js
  - Routes.js

### Explicando as pastas
1. **node_modules**: Pasta onde fica as depedências que são instaladas com o React
2. **public**: O arquivos html que será renderizado na tela
3. **src:** As pastas e arquivos principais do nosso  sistema
3.1 **assets**: Arquivos diversos do nosso sistema, como imagens, audios, videos etc.
3.2 **components**: Os componentes do sistema, que pode ser um menu lateral, um rodapé, um menu inicial etc.
3.3 **pages**: Onde de fato vai ter nosso App que vai conter os links para as trocas de páginas. E também vai ter as nossas páginas com todos os eventos desenvolvidos pelo Programador. 
3.4 **services**: Onde ficará o arquivo que faz a conexão com a api, enviando os modelos de request e retornando os modelos de response. É nessa parte que o **axios** será usado.
3.5 **index.js**: É nesse arquivo que ficará o **Route.js**. O index.js serve para fazer a rederinzação das paginas na tela, através do **root**.
3.6. **Routes.js**: Aqui é usado a depedência **react-router-dom** que serve para que possamos navegar entre as páginas usando o **SPA**. O **SPA** é um método que possibilita a navegação entre as páginas, sem fazer um carregamento automático.
  
