В последние годы, благодаря современным технологиям, разработка веб-приложений стала проще, чем когда-либо. В этой статье я покажу вам, как сделать это еще проще с помощью 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 для создания достойного веб-приложения.
Не забудьте изучить их расширенные функции, чтобы настроить свой опыт разработки.