Это предназначено для того, чтобы помочь вам настроить реагирующее приложение с веб-пакетом с нуля (без CRA). React популярен среди двух основных языков: Javascript и Typescript. И в результате этот документ предназначен для читателей, которые заинтересованы в настройке реагирования с помощью javascript, а также машинописного текста. Он начинается с javascript и заканчивается машинописным текстом. Прежде чем мы начнем, убедитесь, что у вас установлен узел. См. документ узла. Вот основные обсуждаемые моменты:
- Инициализировать приложение
- Установить реакцию и реакцию-дом
- Установите и настройте babel для транспиляции Js (функции es6 в es5)
- Установите и настройте веб-пакет для объединения модулей и файлов.
- Добавьте основные файлы (index.html, index.js и app.js)
- Обновите package.json
- Протестируйте приложение
- Перейти на машинопись
Инициализировать приложение
Инициализируйте приложение, создав новый каталог и запустив npm init (Node поможет вам подготовить каталог для предстоящей задачи, задав несколько вопросов). Для целей этого курса вы можете принять ответы по умолчанию и двигаться дальше.
Установите React и React DOM
Мы только что создали приложение с голым узлом, и нам нужно указать, что приложение узла является реагирующим приложением. Для этого нам понадобятся два пакета из npm: react и react-dom. Пакет React содержит только функции, необходимые для определения компонентов React (пользовательский интерфейс). React-dom служит точкой входа в DOM и серверные рендереры для React. Установите пакеты, выполнив приведенную ниже команду в командной строке.
npm install --save-dev react react-dom
Установите и настройте babel для переноса новых функций JS.
Babel — это компилятор, который преобразует новые функции javascript в старую версию, чтобы старые машины (браузеры) могли это понять. В случае с React, помимо прочего, JSX является главной фичей. Браузеры не понимают JSX (правильный способ объявить компонент в реакции) и другие функции es6. Чтобы настроить babel, выполните приведенную ниже команду, чтобы установить babel и другие связанные пакеты:
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
Дождитесь успешного завершения установки babel и добавьте в корневой каталог файл конфигурации для babel с именем .babelrc и вставьте следующий фрагмент кода.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Установите и настройте веб-пакет для сборки модулей
Webpack — это сборщик статических модулей для современных javascript-приложений (см. официальную документацию). Это хорошо для объединения всех модулей и файлов, составляющих приложение javascript, в файл, из которого приложение может обслуживаться. Более простой способ настроить веб-пакет — это иметь конфигурационный файл, который указывает, как веб-пакет выполняет сборку. Файл конфигурации — это файл js, который экспортирует объект. Объект содержит следующие ключи:
Вход: сообщает веб-пакету точку входа для начала объединения.
Вывод: указывает веб-пакету, куда создавать пакеты после завершения объединения.
Загрузчики: Webpack понимает только javascript и JSON. Загрузчики сообщают веб-пакету, как обрабатывать другие файлы в приложении javascript, такие как CSS, изображения, машинописный текст и т. д.
Mode: указывает Webpack среду, для которой предназначены пакеты. Это включает встроенные оптимизации webpack, соответствующие каждой среде.
Плагины. Хотя загрузчики используются для преобразования определенных типов модулей, плагины можно использовать для выполнения более широкого круга задач, таких как оптимизация пакетов, управление активами и внедрение переменных среды (см. официальный документ).
Чтобы настроить веб-пакет, сначала нам нужно установить некоторые пакеты, связанные с веб-пакетом. А именно три из них: webpack, webpack-cli и webpack-dev-server. Запустите команду ниже в своем терминале:
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
Затем создайте новый файл в корневом каталоге и назовите его webpack.config.js. Затем вставьте в него приведенный ниже фрагмент кода.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './main.jsx',
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
]
},
resolve: {
extensions: ['.jsx', '.ts', '.js'],
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
Добавьте основные файлы (index.html, index.js и app.js)
Создайте три новых файла в корневой папке, как показано ниже:
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <div id="root"></div> </body> </html>
приложение.jsx
import React from 'react';
function App() {
return (
<div>{'react setup from scratch without cra testing ts'}</div>
);
}
export default App;
Приведенный выше фрагмент кода определяет базовый функциональный компонент в реакции js.
main.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));
Выше приведена точка входа, где React визуализирует приложение с помощью reactDOM. Как вы можете видеть в последней строке кода, приложение отображается в элементе div с корневым идентификатором.
Обновите package.json
Теперь файл package.json, созданный в начале при инициализации приложения, необходимо обновить. Нам нужно сообщить ему, как собрать и запустить приложение. Для этого раздел script в package.json необходимо обновить следующим образом:
{
"name": "react-scratch-sample",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --mode development --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"html-webpack-plugin": "^5.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.7.1"
},
}
Протестируйте приложение
Теперь пришло время протестировать реагирующее приложение. Запустите команду ниже в своем терминале (убедитесь, что вы находитесь в каталоге приложения)
npm start
Поздравляем! Вот как настроить приложение для реагирования с нуля с помощью веб-пакета с использованием javascript.
Перейти на машинопись
Typescript — это надмножество javascript. В отличие от javascript, он строго типизирован и легко поддается отладке. Он поставляется с некоторым дополнительным кодом, но он может избавить вас от головной боли позже во время разработки. Typescript лучше работает в надежном приложении. Javascript обычно становится беспорядочным, когда приложение становится более надежным. Давайте перенесем приложение на typescript:
Установите машинопись и ts-loader
npm install --save-dev typescript ts-loader
Добавьте ts-config JSON
Создайте файл ts-config.json и добавьте приведенный ниже фрагмент:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
}
}
Обновить webpack.config
В файле webpack.config нужно изменить два раздела: загрузчики и разрешение. Замените фрагмент в файле webpack.config приведенным ниже фрагментом:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './main.tsx',
devtool: 'inline-source-map',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
Добавьте декларативные файлы
Добавьте декларативные файлы для реакции и реакции-дома. Запустите команду ниже
npm i @types/react @types/react-dom
Протестируйте приложение
Теперь, когда у нас установлен машинописный текст и настроены некоторые конфигурации, нам нужно обновить расширение файлов до ts или tsx. Обновите имя файла main.jsx на main.tsx и app.jsx на app.tsx. Кроме того, обновите раздел импорта модулей в файлах следующим образом:
import * as React from 'react'; import * as ReactDOM from 'react-dom';
Затем запустите приложение, запустив
npm run start
Поздравляем!!!! Приложение было перенесено на машинописный текст, и приложение может масштабироваться без особых проблем.
Спасибо за прочтение.
