Создание каркаса React приложения
Изменения в JavaScript, произошедшие последнее время поистине колоссальны. NodeJS, npm, тысячи пакетов на все случаи жизни, сбивает с толку. Один только React чего стоит - создание каркаса React приложения, как правило, выполняется командой create-react-app, которая тащит за собой десятки зависимостей и весит чуть ли не под 100МБ. Конечно, новичку, который решил решил осваивать разработку на React, а React - это популярная библиотека для построения интерфейсов, все эти излишества не нужны - они запутывают и мешают сконцентрироваться на основном.
Поэтому в данной статье, я хотел бы, показать вам макет React приложения, которое вы можете развернуть у себя на ПК буквально в течении 15 минут и приступить к разработке.
Итак, структура папок следующая (все файлы лежат в отдельной папке react-env-setup):
C:.
│ package.json
│ webpack.config.js
│
└───src
│ index.html
│ index.js
│
└───components
App.js
Файл package.json содержит все, что необходимо для создания React приложения. Для того, чтобы все зависимости перечисленные в нем установились, необходимо выполнить команду:
npm install
Вот содержимое файла package.json:
{
"name": "react-env-setup",
"version": "1.0.0",
"description": "Базовый шаблон для начала работы с React, только то, что нужно и ничего лишнего!",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "Kiazim Khutaba",
"license": "MIT",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.35.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
}
Файл webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js', // точка входа в приложение
output: {
path: path.join(__dirname,'/dist'), // папка в которой будут создаваться конечные файлы приложения
filename: 'react_app.js' // названием JS файла
},
module: {
rules: [
{
test: /\.js$/, // если файл имеет расширение js, то обрабатываем его
exclude: /node_modules/, // но папку node_modules не трогаем, так как там ничего нам преобразовывать не нужно
use: {
loader: 'babel-loader', // необходим для преобразования JS файлов из нового стандарта в старый
options: {
presets: ['@babel/preset-env','@babel/preset-react']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html' // этот плагин автоматом создаст index.html c подключенным index_bundle
})
]
}
Этот файл содержит настройки для системы сборки Webpack, наиболее важные моменты уточнены комментариями.
Папка src содержит файл index.html:
<!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 приложение</title>
</head>
<body>
<!-- контейнер, в котором будет размещено React приложение -->
<div id="app"></div>
</body>
</html>
, а также файл index.js:
import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App';
ReactDom.render(<App />, document.getElementById("app"))
В подпапке components содержатся непосредственно сами файлы React компонентов:
// файл App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Пример React приложения!!</h1>
</div>
);
}
}
export default App;
Для создания каркаса React приложения просто создайте подобную структуру папок и файлов и скопируйте в них указный мною выше код. Далее в папке, где лежит package.json запустите команду
npm install
она установит необходимые зависимости. А следующей командой запустите
npm start
, которая запустит сервер разработки и откроет браузер. В дальнейшем, когда вы будете вносить изменения в файлы компонентов, например, эти изменения будут отражаться у вас сразу в браузере.
Вот так просто (относительно просто), можно создать окружение для разработки React приложений.
-
Создано 27.06.2019 09:24:29
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.