Shadcn プロジェクトを最初から始める方法-jsチュートリアル-php.cn

Shadcn プロジェクトを最初から始める方法

Susan Sarandon

リリース： 2024-09-23 08:30:03

オリジナル

662 人が閲覧しました

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

ログイン後にコピー

パブリック/インデックス.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 サイトの他の関連記事を参照してください。