Создание нового веб-приложения с React с помощью Visual Studio Code. Использую: Node.js + Webpack (собираем все js файлы, библиотеки в один js файл) + Babel (расширенная js функциональность с jsx и классами) + React (пишем нашу компоненту)
последнее обновление: 19 февраля 2025
На заметку! У вас должна быть установлена Node.js . Если у вас ее нет то нужно скачать и установить Node.js ... На заметку! У вас должна быть установлена Visual Studio Code . Если у вас ее нет то нужно скачать и установить Visual Studio Code ...
D:/my_react_example1 .babelrc конфигурационный файл для Babel
index.html package.json конфигурационный файл для Node.js (содержит названия пакетов)
webpack.config.js конфигурационный файл для Webpack (как объединять js файлы в один)
.vscode launch.json конфигурационный файл для Visual Studio Code (путь к запускаемому файлу)
src evgen.js build transformed.js после запуска Webpack сгенерируется этот файл
1)
Файл
.babelrc спрятать ↴ открыть ...
2)
Файл
index.html спрятать ↴ открыть ...
<html>
<body>
<div id="my_container" ></div>
<script src="./build/transformed.js" ></script>
</body>
</html>
3)
Файл
package.json спрятать ↴ открыть ...
{
"name" : "my_react_example1" ,
"version" : "1.0.0" ,
"description" : "",
"main" : "index.js" ,
"scripts" : {
"MyBuild" : "webpack"
"author" : "",
"license" : "ISC" ,
"dependencies" : {
"react" : "^16.13.1" ,
"react-dom" : "^16.13.1"
"devDependencies" : {
"babel-core" : "^6.26.3" ,
"babel-loader" : "^7.1.5" ,
"babel-preset-react" : "^6.24.1" ,
"webpack" : "^4.43.0" ,
"webpack-cli" : "^3.3.12" ,
"webpack-dev-server" : "^3.11.0"
4)
Файл
webpack.config.js спрятать ↴ открыть ...
module.exports = {
//src//evgen.js',
5)
Файл
.vscode/launch.json спрятать ↴ открыть ...
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version" : "0.2.0" ,
"configurations" : [
"type" : "chrome" ,
"request" : "launch" ,
"name" : "Launch Chrome" ,
"url" : "${workspaceFolder}/index.html"
6)
Файл
src/evgen.js спрятать ↴ открыть ...
var React = require("react" );
"react-dom" );
"react" ;
class MyApp extends Component {
< div>
< h1> Hello, world2!< /h1>
< /div>
< MyApp> < /MyApp> ,
Как запустить пример локально у себя на компьютере?
Шаг 2.
В
Visual Studio Code нажимаем на меню
Terminal →
New Terminal Выполним:
Смотрите картинку: Объяснение: В этом zip архиве нет
js библиотек.
Название и версии
js библиотек написаны в файле
package.json .
При выполнении в командной строке
npm install библиотеки с названием и версии из
package.json скачаются из интернета и установятся в папку
node_modules .
Шаг 3. React проект
Выполним:
Смотрите картинку: Объяснение: Команда
npm run MyBuild запускает скрипт
MyBuild .
Скрипт
MyBuild определен в файле
package.json .
Файл D:/my_react_example1/
package.json :
{
...
"scripts": {
"MyBuild": "webpack"
}
...
}
Скрипт
MyBuild запустит
Webpack .
Webpack возьмеи файл
evgen.js и возьмет файлы
React и весь код из этих файлов запакует в один файл
transformed.js
Шаг 4. React проект
В
Visual Studio Code нажимаем на меню
Run →
Start Debugging Смотрите картинку: В браузере
Google Chrome откроется новая страница с адресом:
file:///D:/my_react_example1/index.html Смотрите картинку: Объяснение: Запускается
index.html потому что файл настройки
.vscode/launch.json содержит вот такой параметр:
"url": "${workspaceFolder}/index.html" Файл настройки
.vscode/launch.json
{
"version" : "0.2.0" ,
"configurations" : [
"type " : "chrome" ,
"request " : "launch" ,
"name " : "Launch Chrome" ,
"url " : "${workspaceFolder}/index.html"
Как сделать самому вручную:
Шаг 1. Открываем Visual Studio Code
Если у вас не установлена
Visual Studio Code , нужно
установить Visual Studio Code ... .
Открываем
Visual Studio Code
Шаг 1a. Включим автоматическое сохранение в Visual Studio Code
Шаг 2. Создаем новую папку my_react_example1 на диске D: и в Visual Studio Code выбираем эту папку
• Открываем
File Explorer и создаем новую папку
my_react_example1 на диске
D: .
• В
Visual Studio Code нажимаем
File →
Open Folder ...
и выбираем эту папку
D:/my_react_example1
Шаг 3. В терминальной строке выполним npm init для создания файла package.json
Откроем терминальную строку:
Terminal New Terminal
Введем
Все время нажимаем кнопку
Enter Читать:
что такое npm init ...
Результат: package.json MyBuild package.json
Файл D:/my_react_example1/package.json
{
"name" : "my_react_example1" ,
"version" : "1.0.0" ,
"description" : "",
"main" : "index.js" ,
"scripts" : {
"MyBuild" : "webpack" "author" : "",
"license" : "ISC"
Скрипт
MyBuild будет запускать
Webpack Скрипт
MyBuild мы будем ниже запускать с командной строки
Читайте
подробнее о npm скриптах ...
Шаг 4. Устанавливаем библиотеку React в терминальной строке
Введем
npm install react
Объяснение: npm install react
1)
пакет react node_modules
2)
в файле package.json dependencies react ^16.13.1
Шаг 5. Устанавливаем библиотеку Webpack (в developer режиме)
Введем
npm install --save-dev webpack
Опция
--save-dev это режим
разработки (developer) Устанавливаем
Webpack с опцией
developer потому, что:
Причина 1) Webpack будем запускать только чтобы объединить все
js файлы в один.
Причина 2) Внутри нашего
JavaScript файла мы не будем обращаться к
Webpack .
Внутри нашего
JavaScript файла мы будем обращаться только к
React Вот пример моего
evgen.js :
JavaScript
var React = require("react" ); // тут используем react
Шаг 6. Устанавливаем библиотеку Babel (в developer режиме)
Введем
npm install --save-dev babel-core
Объяснение: Зачем нам нужна библиотека Babel?Библиотека
Babel преобразовывает
JSX код в
JavaScript .
На заметку! npm install --save-dev --save-dev разработки (developer) npm install --save-dev babel-core
1)
пакет babel-core node_modules
2)
в файле package.json devDependencies babel-core ^6.26.3
Устанавливаем Babel developer
Причина 1) Когда мы будем компилировать свой проект тогда и запустим
Webpack .
Webpack объединит все
js файлы в один.
Webpack для каждого
js файла будет запускать
Babel .
Babel в каждом
js файле сконвертирует
JSX код в
JavaScript .
Причина 2) Внутри нашего
JavaScript файла мы не будем обращаться к
Babel .
Внутри нашего
JavaScript файла мы будем обращаться только к
React Вот пример моего
evgen.js :
JavaScript
var React = require("react" ); // тут используем react
Шаг 7. Создаем новый файл .babelrc внутри Visual Studio Code
Добавим код в
Файл .babelrc
{ presets: ['react'] }
Объяснение: .babelrc это файл для настройки
Babel .
Секция
presets это профиль.
В секции
presets мы указали
react это означает что
JSX код будет преобразован в
Javascript код по стандарту
ES5 .
Шаг 8. Создаем новый файл webpack.config.js внутри Visual Studio Code
Добавим код в
Файл webpack.config.js
module.exports = {
//src//evgen.js',
Объяснение файла webpack.config.js:
entry
Указали evgen.js Webpack output
mode
Может быть production developer production Webpack output developer Webpack output
watch
Если true Webpack evgen.js evgen.js Webpack output
module rules test exclude loader
В секции module rules rules loader загрузчика test loader /.js$/ .js$ .js exclude loader /node_modules/ node_modules loader
output filename path
Секция output filename path js
Шаг 9. Создаем новый файл index.html внутри Visual Studio Code
Добавим код в
Файл index.html
<html>
<body>
<div id="my_container" ></div>
<script src="./build/transformed.js" ></script>
</body>
</html>
Шаг 10. Создаем новый файл src/evgen.js внутри Visual Studio Code
Выберите любой вариант
Вариант 1
Вариант 2
Файл D:/my_react_example1/src/
evgen.js
var React = require("react" );
var ReactDOM = require("react-dom" );
"react" ;
class MyApp extends Component {
return (
<div>
<h1> Hello, world2!</h1>
</div>
<MyApp ></MyApp> ,
Файл D:/my_react_example1/src/
evgen.js
var React = require("react" );
var ReactDOM = require("react-dom" );
const MyApp = React.createElement("h1" , null, "Hello, world2!" );
Шаг 11. Создаем новый файл .vscode/launch.json внутри Visual Studio Code
Добавим код в
Файл .vscode/launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version" : "0.2.0" ,
"configurations" : [
"type" : "chrome" ,
"request" : "launch" ,
"name" : "Launch Chrome" ,
"url" : "${workspaceFolder}/index.html"
Шаг 12. Компилируем проект (выполним npm run MyBuild)
Введем
Объяснение: npm run MyBuild MyBuild MyBuild package.json package.json MyBuild Webpack Webpack evgen.js React transformed.js
Шаг 13. Запускаем проект нажимаем Run → Start Debugging. Ошибка "Configured debug type 'chrome' is not supported"
Ошибка "Configured debug type 'chrome' is not supported"
Установим Chrome Debugger
Шаг 14. Запускаем проект в отладчике (для этого нажимаем Run → Start Debugging или клавиша F5)
На экране увидим результат:
Ваши Отзывы ...
3
комментариев
Афишу
