WP-React-Kit 项目教程
1. 项目的目录结构及介绍
WP-React-Kit 是一个用于 WordPress 插件开发的简单启动工具包,结合了 WordPress Rest API、React、React Router、Tailwind CSS、PostCSS、Eslint、WP-Data、TypeScript 等技术。以下是项目的目录结构及介绍:
wp-react-kit/
├── src/
│ ├── blocks/ # Gutenberg 区块
│ ├── components/ # React 组件
│ ├── styles/ # 样式文件
│ ├── index.tsx # 项目入口文件
│ └── ...
├── composer.json # PHP 依赖管理
├── package.json # Node 依赖管理
├── postcss.config.js # PostCSS 配置
├── tailwind.config.js # Tailwind CSS 配置
├── tsconfig.json # TypeScript 配置
├── webpack.config.js # Webpack 配置
└── ...
2. 项目的启动文件介绍
项目的启动文件是 src/index.tsx
,这是整个 React 应用的入口点。它负责初始化 React 应用并将其挂载到指定的 DOM 元素上。以下是 index.tsx
的基本结构:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
3. 项目的配置文件介绍
composer.json
用于管理 PHP 依赖,定义了项目所需的 PHP 包和脚本。
{
"name": "maniruzzamanakash/wp-react-kit",
"description": "A simple starter kit for WordPress plugin development",
"require": {},
"scripts": {
"test": "phpunit"
}
}
package.json
用于管理 Node.js 依赖,定义了项目所需的 JavaScript 包和脚本。
{
"name": "wp-react-kit",
"version": "1.0.0",
"scripts": {
"start": "webpack serve --config webpack.config.js --mode development",
"build": "webpack --config webpack.config.js --mode production"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"tailwindcss": "^2.2.19"
},
"devDependencies": {
"@types/react": "^17.0.30",
"@types/react-dom": "^17.0.9",
"typescript": "^4.4.4",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
postcss.config.js
用于配置 PostCSS,定义了使用的插件和选项。
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
tailwind.config.js
用于配置 Tailwind CSS,定义了自定义的样式和主题。
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false,
theme: {
extend: {}
},
variants: {
extend: {}
},
plugins: []
};
tsconfig.json
用于配置 TypeScript,定义了编译选项和文件包含规则。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "es2015"],
"jsx": "react",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src"]
}