React, टेलविंड CSS, और Shadcn का उपयोग करके स्क्रैच से एक प्रोजेक्ट सेट करने के लिए, लेकिन बिना किसी का उपयोग किए क्रिएट-नेक्स्ट-ऐप या क्रिएट-रिएक्शन-ऐप जैसे पूर्व-निर्मित बॉयलरप्लेट, आप वेबपैक या अन्य समान बंडलर्स का उपयोग करके सेटअप को मैन्युअल रूप से कॉन्फ़िगर कर सकते हैं। वेबपैक के साथ इसे स्थापित करने के लिए नीचे एक गाइड है:

चरण 1: एक एनपीएम प्रोजेक्ट प्रारंभ करें

एक नई प्रोजेक्ट निर्देशिका बनाएं और एक नया एनपीएम प्रोजेक्ट प्रारंभ करें:

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

चरण 2: प्रतिक्रिया और निर्भरताएँ स्थापित करें

इंस्टॉल करें 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: टेलविंड सीएसएस स्थापित करें

टेलविंड सीएसएस और इसकी सहकर्मी निर्भरताएं स्थापित करें:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

यह टेलविंड.कॉन्फिग.जेएस फ़ाइल बनाता है।

चरण 4: वेबपैक कॉन्फ़िगर करें

वेबपैक को कॉन्फ़िगर करने के लिए एक webpack.config.js फ़ाइल बनाएं:

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 फ़ाइल बनाएं:

touch .babelrc

.babelrc के अंदर, निम्नलिखित जोड़ें:

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

चरण 6: टेलविंड सीएसएस कॉन्फ़िगर करें

अपने घटकों के पथ शामिल करने के लिए अपनी टेलविंड.config.js फ़ाइल को अपडेट करें:

टेलविंड.config.js:

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

चरण 7: अपनी परियोजना संरचना स्थापित करें

अपने रिएक्ट एप्लिकेशन के लिए आवश्यक फ़ोल्डर और फ़ाइलें बनाएं:

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

सार्वजनिक/index.html:

src/index.jsx:

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

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

src/App.jsx:

import React from 'react';

const App = () => {
  return (
    

      
Hello Shadcn!
    
  );
};

export default App;

src/index.css:

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

चरण 8: शेडकन घटक स्थापित करें

अब जब आपके पास मूल सेटअप है, तो Shadcn पैकेज और उसके घटकों को स्थापित करें। अपने रिएक्ट प्रोजेक्ट के लिए Shadcn CLI और Tailwind घटक स्थापित करें:

npx shadcn-init

घटकों को स्थापित करने और अपने प्रोजेक्ट के लिए Shadcn लाइब्रेरी तैयार करने के लिए ऑन-स्क्रीन निर्देशों का पालन करें।

चरण 9: एनपीएम स्क्रिप्ट अपडेट करें

वेबपैक डेवलपमेंट सर्वर को चलाने के लिए एक स्टार्ट स्क्रिप्ट जोड़ने के लिए अपने package.json को अपडेट करें:

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

चरण 10: विकास सर्वर प्रारंभ करें

विकास सर्वर को इसके साथ चलाएं:

npm start

इससे आपका ऐप ब्राउज़र में खुल जाएगा और आपको "हैलो शैडन!" दिखाई देगा। टेलविंड सीएसएस के साथ स्टाइल किया गया। अब आप अपने रिएक्ट प्रोजेक्ट में Shadcn घटकों को जोड़ना जारी रख सकते हैं।

(एआई सहायता से उत्पन्न)