Shadcn 프로젝트를 처음부터 시작하는 방법
- Susan Sarandon원래의
- 2024-09-23 08:30:03621검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!