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

title, localeTitle

title	localeTitle
Setting Up a React Es6 and Webpack Project	Настройка проекта Rex Es6 и Webpack

Эта вики проинструктирует вас, как настроить проект bare-bones, который использует React, Webpack и ES6. Мы перейдем к тому, чтобы все было настроено по глубине.

• Помощь: Больше о реакторе

Для этого проекта мы будем использовать Webpack, который является модульным модулем и обычно используется в проектах React.

• Справка: Подробнее о Webpack

React хорошо сочетается с ES6 , поэтому мы будем использовать ES6 в нашем коде.

ES6 является важным обновлением языка, и первое обновление для языка, поскольку ES5 был стандартизован в 2009 году.
- lukehoban

ES6 еще не работает в браузерах, но мы можем заставить его работать вручную, используя Babel, чтобы перевести его на ES5.

Ключевой особенностью технологий, которые мы используем, является то, что наш файл index.html будет ссылаться на один связанный файл JavaScript, из которого мы можем ссылаться в других файлах JavaScript, а не ссылаться на них из файла HTML с тегами script .

• Справка: Подробнее о ES6

Предпосылки

Этот учебник предназначен для того, чтобы дать вам структуру с костью, на которой можно развернуть. Это должно быть хорошей отправной точкой для всех, кто хочет изучить React и ES6. Если вы еще ничего не создали с помощью JavaScript или jQuery, сначала выполните некоторые из упражнений на карте FreeCodeCamp .

Прежде чем начать, убедитесь, что у вас установлены NodeJS и Node Package Manager в самых последних версиях.

Быстрые инструкции

Ниже приведен список всех инструкций, упомянутых в этом уроке.

• 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
• напишите .gitignore (используйте https://www.gitignore.io/api/node )
• mkdir src
• mkdir dist
• mkdir src/js
• touch src/js/client.js
• touch dist/index.html
• написать dist/index.html
• написать src/js/client.js
• написать webpack.config.js
• webpack
• webpack-dev-server --content-base dist
• Откройте сервер Webpack Dev Server в браузере. Готово!