Heim > Artikel > Web-Frontend > So starten Sie ein Shadcn-Projekt von Grund auf

So starten Sie ein Shadcn-Projekt von Grund auf

Susan SarandonOriginal: 2024-09-23 08:30:03623Durchsuche

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

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

Schritt 3: Tailwind CSS installieren

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

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

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

Schritt 5: Konfigurieren Sie Babel

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

touch .babelrc

Fügen Sie in .babelrc Folgendes hinzu:

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

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: [],
};

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

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>

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;

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

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"
}

Schritt 10: Starten Sie den Entwicklungsserver

Führen Sie den Entwicklungsserver aus mit:

npm start

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!

json css html npm webpack for include Directory continue using public JS this

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Prototypen in JavaScript verstehen: Das Rückgrat der VererbungNächster Artikel：Prototypen in JavaScript verstehen: Das Rückgrat der Vererbung

In Verbindung stehende Artikel

Mehr sehen