Web Frontend: React.js Tutorial

[hhstore]

related:

• Nodejs #201
• TypeScript: Tutorial #268 : TypeScript 教程
• Electron #186 : Electron
• App Development Plan: UI Layout #121 : App UI

[hhstore]

react.js 教程:

官方:

• https://github.com/facebook/react
• https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

教程:

• https://www.runoob.com/react/react-tutorial.html
• https://zh-hans.reactjs.org/tutorial/tutorial.html

Cheat Sheet:

• https://github.com/vincsb/react-cheat-sheet
• https://github.com/oclipa/reactjs-cheat-sheet

JSX:

• https://facebook.github.io/jsx/

TSX:

• https://www.tslang.cn/docs/handbook/jsx.html
• https://jkchao.github.io/typescript-book-chinese/jsx/reactJSX.html
• https://www.typescriptlang.org/docs/handbook/jsx.html
• TSX 是依赖 JSX.

[hhstore]

搭建开发环境:

脚手架: vite

• vite: https://github.com/vitejs/vite
• https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
• Vite 需要 Node.js 版本 >= 12.0.0

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

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

社区 vite repo 模板:

• https://github.com/vitejs/awesome-vite#templates
• react 相关: https://github.com/vitejs/awesome-vite#react
• https://github.com/wtchnm/Vitamin

项目目录规范:

• 参考 antd 的目录结构:
• https://pro.ant.design/zh-CN/docs/folder

├── 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    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码

• https://umijs.org/zh-CN/docs/directory-structure

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

[hhstore]

React MobX:

• https://github.com/mobxjs/mobx
• https://mobx.js.org/installation.html

中文文档:

• https://cn.mobx.js.org/

yarn add mobx

npm install --save mobx

ref:

• https://juejin.cn/post/6956097243644428318

[hhstore]

React Redux:

• https://cn.redux.js.org/docs/react-redux/
• 不好用. 少用.

npm install --save react-redux

[hhstore]

CSS 样式集:

• https://www.zhihu.com/question/337939566
• 替代 CSS 的方案.

Tailwind CSS:

• https://www.tailwindcss.cn/
• https://tailwindcss.com/
• 首选

好心人写好的样式参考:

• https://tailblocks.cc/

其他:

• https://bulma.zcopy.site/

SASS: 主流选择

• https://github.com/sass/sass

弃用:

LESS: 已弃用

• https://github.com/less

[hhstore]

react UI 框架:

mui (Material UI):

• https://mui.com/zh/components/floating-action-button/

• 搭配: styled-components

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

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

• 组件列表: https://mui.com/zh/getting-started/supported-components/
• CDN: https://mui.com/zh/getting-started/installation/#cdn

示例参考:

• https://mui.com/zh/getting-started/example-projects/

antd:

• https://pro.ant.design/zh-CN/docs/folder
• https://ant.design/docs/react/introduce-cn
• https://umijs.org/zh-CN/docs