React Rewards 项目教程

React Rewards 项目教程

react-rewardsA package containing a few micro-interactions you can use to reward your users for little things and make them smile!项目地址:https://gitcode.com/gh_mirrors/re/react-rewards

1. 项目的目录结构及介绍

React Rewards 项目的目录结构如下：

react-rewards/
├── dist/
│   ├── react-rewards.js
│   ├── react-rewards.es.js
│   ├── react-rewards.d.ts
├── src/
│   ├── components/
│   ├── index.ts
├── package.json
├── rollup.config.js
├── tsconfig.json

目录介绍

• dist/：包含编译后的文件，包括 CommonJS 和 ES 模块格式的 JavaScript 文件以及类型定义文件。
• src/：源代码目录，包含组件和入口文件。
  • components/：存放 React 组件。
  • index.ts：项目的入口文件。
• package.json：项目的配置文件，包含依赖、脚本等信息。
• rollup.config.js：Rollup 的配置文件，用于打包项目。
• tsconfig.json：TypeScript 的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它是整个项目的入口点。该文件导出了主要的组件和功能，供其他项目引用。

// src/index.ts
export { default } from './components/Reward';

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的基本信息、依赖、脚本等配置。

{
  "name": "react-rewards",
  "version": "2.0.3",
  "description": "This package lets you easily add micro-interactions to your app and reward users with the rain of confetti emoji or balloons",
  "author": "thedevelobear",
  "license": "MIT",
  "main": "dist/react-rewards.js",
  "jsnext:main": "dist/react-rewards.es.js",
  "module": "dist/react-rewards.es.js",
  "types": "dist/react-rewards.d.ts",
  "homepage": "https://github.com/thedevelobear/react-rewards",
  "repository": {
    "url": "https://github.com/thedevelobear/react-rewards"
  },
  "keywords": [
    "react",
    "react-rewards",
    "confetti",
    "emoji",
    "balloons",
    "cannon",
    "microinteractions",
    "micro-interactions",
    "UI",
    "UX"
  ],
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "lint": "eslint /src",
    "lint:fix": "eslint /src --fix",
    "prepublish": "yarn lint && rm -rf dist && NODE_ENV=production yarn build"
  },
  "peerDependencies": {
    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
  },
  "files": [
    "dist"
  ],
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/eslint-parser": "^7.17.0",
    "@babel/preset-react": "^7.16.7",
    "@rollup/plugin-commonjs": "^21.0.2",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@rollup/plugin-typescript": "^8.3.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.39",
    "@typescript-eslint/eslint-plugin": "^5.13.0",
    "@typescript-eslint/parser": "^5.13.0",
    "esbuild": "^0.14.27",
    "eslint": "^8.10.0",

react-rewardsA package containing a few micro-interactions you can use to reward your users for little things and make them smile!项目地址:https://gitcode.com/gh_mirrors/re/react-rewards