Maison > Article > interface Web > Comment démarrer un projet Shadcn à partir de zéro
Comment démarrer un projet Shadcn à partir de zéro
- Susan Sarandonoriginal
- 2024-09-23 08:30:03511parcourir
Pour configurer un projet à partir de zéro en utilisant React, Tailwind CSS et Shadcn, mais sans utiliser aucun des passe-partout prédéfinis comme create-next-app ou create-react-app, vous pouvez configurer manuellement la configuration à l'aide de Webpack ou d'autres bundles similaires. Vous trouverez ci-dessous un guide pour configurer cela avec Webpack :
Étape 1 : initialiser un projet npm
Créez un nouveau répertoire de projet et initialisez un nouveau projet npm :
mkdir my-shadcn-app cd my-shadcn-app npm init -y
Étape 2 : Installer React et les dépendances
Installez React, ReactDOM, webpack et 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
Étape 3 : Installez Tailwind CSS
Installez Tailwind CSS et ses dépendances homologues :
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init
Cela crée le fichier tailwind.config.js.
Étape 4 : Configurer Webpack
Créez un fichier webpack.config.js pour configurer Webpack :
touch webpack.config.js
Dans webpack.config.js, ajoutez ce qui suit :
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,
},
};
Étape 5 : Configurer Babel
Créez un fichier .babelrc pour la configuration de Babel :
touch .babelrc
Dans .babelrc, ajoutez ce qui suit :
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Étape 6 : Configurer Tailwind CSS
Mettez à jour votre fichier tailwind.config.js pour inclure les chemins d'accès à vos composants :
tailwind.config.js :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
extend: {},
},
plugins: [],
};
Étape 7 : Configurez la structure de votre projet
Créez les dossiers et fichiers nécessaires pour votre application React :
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;
Étape 8 : Installer les composants Shadcn
Maintenant que vous disposez de la configuration de base, installez le package Shadcn et ses composants. Installez les composants Shadcn CLI et Tailwind pour votre projet React :
npx shadcn-init
Suivez les instructions à l'écran pour installer les composants et générer la bibliothèque Shadcn pour votre projet.
Étape 9 : Mettre à jour les scripts npm
Mettez à jour votre package.json pour ajouter un script de démarrage pour exécuter le serveur de développement Webpack :
"scripts": {
"start": "webpack serve --open"
}
Étape 10 : démarrer le serveur de développement
Exécutez le serveur de développement avec :
npm start
Cela devrait ouvrir votre application dans le navigateur et vous verrez « Bonjour Shadcn ! » stylisé avec Tailwind CSS. Vous pouvez maintenant continuer à ajouter des composants Shadcn à votre projet React.
(Généré avec l'assistance de l'IA)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!