Проект React в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы,библиотеки в один js) + Babel (расширенная js функциональность т.е. это jsx, классы) + React (пишем нашу компоненту)

Programming, development, testing

→

Webpack - это САМЫЙ ПОПУЛЯРНЫЙ менеджер пакетов. Webpack добавляет JavaScript библиотеки в ваш проект

→

Проект React в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы,библиотеки в один js) + Babel (расширенная js функциональность т.е. это jsx, классы) + React (пишем нашу компоненту)

Looked at 3463 times Comments 3

Last Comment: (16 March 2021 23:03) Супер!!! Спасибо огромное, все понятно! в отличие... read... Write a comment...

last updated: 13 Augusta 2020

Note! You must have Node.js installed. If you don't have it, then need to download and install Node.js ...

Note! You must have Visual Studio Code installed. If you don't have it, then need to download and install Visual Studio Code ...

Download the example

my_react_example1.zip ...
Size: 2 kilobytes

File structure:

D:/my_react_example1

.babelrc configuration file for Babel

index.html

package.json configuration file for Node.js (contains package names)

webpack.config.js configuration file for Webpack (How to merge JS files into one)

.vscode

launch.json configuration file for Visual Studio Code (path to the executable file)

src

evgen.js

build

transformed.js After running Webpack, this file will be generated

File .babelrc open ...

File index.html open ...

File package.json open ...

File webpack.config.js open ...

File .vscode/launch.json open ...

File src/evgen.js open ...

How do I run the sample locally on my computer?

Step 1.
Open
Visual Studio Code
and select React project

In Visual Studio Code click on the menu File → Open Folder
and select the folder D:/my_react_example1

Step 2.
Installing libraries

In Visual Studio Code click on the menu Terminal → New Terminal
Perform:

npm install

See the picture:

Explanation:
There are no js libraries in this zip archive.
The names and versions of the js libraries are written in the package.json file.
When executed on the npm install command line, libraries with the name and versions from package.json will be downloaded from the Internet and installed in the node_modules folder.

Step 3.
Compile the React project

Perform:

npm run MyBuild

See the picture:

Explanation:
The npm run MyBuild command runs the script MyBuild.
The script MyBuild is defined in the package.json file.
File D:/my_react_example1/package.json:
{
...
    "scripts": {
        "MyBuild": "webpack"
    }
...
}

The script MyBuild will run Webpack.
Webpack take the file evgen.js and take the files React and pack all the code from these files into one file transformed.js

Step 4.
Run the React project

In Visual Studio Code click on the menu Run → Start Debugging

See the picture:

In the Google Chrome browser, a new page will be opened with the address: file:///D:/my_react_example1/index.html

See the picture:

Explanation:
index.html
starts because the .vscode/launch.json configuration file contains the following parameter:
"url": "${workspaceFolder}/index.html"

Setup file .vscode/launch.json

{
"version": "0.2.0",
"configurations": [
     {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome",
          "url": "${workspaceFolder}/index.html"
     }
]}

Note!
If you have changed the src/evgen.js file, then you need to:

Go to step 3 (compile the React project) ...

Go to step 4 (run the React project) ...

How to do it yourself manually:

Plan (12 steps)

Step 1.

Open Visual Studio Code

Step 1a.

Enable auto-save in Visual Studio Code

Step 2.

Create a new folder my_react_example1 on the disk D: and in Visual Studio Code select this folder

Step 3.

In the terminal line, execute the command npm init, as a result, the file package.json will be created

Step 4.

Install the library React in the terminal line

Step 5.

Install the library Webpack (in developer mode)

Step 6.

Install the library Babel (in developer mode)

Step 7.

Create a new file .babelrc inside Visual Studio Code

Step 8.

Create a new file webpack.config.js inside Visual Studio Code

Step 9.

Create a new file index.html inside Visual Studio Code

Step 10.

Create a new file src/evgen.js inside Visual Studio Code

Step 11.

Create a new file .vscode/launch.json inside Visual Studio Code

Step 12.

Compile the project (execute npm run MyBuild)

Step 13.

Run the project, click Run → Start Debugging. Error "Configured debug type 'chrome' is not supported"

Step 14.

Run the project in the debugger (to do this, press Run → Start Debugging or the F5 key)

Step 1. Open Visual Studio Code

If you do not have Visual Studio Code installed, you need install Visual Studio Code ... .

Opening Visual Studio Code

Step 1a. Enable auto-save in Visual Studio Code

Let's do that, The file was automatically saved to Visual Studio Code ...

Step 2. Create a new folder my_react_example1 on the disk D: and in Visual Studio Code select this folder

• Open File Explorer and create a new folder my_react_example1 on disk D:.
• In Visual Studio Code, click File → Open Folder ...
and select this folder

D:/my_react_example1

Step 3. In the terminal string, we execute npm init to create a file package.json

Let's open the terminal line:
Click Terminal → New Terminal

Введем

npm init

Все время нажимаем кнопку 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 скриптах ...

Step 4. Устанавливаем библиотеку React в терминальной строке

Введем

npm install react
npm install react react-dom

Объяснение: при выполнении команды npm install react вот что произойдет:

пакет react установится в папку node_modules

в файле package.json в секцию dependencies добавится название пакета и версия
"dependencies": {
"react": "^16.13.1",
}

Читаем подробнее что такое npm install имя_пакета ...

Step 5. Устанавливаем библиотеку Webpack (в developer режиме)

Введем

npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev webpack-cli

Объяснение:

Опция --save-dev это режим разработки (developer)
Устанавливаем Webpack с опцией developer потому, что:

Причина 1) Webpack будем запускать только чтобы объединить все js файлы в один.

Причина 2) Внутри нашего JavaScript файла мы не будем обращаться к Webpack.
Внутри нашего JavaScript файла мы будем обращаться только к React
Вот пример моего evgen.js:

JavaScript

var React = require("react"); // тут используем react

Step 6. Устанавливаем библиотеку Babel (в developer режиме)

Введем

npm install --save-dev babel-core
npm install --save-dev babel-loader@7
npm install --save-dev babel-preset-react

Объяснение: Зачем нам нужна библиотека Babel?
Библиотека Babel преобразовывает JSX код в JavaScript.

На заметку! npm install выполняем с опцией --save-dev
Опция --save-dev это режим разработки (developer)

При выполнении команды npm install --save-dev babel-core вот что произойдет:

пакет babel-core установится в папку node_modules

в файле package.json в секцию devDependencies добавится название пакета и версия
"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

Step 7. Create a new file .babelrc inside Visual Studio Code

Добавим код в

Файл .babelrc

{ presets: ['react'] }

Объяснение: .babelrc это файл для настройки Babel.
Секция presets это профиль.
В секции presets мы указали react это означает что JSX код будет преобразован в Javascript код по стандарту ES5.

Step 8. Create a new file webpack.config.js inside Visual Studio Code

Добавим код в

Файл webpack.config.js

module.exports = {
     entry: __dirname + '//src//evgen.js',
     mode: 'production',
     watch: false,
     module: {
          rules: [
               {
                    test: /.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
               }
          ]
     },
     output: {
          filename: 'transformed.js',
          path: __dirname + '/build'
     }
};

Объяснение файла webpack.config.js:

entry: __dirname + '//src//evgen.js'

Указали evgen.js файл чтобы Webpack открыл его и посмотрел какие внутри файлы подключаются и объединит все файлы в один выходной файл
Выходной файл задается в секции output {filename, path}

mode: 'production'

Может быть production или developer.
Опция production означает что Webpack создает оптимизированный output файл, маленького размера.
Опция developer означает что Webpack создает output файл с легко читаемым кодом.

watch: false

Если true то Webpack запустится в фоне и будет постоянно смотреть за изменением нашего evgen.js файла.
Как только поменяется evgen.js, то Webpack перепакует output файл.

module: {
    rules: [
        {
            test: /.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }
    ]
}

В секции module есть секция rules (правила).
Секция rules содержит loader это загрузчик.

Для загрузчика определяем какие файлы использовать и не использовать вот так:

• Опция test это текст для определения какие имена и расширения файлов могут использоваться для loader (загрузчика).
У нас test: /.js$/
начало и конец содержит / это значит что это регулярное выражение
Регулярное выражение .js$ мы видим в конце $ это означает означает что файл должен заканчиваться так .js.

• Опция exclude определяет какие файлы не брать для loader (загрузчика).
У нас exclude: /node_modules/
начало и конец содержит / это значит что это регулярное выражение
В нашем случае файл или папка с названием node_modules не будет учитываться для loader (загрузчика)

output: {
filename: 'transformed.js',
path: __dirname + '/build'
}

Секция output содержит опции filename и path.
Опции filename и path определяют имя и путь выходного файла.
Выходной файл это файл в который будут объеденены все js файлы.

Step 9. Create a new file index.html inside Visual Studio Code

Добавим код в

Файл index.html

Step 10. Create a new file src/evgen.js inside Visual Studio Code

Выберите любой вариант

Вариант 1
• Пишем свой class который наследуется от React.Component
• Используем JSX код

Вариант 2
Создаем react компоненту вручную используя React.createElement

Файл D:/my_react_example1/src/evgen.js

Файл D:/my_react_example1/src/evgen.js

var React = require("react");
var ReactDOM = require("react-dom");

const MyApp = React.createElement("h1", null, "Hello, world2!");

ReactDOM.render(
MyApp,
document.getElementById('my_container'));

Step 11. Create a new file .vscode/launch.json inside 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"
          }
     ]
}

Step 12. Компилируем проект (выполним npm run MyBuild)

Введем

npm run MyBuild

Объяснение:
Команда npm run MyBuild запускает скрипт MyBuild.
Скрипт MyBuild определен в файле package.json.
Файл D:/my_react_example1/package.json:
{
...
    "scripts": {
        "MyBuild": "webpack"
    }
...
}

Скрипт 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)

На экране увидим результат:

← Previous topic
Проект TypeScript в Visual Studio Code. Устанавливаем: Node.js + Webpack (собираем все js файлы в один js) + Typescript (конвертация файлов ts в js)

Next topic →
Assembling many js files into one js file | Webpack, nodejs, expose-loader