Shadcn プロジェクトを最初から始める方法
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7315
9
1625
14
1348
46
1261
25
1208
29
