freeCodeCamp/guide/portuguese/miscellaneous/setting-up-a-react-es6-and-webpack-project/index.md

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.

• Ajuda: Mais sobre Reagir

Para este projeto, faremos uso do Webpack, que é um módulo bundler, e é comumente usado em projetos do React.

• Ajuda: Mais sobre o Webpack

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 .

• Ajuda: Mais sobre o ES6

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!