Простейшее объяснение и метод для учащихся React

Привет, энтузиасты и ученики React. Сегодня мы собираемся увидеть, что такое шаблон? И как мы могли бы создать его с минимальными навыками, будучи новичком или младшим разработчиком?

Итак, начнем.

Что такое шаблон?

Проще говоря, это просто некоторый кластер кода и библиотек, который требуется в каждом проекте или подобных проектах. Благодаря наличию шаблона вы можете легко запустить свои простые или самые сложные проекты в кратчайшие сроки.

Наиболее важной концепцией шаблонов является эффективность использования времени, которая дает результаты за очень короткое время.

Какие самые известные React Boilerplates?

Create React App — официальный шаблонный шаблон React, созданный сообществом и используемый широким кругом разработчиков по всему миру.

Создать следующее приложение. Это официальный шаблон Next JS и самый быстрый способ создать приложение Next JS.

Vite. Большинство из вас знают Эвана Ю по Vue. JS. Он является создателем еще одной самой известной библиотеки JavaScript в мире разработчиков. Он также создал шаблон, который можно использовать для запуска проектов Vue, React и Preact.

React Boilerplate. Еще один шаблонный шаблон с хорошей производительностью для React, основанный на концепции автономных приложений React.

Стартовый набор React. Если вам нужен шаблон, который уже загружен с помощью GraphQL, Express и Enzyme и включает в себя рецепты реализации распространенных вариантов использования, то вы попали по адресу.

Давайте создадим свой собственный React Boilerplate.

Создание папки проекта и инициализация проекта

Прежде всего, нам нужно создать папку проекта с именем типа "my-boilerplate-name".

После создания папки нашего проекта мы приступаем к инициализации нашего проекта с помощью npm, после чего нам также необходимо инициализировать папку нашего проекта как репозиторий git.

npm init
git init

Не забудьте создать файл .gitignore и убедитесь, что вы поместили в него следующее.

node_modules
build

Добавление зависимостей времени выполнения и транспилера

Теперь мы добавляем наши зависимости времени выполнения и наш транспилятор, которым является Babel. Babel — это транспилятор JavaScript, который преобразует более новую версию ECMAScript в более старую версию, поддерживаемую всеми браузерами.

Во-первых, нам нужно установить react и react-dom в качестве зависимостей времени выполнения.

npm i react react-dom –save

И далее мы добавляем наш транспилятор и его плагины.

npm i @babel/core @babel/preset-env @babel/preset-react @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/runtime @babel/eslint-parser –save-dev

Добавление пресетов Babel, которые нам нужны

Мы создадим специальный файл конфигурации Babel с именем .babelrc. который может содержать все конфигурации Babel.

Создайте файл с именем .babelrc, содержащий следующие коды.

{
“presets”: [
“@babel/preset-env”,
“@babel/preset-react”
],
“plugins”: [
“@babel/plugin-syntax-dynamic-import”,
“@babel/plugin-transform-runtime”
]
}

Приведенный выше пресет может отличаться. Вы можете увидеть все пресеты и плагины ниже по ссылкам.

Вавилонские пресеты

Вавилонские плагины

Мы добавляем наш бандлер

Но что такое упаковщик?

Сборщик — это инструмент, который объединяет ваш код и ваши зависимости в один или несколько файлов пакетов. В нашей версии React Boilerplate мы собираемся использовать Webpack для объединения с загрузчиком CSS и SASS.

npm i webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader sass-loader sass –save-dev

И создайте файл webpack.config.js в корневом каталоге проекта, который включает:

const path = require(“path”);
module.exports = {
entry: “./index.js”,
output: {
path: path.resolve(__dirname, “public”),
filename: “main.js”,
},
resolve: {
modules: [path.join(__dirname, ‘src’), ‘node_modules’],
alias: {
react: path.join(__dirname, ‘node_modules’, ‘react’),
},
},
devServer: {
port: “8000”,
static: {
directory: path.join(__dirname, “public”),
},
compress: true,
},
resolve: {
extensions: [“.js”, “jsx”, “.json”],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”,
},
},
{
test: /\.css$/,
use: [
{
loader: “style-loader”,
},
{
loader: “css-loader”,
},
],
},
{
test: /\.s[ac]ss$/i,
use: [“style-loader”, “css-loader”, “sass-loader”],
},
],
},
};

Для лучшего кода и выделения ошибок мы добавляем ESLint в наш шаблон.

npm i — save-dev eslint eslint-config-airbnb-base eslint-plugin-jest eslint-config-prettier

Создание нашей шаблонной структуры папок

Давайте сделаем его более похожим на create-react-app, который может показаться вам более знакомым.

Когда мы настроим конфигурацию webpack, мы продолжим и создадим папки public и src в корне вашего проекта. сильный> каталог.

Внутри общей папки мы должны создать файл index.html, который будет содержать наш корневой div.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title>Quick React Boilerplate</title>
</head>
<body>
<div id=”root”></div>
<script src=”main.js”></script>
</body>
</html>

Теперь нам нужно создать файл App.js в папке src и включить следующие строки:

import React from ‘react’
const App = () => {
return (
<div className=’App’>
<h1>Welcome to Quick React</h1>
</div>
)
}
export default App;

Наконец, нам нужно создать файл index.js в корневом каталоге.

import React from “react”
import ReactDOM from ‘react-dom/client’
import App from ‘./src/App’
const motherContainer = document.getElementById(‘root’);
const root = ReactDOM.createRoot(motherContainer);
root.render(<App />);

Если вы дошли до этого места, поздравляю. Он почти закончен, но еще не завершен.

Мы должны добавить начальные сценарии в наш файл package.json.

“script”: {
“start”: “webpack serve  — mode=development — open — hot”,
“build”: “webpack — mode=production”
}

И последнее, но не менее важное: запустите свой скрипт сборки.

npm run build

Если он успешно скомпилирован, поздравляем. Он создаст связанный файл js с именем main.js внутри общедоступной папки.

Теперь мы готовы начать наш проект. Иди и начни свой проект.

npm start

Вы можете увидеть следующий экран:

Теперь он работает на порту 8000 на нашем локальном хосте.

Вы создали собственное поздравление React Boilerplate. Его можно настроить в зависимости от предпочтений ваших проектов.

Я также создал облегченный шаблон React Boilerplate.
Ознакомьтесь с ним, чтобы начать быстро изучать React.
Пакет: https://www.npmjs.com/package/reactinrush
Репо: https://github.com/canocalir/reactinrush

Увидимся на следующем.