Хотя приложение Create React (CRA) обеспечивает быстрый и простой способ настройки проекта React, оно может не подходить для всех случаев использования. В этой статье мы проведем вас через настройку проекта React с нуля без CRA, охватив такие темы, как структура проекта, конфигурация Webpack, настройка Babel и установка основных зависимостей React.
0. Предпосылки
Убедитесь, что на вашем компьютере установлены Node.js и npm. Вы можете проверить их установку, выполнив следующие команды:
node -v npm -v
1. Настройка проекта
Сначала мы создаем новый каталог для проекта и переходим к нему в терминале. На этом шаге создается папка, в которой будут находиться все файлы нашего проекта.
mkdir react-app cd react-app
Затем мы инициализируем новый файл package.json, в котором будут храниться метаданные и зависимости проекта.
npm init -y
2. Установка React и ReactDOM
Далее мы устанавливаем основные библиотеки React: react и react-dom. Эти библиотеки необходимы для создания компонентов React и их рендеринга в браузере.
npm install react react-dom
3. Установка Вавилона
Babel — это компилятор JavaScript, который позволяет вам использовать новейшие функции JavaScript, сохраняя при этом поддержку старых браузеров. Этот шаг гарантирует, что ваш код совместим с широким спектром браузеров.
Обязательно установите их в devDependencies. Размещение библиотек, связанных с разработкой, в разделе devDependencies является лучшей практикой, поскольку это помогает различать зависимости, необходимые для запуска приложения, и те, которые необходимы только во время разработки.
Установите необходимые зависимости Babel в devDependencies:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
Создайте файл конфигурации .babelrc в корневом каталоге вашего проекта. Этот файл сообщает Babel, какие пресеты использовать при переносе кода.
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
4. Конфигурация веб-пакета
Webpack — это сборщик модулей, который обрабатывает и объединяет активы вашего приложения, такие как JavaScript, CSS и изображения. Он берет ваши исходные файлы и создает единый оптимизированный выходной файл для браузера.
Установите необходимые зависимости Webpack в devDependencies:
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader style-loader
Создайте файл webpack.config.js в корневом каталоге вашего проекта. Этот файл конфигурации сообщает Webpack, как обрабатывать и связывать файлы вашего проекта.
mode: устанавливает режим процесса сборки (developmentилиproduction).entry: указывает точку входа для вашего приложения.output: определяет, где будут сохранены связанные файлы.module.rules: определяет, как должны обрабатываться файлы разных типов.resolve.extensions: указывает, какие расширения файлов должен разрешать Webpack.plugins: настраивает дополнительные плагины, такие какHtmlWebpackPlugin.devServer: настраивает конфигурацию сервера разработки.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
],
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
hot: true,
open: true,
},
};
5. Структура проекта
Создайте базовую структуру проекта:
my-custom-react-app/
├── public/
├── index.html
├── src/
├── App.js
├── index.js
├── .babelrc
├── package.json
├── webpack.config.js
Создайте простой файл index.html внутри папки public. Этот файл служит основным HTML-шаблоном для вашего приложения, и в нем будут отображаться компоненты React.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Custom React App</title> </head> <body> <div id="root"></div> </body> </html>
Создайте файл index.js в папке src. Этот файл является точкой входа вашего приложения и отвечает за отрисовку корневого компонента React.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
Создайте файл App.js в папке src. Этот файл определяет основной компонент приложения, который можно использовать для создания остальной части вашего приложения.
import React from 'react';
const App = () => {
return <div>Hello, world!</div>;
};
export default App;
6. Запуск приложения
Добавьте следующие сценарии в файл package.json. Эти сценарии позволяют запускать приложение в режиме разработки или создавать производственную сборку.
"scripts": {
"start": "webpack serve --mode development",
"build": "webpack --mode production"
}
Теперь вы можете запустить свое пользовательское приложение React в режиме разработки:
npm start
Эта команда откроет новое окно браузера с вашим приложением, запущенным на https://localhost:8080/.
7. Настройте .gitignore
Перед отправкой в репозиторий GitHub создайте файл .gitignore в корне каталога вашего проекта и включите в него следующее:
# .gitignore # Ignore node_modules folder node_modules/ # Ignore environment variables and secrets .env # Ignore build folder /dist /build # Ignore logs *.log
Этот файл .gitignore гарантирует, что папка node_modules, файл .env, содержащий переменные среды или секреты, и папка сборки не будут отправлены в удаленный репозиторий.
8. Необязательно: добавление препроцессоров CSS
Если вы предпочитаете использовать препроцессор CSS, такой как SCSS, вы можете установить необходимые зависимости и настроить конфигурацию Webpack:
Установите зависимости SCSS в devDependencies:
npm install --save-dev sass-loader sass
Обновите конфигурацию Webpack, изменив массив rules:
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
Теперь вы можете использовать файлы SCSS в своем проекте.
Теперь у вас есть пользовательское приложение React, настроенное без использования Create React App. Эта конфигурация обеспечивает большую гибкость и позволяет настраивать процесс сборки в соответствии с вашими конкретными потребностями. Это отличная отправная точка для проектов, требующих более индивидуальной настройки, или для разработчиков, желающих узнать больше о базовых инструментах сборки. Это руководство для начинающих должно было предоставить вам объяснения, необходимые для понимания цели и важности каждого шага в этом процессе.
