2.7 KiB
title | localeTitle |
---|---|
Setting Up a React Es6 and Webpack Project | Configurando um Projeto React Es6 e Webpack |
Este wiki irá instruí-lo sobre como configurar um projeto básico que use React, Webpack e ES6. Vamos ver tudo configurado em profundidade.
Para este projeto, faremos uso do Webpack, que é um módulo bundler, e é comumente usado em projetos do React.
Reaja bem com o ES6 , então vamos usar o ES6 em nosso código.
O ES6 é uma atualização significativa para o idioma e a primeira atualização para o idioma desde que o ES5 foi padronizado em 2009.
- lukehoban
O ES6 não funciona nos navegadores por si só, mas podemos fazê-lo funcionar manualmente usando o Babel para transpilá-lo para o ES5.
Um recurso importante das tecnologias que estamos usando é que nosso arquivo index.html
se referirá a um arquivo JavaScript incluído, do qual podemos nos referir em outros arquivos JavaScript, em vez de nos referirmos a eles a partir do arquivo HTML com tags de script
.
Pré-requisitos
Este tutorial destina-se a fornecer uma estrutura básica sobre a qual expandir. Deve ser um bom ponto de partida para quem quer aprender Reagir e ES6. Se você ainda não construiu nada com JavaScript ou jQuery, você deve passar por alguns dos exercícios no mapa FreeCodeCamp primeiro.
Antes de começar, verifique se você tem o NodeJS e o Node Package Manager instalados nas versões mais recentes.
Instruções Rápidas
Aqui está uma lista de todas as instruções mencionadas neste tutorial.
npm install webpack webpack-dev-server -g
mkdir react-webpack-example && cd $_
touch webpack.config.js
npm init
npm install --save-dev react react-dom webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
touch .gitignore
- escreva
.gitignore
(use https://www.gitignore.io/api/node ) mkdir src
mkdir dist
mkdir src/js
touch src/js/client.js
touch dist/index.html
- escreva
dist/index.html
- escreva
src/js/client.js
- escrever
webpack.config.js
webpack
webpack-dev-server --content-base dist
- Abra a rota do servidor de desenvolvimento Webpack no navegador. Feito!