To set up a project from scratch using React, Tailwind CSS, and Shadcn, but without using any pre-built boilerplates like create-next-app or create-react-app, you can manually configure the setup using Webpack or other similar bundlers. Below is a guide for setting this up with Webpack:
Step 1: Initialize an npm Project
Create a new project directory and initialize a new npm project:
mkdir my-shadcn-app
cd my-shadcn-app
npm init -y
登录后复制
Step 2: Install React and Dependencies
Install React, ReactDOM, webpack, and 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
登录后复制
Step 3: Install Tailwind CSS
Install Tailwind CSS and its peer dependencies:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
登录后复制
This creates the tailwind.config.js file.
Step 4: Configure Webpack
Create a webpack.config.js file for configuring Webpack:
touch webpack.config.js
登录后复制
Inside webpack.config.js, add the following:
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,
},
};
登录后复制
Step 5: Configure Babel
Create a .babelrc file for Babel configuration:
Inside .babelrc, add the following:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
登录后复制
Step 6: Configure Tailwind CSS
Update your tailwind.config.js file to include the paths to your components:
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
extend: {},
},
plugins: [],
};
登录后复制
Step 7: Set Up Your Project Structure
Create the necessary folders and files for your React application:
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;
登录后复制
Step 8: Install Shadcn Components
Now that you have the basic setup, install the Shadcn package and its components. Install the Shadcn CLI and Tailwind components for your React project:
Follow the on-screen instructions to install components and generate the Shadcn library for your project.
Step 9: Update npm Scripts
Update your package.json to add a start script to run the Webpack development server:
"scripts": {
"start": "webpack serve --open"
}
登录后复制
Step 10: Start the Development Server
Run the development server with:
This should open up your app in the browser, and you'll see "Hello Shadcn!" styled with Tailwind CSS. You can now continue adding Shadcn components to your React project.
(Generated with AI assistance)
以上是How to start a Shadcn project from scratch的详细内容。更多信息请关注PHP中文网其他相关文章！
