npx create-react-app my-appAgradável! E honestamente, esse 👆 método de criar um novo aplicativo React é incrível se você deseja algo que tenha muitos sinos e assobios desde o início, e você pode começar seu aplicativo como um aplicativo bastante pesado / grande.
Esse peso provém das muitas dependências, carregadores, plugins etc. instalados automaticamente como node_modules que ocupam muito espaço para cada aplicativo. A imagem de resumo do Finder abaixo é de um dos meus aplicativos de criação e reação de aplicativos. 😱
Apresentando o Parcel
Parcela é um “Empacotador de aplicativos da web extremamente rápido e com configuração zero”. Isso significa que ele lida com muitas coisas difíceis para você embaixo do capô e permite criar uma configuração relativamente simples do React (ou qualquer outro projeto da web que exija empacotamento)
Então, vamos ver o que é necessário para configurar o aplicativo React básico “Hello World” que exibe um h1 elemento.
Etapa 1: Crie uma nova pasta para o seu projeto
Bastante fácil. 😏
Etapa 2: Crie seu package.json Arquivo
No terminal, cd para a nova pasta e execute:
npm init -yIsso cria automaticamente o package.json Arquivo.
Etapa 3: Instale o Parcel, React e ReactDOM
npm install --save-dev parcel-bundler
# Shorthand version: npm i -D parcel-bundler
npm install react react-dom
# Shorthand version: npm i react react-dom
# Note that npm will automatically save dependencies to package.json now, so there's no longer a need to do npm install --save ...Etapa 4: adicione um script “start” ao package.json
No package.json arquivo, na seção “scripts”, adicione o seguinte script “start”:
"start": "parcel index.html --open"Etapa 5: Crie o index.html arquivo e adicione algumas linhas
No VS Code, você pode criar um novo arquivo chamado index.html e use o built-in emmet atalho para criar um arquivo HTML padrão, digitando um ponto de exclamação e pressionando a tecla Tab no teclado.
Antes de seguirmos em frente, precisamos adicionar duas coisas:
- UMA
divespaço reservado onde nosso aplicativo React será inserido - UMA
scriptpara ler no arquivo de entrada JavaScript (que criaremos a seguir)
No body do index.html, adicionar:
<body>
<div id="root"></div>
<script src="https://www.freecodecamp.org/news/how-to-up-a-react-app-with-parcel/./index.js"></script>
</body>Etapa 6: Crie o index.js Arquivo
Crie um novo arquivo chamado index.js e digite seu código básico React:
// index.js
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))
Etapa 7: Inicie!
É isso aí! Agora, no terminal, execute:
npm startO pacote cuidará do resto e você terá um aplicativo React totalmente funcional.
Conclusão
Se você estiver interessado, reserve um tempo para ler a documentação do pacote para entender melhor toda a grandiosidade que vem com o uso do Parcel, sem exigir nenhuma configuração do seu lado.
Pronto para uso, o Parcel vem com suporte para todos os tipos de extensões comuns de desenvolvimento da Web, transpilers, sintaxes e assim por diante.
Embora não seja muito pequeno, o node_modules de um aplicativo Parcel ocupa 50% menos espaço no seu computador:
Obrigado Parcel!