Introdução ao React

React é uma ferramenta de desenvolvimento front-end, que visa desenvolvimento de telas para o usuário. Quando eu comecei a estudar o react ainda não entendia muito bem, mas ficava me perguntando o porquê alguém (o Facebook) desenvolveu uma “ferramenta” que dificultaria o desenvolvimento, por ter tantos arquivos para instalar e uma grande quantidade de dependências. Mas continuei meus estudos, e agora compreendo a enorme vantagem do react, que simplesmente pode ser ser resumida em uma palavra, a tão falada componentização.

A reutilização de trechos de código (os componentes) acelera muito o desenvolvimento, dominar essa ferramenta é essencial para quem quer seguir a carreira de front-end ou FullStack.

Começar a usar o react é simples, requisitos são apenas o editor de código e o NodeJs instalado.

Dar o comando npm create-react-app é simples, mas entender o que cada pasta e arquivos ali criados representa vai além disso. Esse é o objetivo deste artigo.

Abaixo explicarei cada tópico que o React precisa ou que ajudam a desenvolver o código

• node_modules
• Package.json
• Package-lock.json
• Webpack
• Babel 
• Eslint 

Node_modules

Pasta criada quando se adicionam dependências do projeto, quando se usa o node, nela ficam todas as dependências e também as dependências das dependências. Além disso também serve para o controle de versão do código

Package.json e package-lock.json

O package.json é um arquivo de configuração que descreve o projeto e suas dependências. Ele contém metadados relevantes para o projeto e é fundamental para o gerenciamento de pacotes. Os principais propósitos do package.json incluem:

Identificação do Projeto: Contém informações como o nome do projeto, a versão, a descrição e os autores.

Dependências: Lista as dependências necessárias para o projeto funcionar. Essas dependências podem ser divididas em:

dependencies: Pacotes necessários para a execução do aplicativo.

devDependencies: Pacotes necessários apenas durante o desenvolvimento (e.g., ferramentas de teste, transpiladores).

Scripts: Define scripts que podem ser executados com npm run, como scripts de build, testes e iniciação do servidor.

Configuração do Projeto: Pode conter várias outras configurações, como diretórios, versões de engines (Node.js), e mais

package-lock.json

O package-lock.json é gerado automaticamente pelo npm e tem a função de garantir que as instalações subsequentes sejam consistentes. Ele bloqueia as versões exatas dos pacotes instalados, ajudando a manter a integridade do projeto ao longo do tempo. Os principais propósitos do package-lock.json incluem:

Versionamento Exato: Registra as versões exatas de cada pacote instalado, incluindo as versões de suas dependências.

Consistência de Instalação: Garante que qualquer instalação posterior (em qualquer máquina) resulte exatamente no mesmo conjunto de pacotes que foi originalmente instalado.

Desempenho: Melhora a performance das instalações futuras ao fornecer uma referência rápida das dependências resolvidas.

Webpack

O webpack é um empacotador, que reúne todas as informações que serão utilizadas no projeto, que estão contidas no repositório. Otimizando e melhorando o processo, o uso do webpack permite uso do Babel, que será mencionado a seguir.

Babel 

Babel é a ferramenta que permite o uso do EcmaScript mais recente, e que funcione em versões mais antigas de navegadores, usado para que o código seja interpretado da mesma forma mesmo que o navegador esteja desatualizado. E também o uso do JSX.

Eslint

ESLint é uma ferramenta de linting para JavaScript, usada para identificar e corrigir problemas no código. Linting é o processo de análise de código para encontrar erros de sintaxe, estilização e padrões de codificação inconsistentes. O objetivo principal do ESLint é ajudar os desenvolvedores a escrever um código mais limpo, consistente e livre de erros

Importação e exportação de código 

A importação e exportação de código em JavaScript permite modularizar o código, facilitando sua reutilização, manutenção e organização. Essa funcionalidade é amplamente utilizada em projetos modernos para compartilhar funcionalidades entre diferentes arquivos e módulos.

Exportação de Código

Existem duas formas principais de exportar código em JavaScript: exportações nomeadas e exportações padrão (default).

Exportação Padrão (Default)

A exportação padrão permite exportar um único valor de um módulo, e ele pode ser importado com qualquer nome.

Exemplo de Exportação Padrão:

// greet.js

export default function greet(name) {

  return `Hello, ${name}!`;

}

Como importar uma exportação padrão:

// app.js

import greet from './greet.js';

console.log(greet('Alice')); // Hello, Alice!

Importação de Código

A importação de código é a forma de trazer funcionalidades de outros módulos para o escopo atual. Existem várias formas de importação dependendo do tipo de exportação que você está lidando.

Importações de Exportações Nomeadas

Importa-se cada item pelo seu nome exatamente como foi exportado.

Se houver algo para corrigir ou acrescentar sinta-se a vontade para fazê-lo, esse artigo é sobre o aprendizado do impulso javascript parte de introdução ao React.