لإعداد مشروع من البداية باستخدام 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: تثبيت Tailwind CSS

تثبيت Tailwind CSS وتبعياته:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

يؤدي هذا إلى إنشاء ملف tailwind.config.js.

الخطوة 4: تكوين Webpack

قم بإنشاء ملف 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: تكوين بابل

قم بإنشاء ملف .babelrc لتكوين Babel:

touch .babelrc

داخل .babelrc، أضف ما يلي:

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

الخطوة 6: تكوين Tailwind CSS

قم بتحديث ملف tailwind.config.js الخاص بك ليشمل المسارات إلى مكوناتك:

tailwind.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;

سرك/index.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 الخاص بك.

(تم إنشاؤها بمساعدة الذكاء الاصطناعي)