So starten Sie ein Shadcn-Projekt von Grund auf-js-Tutorial-php.cn

So starten Sie ein Shadcn-Projekt von Grund auf

Susan Sarandon

Freigeben： 2024-09-23 08:30:03

Original

642 Leute haben es durchsucht

How to start a Shadcn project from scratch

Um ein Projekt von Grund auf mit React, Tailwind CSS und Shadcn einzurichten, aber ohne welche zu verwenden Wenn Sie vorgefertigte Boilerplates wie „create-next-app“ oder „create-react-app“ verwenden, können Sie das Setup manuell mit Webpack oder anderen ähnlichen Bundlern konfigurieren. Nachfolgend finden Sie eine Anleitung zum Einrichten mit Webpack:

Schritt 1: Initialisieren Sie ein npm-Projekt

Erstellen Sie ein neues Projektverzeichnis und initialisieren Sie ein neues NPM-Projekt:

mkdir my-shadcn-app
cd my-shadcn-app
npm init -y

Nach dem Login kopieren

Schritt 2: Installieren Sie React und Dependencies

Installieren Sie React, ReactDOM, webpack und 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

Nach dem Login kopieren

Schritt 3: Tailwind CSS installieren

Installieren Sie Tailwind CSS und seine Peer-Abhängigkeiten:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Nach dem Login kopieren

Dadurch wird die Datei tailwind.config.js erstellt.

Schritt 4: Webpack konfigurieren

Erstellen Sie eine webpack.config.js-Datei zum Konfigurieren von Webpack:

touch webpack.config.js

Nach dem Login kopieren

Fügen Sie in webpack.config.js Folgendes hinzu:

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,
  },
};

Nach dem Login kopieren

Schritt 5: Konfigurieren Sie Babel

Erstellen Sie eine .babelrc-Datei für die Babel-Konfiguration:

touch .babelrc

Nach dem Login kopieren

Fügen Sie in .babelrc Folgendes hinzu:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Nach dem Login kopieren

Schritt 6: Konfigurieren Sie Tailwind CSS

Aktualisieren Sie Ihre tailwind.config.js-Datei, um die Pfade zu Ihren Komponenten einzuschließen:

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Nach dem Login kopieren

Schritt 7: Richten Sie Ihre Projektstruktur ein

Erstellen Sie die erforderlichen Ordner und Dateien für Ihre React-Anwendung:

mkdir src public
touch src/index.jsx src/App.jsx src/index.css public/index.html

Nach dem Login kopieren

public/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>

Nach dem Login kopieren

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'));

Nach dem Login kopieren

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;

Nach dem Login kopieren

src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Nach dem Login kopieren

Schritt 8: Shadcn-Komponenten installieren

Da Sie nun die Grundeinrichtung haben, installieren Sie das Shadcn-Paket und seine Komponenten. Installieren Sie die Shadcn-CLI- und Tailwind-Komponenten für Ihr React-Projekt:

npx shadcn-init

Nach dem Login kopieren

Folgen Sie den Anweisungen auf dem Bildschirm, um Komponenten zu installieren und die Shadcn-Bibliothek für Ihr Projekt zu generieren.

Schritt 9: Npm-Skripte aktualisieren

Aktualisieren Sie Ihre package.json, um ein Startskript zum Ausführen des Webpack-Entwicklungsservers hinzuzufügen:

"scripts": {
  "start": "webpack serve --open"
}

Nach dem Login kopieren

Schritt 10: Starten Sie den Entwicklungsserver

Führen Sie den Entwicklungsserver aus mit:

npm start

Nach dem Login kopieren

Dies sollte Ihre App im Browser öffnen und Sie sehen „Hallo Shadcn!“ gestylt mit Tailwind CSS. Sie können jetzt mit dem Hinzufügen von Shadcn-Komponenten zu Ihrem React-Projekt fortfahren.

(Erstellt mit KI-Unterstützung)

Das obige ist der detaillierte Inhalt vonSo starten Sie ein Shadcn-Projekt von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!