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:03636parcourir

How to start a Shadcn project from scratch

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!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre les prototypes en JavaScript : l'épine dorsale de l'héritageArticle suivant：Comprendre les prototypes en JavaScript : l'épine dorsale de l'héritage

Articles Liés

Voir plus