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 구성을 위한 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단계: Babel 구성

Babel 구성을 위한 .babelrc 파일을 만듭니다.

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 패키지와 해당 구성 요소를 설치하세요. React 프로젝트에 Shadcn CLI 및 Tailwind 구성요소를 설치합니다.

npx shadcn-init

화면의 지시에 따라 구성 요소를 설치하고 프로젝트에 대한 Shadcn 라이브러리를 생성합니다.

9단계: npm 스크립트 업데이트

package.json을 업데이트하여 Webpack 개발 서버를 실행하기 위한 시작 스크립트를 추가하세요.

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

10단계: 개발 서버 시작

다음을 사용하여 개발 서버를 실행합니다.

npm start

이렇게 하면 브라우저에서 앱이 열리고 'Hello Shadcn!'이 표시됩니다. Tailwind CSS로 스타일을 지정했습니다. 이제 Shadcn 구성 요소를 React 프로젝트에 계속 추가할 수 있습니다.

(AI 지원으로 생성됨)