search

hhstore / blog

My Tech Blog: about Mojo / Rust / Golang / Python / Kotlin / Flutter / VueJS / Blockchain etc.
https://github.com/hhstore/blog/issues
277 stars 22 forks source link

Web Frontend: React.js Tutorial #269

Open hhstore opened 3 years ago

hhstore commented 3 years ago

related:

hhstore commented 3 years ago

react.js 教程:

官方:

教程:

Cheat Sheet:

JSX:

TSX:

hhstore commented 3 years ago

搭建开发环境:

脚手架: vite

# yarn
yarn create vite my-vue-app --template vue

# yarn
yarn create vite my-app --template react-ts

社区 vite repo 模板:

项目目录规范:


├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json


src
├── components
└── pages
    ├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
    |   ├── Form.tsx
    |   ├── index.tsx  // 页面组件的代码
    |   └── index.less // 页面样式
    ├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── index.tsx
    |   └── index.less
    ├── user           // 一系列页面推荐通过小写的单一字母做 group 目录
    |   ├── components // group 下公用的组件集合
    |   ├── Login      // group 下的页面 Login
    |   ├── Register   // group 下的页面 Register
    |   └── util.ts    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码

.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx
    ├── pages
        ├── index.less
        └── index.tsx
    └── app.ts
hhstore commented 3 years ago

React MobX:

中文文档:

yarn add mobx

npm install --save mobx

image

ref:

hhstore commented 3 years ago

React Redux:

npm install --save react-redux
hhstore commented 3 years ago

CSS 样式集:

Tailwind CSS:

好心人写好的样式参考:

其他:

SASS: 主流选择

弃用:

LESS: 已弃用

hhstore commented 3 years ago

react UI 框架:

mui (Material UI):


// 使用 yarn 安装
yarn add @mui/material @mui/styled-engine-sc styled-components

// SVG 图标
// 使用 yarn 安装
yarn add @mui/icons-material

示例参考:

antd: