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:
Erstellen Sie ein neues Projektverzeichnis und initialisieren Sie ein neues NPM-Projekt:
mkdir my-shadcn-app cd my-shadcn-app npm init -y
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
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.
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,
},
};
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"]
}
Aktualisieren Sie Ihre tailwind.config.js-Datei, um die Pfade zu Ihren Komponenten einzuschließen:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
extend: {},
},
plugins: [],
};
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
<!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>
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
import React from 'react';
const App = () => {
return (
<div className="p-6">
<h1 className="text-3xl font-bold">Hello Shadcn!</h1>
</div>
);
};
export default App;
@tailwind base; @tailwind components; @tailwind utilities;
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.
Aktualisieren Sie Ihre package.json, um ein Startskript zum Ausführen des Webpack-Entwicklungsservers hinzuzufügen:
"scripts": {
"start": "webpack serve --open"
}
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!
