Aprendendo React do zero - Configurando ambiente: Iniciando a estrutura do projeto

Esse é o primeiro artigo de uma série que pretendo criar com os meus resumos e observações das aulas da RocketSeat. 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.

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.

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.

{
  "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.

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.

{
  "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.

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.

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.

<!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. Espero que ajude alguém!