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.
