WP-React-Kit 项目教程

WP-React-Kit 项目教程

wp-react-kitA simple starter kit to work in WordPress with WordPress Rest API, WP-script, React, React Router, Tailwind CSS, PostCSS, Eslint, WP-Data, WP-Data Store, Typescript, React Components, i18n, CRUD, PHP OOP plugin architecture easily in a minute.项目地址:https://gitcode.com/gh_mirrors/wp/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"]
}

`webpack.config.js

wp-react-kitA simple starter kit to work in WordPress with WordPress Rest API, WP-script, React, React Router, Tailwind CSS, PostCSS, Eslint, WP-Data, WP-Data Store, Typescript, React Components, i18n, CRUD, PHP OOP plugin architecture easily in a minute.项目地址:https://gitcode.com/gh_mirrors/wp/wp-react-kit