В последние годы, благодаря современным технологиям, разработка веб-приложений стала проще, чем когда-либо. В этой статье я покажу вам, как сделать это еще проще с помощью Parcel, Tailwind и React.
Parcel — это легкий и быстрый сборщик для веб-приложений, который позволяет вам легко и эффективно управлять своим проектом. Tailwind — это CSS-фреймворк, используемый для создания чистых современных интерфейсов, а React — это React и не нуждается в представлении.
Без лишних слов давайте приступим к созданию нашего веб-приложения!

mkdir my-webapp
npm init -y
npm i -D parcel
npm i react react-dom
mkdir src
touch src/index.html
npm i -D tailwindcss postcss
npx tailwindcss init

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

{
  "name": "my-webapp",
  "version": "1.0.0",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.8.3",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.6"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Внутри корневой папки создайте файл postcss.config.js и настройте его следующим образом.

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ],
};

Создайте файл с именем .postcssrc по тому же пути и вставьте:

{
  "plugins": {
    "tailwindcss": {}
  }
}

Удалите код внутри tailwind.config.js и добавьте

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

В ./src создайте файл с именем index.css и заполните его:

@tailwind base;
@tailwind components;
@tailwind utilities;

и заполните ./src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./index.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./index.js"></script>
</body>
</html>

теперь создайте файл index.js, в котором вы начнете кодировать, используя реакцию.

import { createRoot } from 'react-dom/client';
createRoot(app).render(
<div>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</div>
);

Чтобы запустить его локально, просто запустите

npx parcel ./src/index.html

Чтобы построить проект

npx parcel build ./src/index.html

⚠️ Если вы столкнулись с ошибкой относительно относительных путей после сборки и развертывания кода на веб-сервере, вам может потребоваться выполнить сборку следующим образом:

npx parcel build --public-url ./ ./src/index.html

Заключительные размышления

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