Shadcn 프로젝트를 처음부터 시작하는 방법-JS 튜토리얼-php.cn

Shadcn 프로젝트를 처음부터 시작하는 방법

Susan Sarandon

풀어 주다： 2024-09-23 08:30:03

원래의

507명이 탐색했습니다.

How to start a Shadcn project from scratch

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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Shadcn App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

로그인 후 복사

소스/index.jsx:

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

ReactDOM.render(<App />, document.getElementById('root'));

로그인 후 복사

소스/App.jsx:

import React from 'react';

const App = () => {
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold">Hello Shadcn!</h1>
    </div>
  );
};

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로 스타일을 지정했습니다. 이제 React 프로젝트에 Shadcn 구성 요소를 계속 추가할 수 있습니다.

(AI 지원으로 생성)

위 내용은 Shadcn 프로젝트를 처음부터 시작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Shadcn 프로젝트를 처음부터 시작하는 방법

1단계: npm 프로젝트 초기화

2단계: React 및 종속성 설치

3단계: Tailwind CSS 설치

4단계: Webpack 구성

5단계: Babel 구성

6단계: Tailwind CSS 구성

tailwind.config.js:

7단계: 프로젝트 구조 설정

공개/index.html:

소스/index.jsx:

소스/App.jsx:

소스/index.css:

8단계: Shadcn 구성 요소 설치

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

10단계: 개발 서버 시작