Pour configurer un projet à partir de zéro à l'aide de 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 :

src/index.jsx :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(, document.getElementById('root'));

src/App.jsx :

import React from 'react';

const App = () => {
  return (
    

      
Hello Shadcn!
    
  );
};

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)