ReactJS - Создание React приложения
Привет, будущие разработчики React! Я рад помочь вам отправиться в увлекательное путешествие по созданию вашего первого React приложения. Как someone, кто много лет teaches computer science, я могу заверить вас, что React не только мощен, но и весело изучать. Так что давайте окунемся в это!
Что такое React?
Прежде чем мы начнем программировать, давайте поймем, что такое React. React - это популярная JavaScript библиотека для создания пользовательских интерфейсов. Она была разработана Facebook и теперь используется многими крупными компаниями, такими как Netflix, Instagram и Airbnb. Представьте React как набор Лего блоков, которые вы можете использовать для легкого создания сложных веб-приложений.
Начало работы
Чтобы создать React приложение, нам нужно несколько инструментов. Не волнуйтесь, если вы никогда раньше не использовали их - мы пройдем каждый шаг вместе!
Предварительные требования
- Node.js и npm (Node Package Manager)
- Текстовый редактор (я рекомендую Visual Studio Code)
Если вы еще не установили их, возьмите минутку, чтобы сделать это. Это как подготовка кухни перед приготовлением вкусного блюда!
Использование bundler Rollup
Давайте начнем с создания React приложения с использованием Rollup. Rollup - это bundler для JavaScript, который компилирует небольшие фрагменты кода в что-то более крупное и сложное.
Шаг 1: Настройка проекта
Сначала создадим новую директорию для нашего проекта и инициируем новую Node.js проект:
mkdir my-react-app
cd my-react-app
npm init -yЭто создает новую папку и инициирует новый Node.js проект. Это как laying the foundation of our house!
Шаг 2: Установка зависимостей
Теперь установим необходимые пакеты:
npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terserНе пугайтесь этими длинными именами. Represent them as ingredients for our React recipe!
Шаг 3: Создание конфигурационных файлов
Давайте создадим два важных файла:
-
rollup.config.js:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};Этот файл сообщает Rollup, как bundling our application. Это как giving instructions to a chef on how to prepare a dish.
-
.babelrc:
{
"presets": ["@babel/preset-react"]
}Этот файл настраивает Babel, который помогает переводить современный JavaScript в версию, которую могут понять старые браузеры.
Шаг 4: Создание наших React компонентов
Теперь создадим наш первый React компонент! Создадим новый файл src/App.js:
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>Welcome to my first React application!</p>
</div>
);
}
export default App;Этот是我们的 main component. Это как star of our show!
Далее создадим src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);Этот файл отвечает за рендеринг нашего App компонента в HTML.
Шаг 5: Создание HTML файла
Создадим новый файл public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>Здесь наше React приложение будет mounted.
Шаг 6: Добавление скриптов в package.json
Обновим ваш package.json, чтобы включить эти скрипты:
"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}Эти скрипты помогут нам build и run наше приложение.
Шаг 7: Build и запуск приложения
Теперь давайте оживим наше творение! Запустите:
npm run buildЭто создаст наш bundled JavaScript файл. Чтобы увидеть ваше приложение, откройте public/index.html в веб-браузере. Поздравляю! Вы только что создали свое первое React приложение с использованием Rollup!
Использование bundler Parcel
Теперь, когда мы видели, как использовать Rollup, давайте попробуем другой популярный bundler: Parcel. Parcel известен своим ноль-конфигурационным подходом, что делает его super easy to get started.
Шаг 1: Настройка проекта
Создадим новый проект:
mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -yШаг 2: Установка зависимостей
Установим React и Parcel:
npm install react react-dom
npm install --save-dev parcel-bundlerШаг 3: Создание наших React компонентов
Создадим src/App.js:
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>This app was bundled with Parcel.</p>
</div>
);
}
export default App;Создадим src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);Шаг 4: Создание HTML файла
Создадим src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Parcel React App</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>Обратите внимание, что мы напрямую ссылаемся на наш index.js файл. Parcel позаботится о bundling для нас!
Шаг 5: Добавление скриптов в package.json
Обновим ваш package.json:
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}Шаг 6: Запуск приложения
Теперь запустим наше приложение:
npm startParcel автоматически откроет ваше приложение в браузере. Любые изменения, которые вы внесете, будут instantly reflected!
Для build в production:
npm run buildЭто создаст оптимизированные файлы в директории dist.
Сравнение Rollup и Parcel
Вот быстрое сравнение двух bundlers, которые мы использовали:
| Feature | Rollup | Parcel |
|---|---|---|
| Configuration | Requires configuration file | Zero-configuration |
| Speed | Fast | Very fast |
| Bundle size | Generally smaller | Slightly larger |
| Learning curve | Steeper | Gentle |
| Flexibility | Highly customizable | Less customizable |
Оба bundlers имеют свои сильные стороны, и выбор между ними часто зависит от конкретных потребностей вашего проекта.
Заключение
Поздравляю! Вы теперь создали React приложения с использованием как Rollup, так и Parcel. Помните, что путь в тысячу миль начинается с первого шага, и вы только что сделали свои первые шаги в увлекательный мир React разработки.
Пока вы продолжаете учиться и расти, вы обнаружите, что React открывает целый новый мир возможностей в веб-разработке. Это как учиться рисовать - сначала вы можете бороться с базовыми формами, но скоро вы начнете создавать шедевры!
Продолжайте практиковаться, stay curious, и, что самое главное, получайте удовольствие! React - это мощный инструмент, но он также приносит радость. Счастливо кодирования!
Credits: Image by storyset