Configurando React do zero: Iniciando a estrutura do projeto
Tags: react, braziliandevs, javascript, beginners
Published: 2021-05-15 02:51:21

Esse é o primeiro artigo de uma série que pretendo criar com os meus resumos e observações das aulas da [RocketSeat](https://rocketseat.com.br/). A ideia é que fique como lembrança para consultas futuras e também como apoio para iniciantes em React.

Para iniciar, criamos uma pasta que vai conter todos os projetos do curso, chamei de `ignite-aula`. Após isso vamos criar a pasta para o nosso primeiro projeto, vamos chama-la de `01-github-explorer`, e entrar nela com o **Visual Studio Code**.

```bash
mkdir 01-github-explorer
cd 01-github-explorer
code .
```

Com nossa pasta criada, vamos fazer a primeira coisa que todo o projeto JS precisa ter, independente do framework, vamos inicializar o repositório criando o `package.json`*.* Temos algumas formas de criar esse arquivo, podemos usar o **npm**, com o **`npm init -y`, ou o **yarn**, que é como faremos agora.

```bash
yarn init -y
```

Caso você não conheça o `package.json` vai trazer as principais informações do projeto. O nome, a versão, qual o arquivo principal que vai ser executado, para o caso do nosso projeto ser uma biblioteca que outros projetos possam escalar, a licença, que informa se vai ser um código aberto e afins, mas o mais importante que vai existir nesse arquivo, são as dependências do nosso projeto, ou seja as bibliotecas de terceiros que utilizamos na nossa aplicação.

```json
{
  "name": "01-github-explorer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
```

Então vamos instalar nossa primeira biblioteca, que vai ser o **React.**

```bash
yarn add react
```

Podemos perceber que nosso arquivo mudou um pouco, agora nós temos a informação de que existe uma dependência no nosso projeto, no caso o **React**, e a versão que foi instalada. Não se preocupe se a versão estiver diferente, pois o React pode ter lançado uma nova versão desde o momento que escrevi esse post.

```json
{
  "name": "01-github-explorer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^17.0.2"
  }
}
```

Podemos notar que um novo arquivo foi criado, o `yarn.lock`, e também uma nova pasta, a `node_modules`. A pasta `node_modules` vai tá presente em todos os projetos JS, assim como o `package.json` que falamos anteriormente, nela vai tá todo código das dependências que instalamos na nossa aplicação, como podemos ver na foto a pasta do **React** que instalamos agora a pouco. 

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/20151412-b916-4f1c-9c8a-50ea200f2ba8/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/20151412-b916-4f1c-9c8a-50ea200f2ba8/Untitled.png)

Arquivos do projeto e package.json da biblioteca React

Mas você pode se perguntar, *"porque temos mais outras pastas sendo que só instalei o **React**?"* isso ocorre porque o **React** também tem as suas dependências, como podemos ver na foto acima, e elas também são instaladas, assim como as dependências de suas dependências...

Mas como você pode ver, o **React** é uma biblioteca bem enxuta, precisa de poucas outras bibliotecas para funcionar.

Além do **React**, no nosso projeto vamos utilizar também o `react-dom` que é a forma como nós trabalhamos com **React** na web. A DOM, caso você não conheça é a arvore de elementos da nossa aplicação web, é um **HTML** convertido numa sintaxe de objeto JS podemos dizer. E essa biblioteca basicamente faz com que o **React** consiga se comunicar com a arvore de elementos do HTML, faz com que ele, insira ou apague novos elementos em tela e afins

Mas outra pergunta que você pode fazer pequeno gafanhoto é *"porque essas bibliotecas são separadas?"* e a resposta é: O **React** pode ser usado para outras casos, como para mobile com o **React** **Native**, e ai instalaríamos o `react` e o `react-native` no lugar do `react-dom` pois não vamos estar na web.

Com as principais bibliotecas instaladas, vamos criar nossa estrutura de pastas. Primeiro vamos criar a pasta `src` ou *source* onde vai ficar todo código criado por nós para nossa aplicação. Teremos uma outra pasta chamada `public` que será onde ficarão arquivou ou *assets* que serão públicos, como o `index.html` o ícone de *favicon,* o arquivo robot.txt que diz ao **Google**, quais paginas ele deve indexar e quais ele deve ignorar na nossa aplicação, qualquer arquivo que precise ser acessado diretamente do meio externo.

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8a532f6-6efa-425f-a968-3440ccd299c2/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8a532f6-6efa-425f-a968-3440ccd299c2/Untitled.png)

Pastas public e src criadas.

Dentro da nossa pasta `public` como falamos, vamos criar o nosso arquivo `index.html` e colocar uma estrutura básica de HTML 5 nele.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Github Explorer</title>
  </head>
  <body></body>
</html>
```

E por enquanto é só, no próximo artigo vamos continuar a construir a nossa aplicação.

Relembrando esse conteúdo são resumos e anotações de aulas do curso que recomendo super da [RocketSeat](https://rocketseat.com.br/). Espero que ajude alguém!