Простейшее объяснение и метод для учащихся 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
Увидимся на следующем.