Простой воркспейс для старта разработки реакт приложения.
Чтобы воспользоваться готовым workspace необходимо склонировать проект и выполнить
npm install
npm run startЕсли вы хотите построить воркспейс самостоятельно, проделав руками все шаги, следуйте инструкциям:
Создать пустую папку и в ней инициализировать npm проект
npm init -yУстановить webpack, webpack-cli
npm install --save-dev webpack webpack-cliСоздать пустой js файл, который будет служить точкой входа для webpack
mkdir src
cd src
touch index.jsНастроить в package.json скрипты для выполнения сборки (production, development)
'scripts': {
'dev': 'webpack --mode development',
'build': 'webpack --mode production'
}Установить babel и пресеты
npm install --save-dev babel-loader @babel/core @babel/preset-envСоздать .babelrc для настройки babel
{
'presets': [
'@babel/preset-env'
]
}Создать webpack.config.js и добавить babel-loader
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
}Создать корневой index.html файл в папке src
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>React Application</title>
</head>
<body>
<div id='root'></div>
</body>
</html>Установить html-webpack-plugin
npm install --save-dev html-webpack-pluginУстановить webpack-dev-server
npm install --save-dev webpack-dev-serverИзменить скрипт в package.json
'dev': 'webpack --mode development',
'build': 'webpack --mode production',
'start': 'webpack serve --mode development --open --hot'Установить less и лоадеры для работы с css и less
npm install --save-dev style-loader css-loader less-loader lessСоздать файл src/styles.less с содержимым
body {
background: white;
text-align: center;
span {
font-size: 50px;
}
}Поменять webpack.config.js (настроить плагины и лоадеры)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const htmlPlugin = new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
});
module.exports = {
/**
* Секции entry и output в данном случае можно было бы опустить,
* т.к. по умолчанию заданы именно такие настройки.
*/
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
],
},
resolve: {
extensions: ['.js', '.css', '.less']
},
plugins: [htmlPlugin]
};Установить библиотеки react, react-dom
npm install --save react react-domУстановить пресеты для babel для реакта
npm install --save-dev @babel/preset-reactМеняем .babelrc, добавляем пресеты в настройки
{
'presets': [
'@babel/preset-env',
'@babel/preset-react'
]
}Пример Hello world приложения на реакт. Содержимое файла src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './styles';
class HelloWorld extends React.Component {
render () {
return <span>Hello, world!</span>
}
}
ReactDOM.render(<HelloWorld />, document.getElementById('root'));UPDATE#1: При написании реакт компонентов принято использовать расширение для файлов .jsx
- Переименуйте файл
index.js-->index.jsx - Измените в настройках entry в файле webpack.config.js значение
'./src/index.js'-->'./src/index.jsx' - Измените правило для babel-loader
test: /\.(js)$/-->test: /\.(js|jsx)$/ - Добавьте в секцию resolve значение
['.js', '.css', '.less']-->['.js', '.jsx', '.css', '.less']
UPDATE#2: Для того, чтобы в es6 классах можно было писать методы через стрелочные функции необходимо установить плагин для бабеля
npm install --save-dev babel-plugin-transform-class-propertiesИ обновить файл с настройками .babelrc
{
'presets': [
'@babel/preset-env',
'@babel/preset-react'
],
'plugins': ['transform-class-properties']
}После того, как эти шаги были выполнены, необходимо выполнить команду
npm run start