Чтобы настроить проект с нуля, используя React, Tailwind CSS и Shadcn, но без использования каких-либо предварительно созданные шаблоны, такие как create-next-app или create-react-app, вы можете вручную настроить настройку с помощью Webpack или других подобных сборщиков. Ниже приведено руководство по настройке с помощью Webpack:

Шаг 1. Инициализируйте проект npm

Создайте новый каталог проекта и инициализируйте новый проект npm:

mkdir my-shadcn-app
cd my-shadcn-app
npm init -y

Шаг 2. Установите React и зависимости

Установите React, ReactDOM, webpack и webpack-dev-server:

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

Шаг 3. Установите CSS Tailwind

Установите Tailwind CSS и его одноранговые зависимости:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

При этом создается файл Tailwind.config.js.

Шаг 4. Настройте веб-пакет

Создайте файл webpack.config.js для настройки Webpack:

touch webpack.config.js

Внутри webpack.config.js добавьте следующее:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: './dist',
    hot: true,
  },
};

Шаг 5. Настройте Babel

Создайте файл .babelrc для конфигурации Babel:

touch .babelrc

Внутри .babelrc добавьте следующее:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Шаг 6. Настройте CSS Tailwind

Обновите файл Tailwind.config.js, включив в него пути к вашим компонентам:

хвостовой ветер.config.js:

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

Шаг 7. Настройте структуру проекта

Создайте необходимые папки и файлы для вашего приложения React:

mkdir src public
touch src/index.jsx src/App.jsx src/index.css public/index.html

общественный/index.html:

источник/index.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(, document.getElementById('root'));

источник/App.jsx:

import React from 'react';

const App = () => {
  return (
    

      
Hello Shadcn!
    
  );
};

export default App;

источник/индекс.css:

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

Шаг 8. Установите компоненты Shadcn

Теперь, когда у вас есть базовая настройка, установите пакет Shadcn и его компоненты. Установите компоненты Shadcn CLI и Tailwind для вашего проекта React:

npx shadcn-init

Следуйте инструкциям на экране, чтобы установить компоненты и создать библиотеку Shadcn для вашего проекта.

Шаг 9. Обновите сценарии npm

Обновите package.json, чтобы добавить стартовый скрипт для запуска сервера разработки Webpack:

"scripts": {
  "start": "webpack serve --open"
}

Шаг 10: Запустите сервер разработки

Запустите сервер разработки с помощью:

npm start

В браузере должно открыться ваше приложение, и вы увидите «Hello Shadcn!» стилизованный с помощью Tailwind CSS. Теперь вы можете продолжить добавление компонентов Shadcn в свой проект React.

(Создано с помощью искусственного интеллекта)