ホームページ > 記事 > ウェブフロントエンド > Shadcn プロジェクトを最初から始める方法
Shadcn プロジェクトを最初から始める方法
- Susan Sarandonオリジナル
- 2024-09-23 08:30:03511ブラウズ
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
パブリック/インデックス.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>
src/index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
src/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;
src/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支援により生成)
以上がShadcn プロジェクトを最初から始める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。