• Stars
    star
    132
  • Rank 273,157 (Top 6 %)
  • Language
    TypeScript
  • License
    GNU Lesser Genera...
  • Created about 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🚀 TypeScript [ React + React-Router + Redux + Redux-Thunk ] Starter

typescript-react-starter

license forks stars issues

typescript-react-starter 是一个使用CRA编写的 TypeScript Starter 工程,集成了 [ React + React-Router + Redux + Redux-Thunk ],旨在为移动 Web 应用开发者提供 “开箱即用” 的 TypeScript 样板工程,开发者只需下载此项目,根据范例即可编写复杂大型的 React 应用。

Install

$ git clone [email protected]:icepy/typescript-react-starter.git
$ cd typescript-react-starter
$ yarn
$ npm start

使用浏览器访问 http://localhost:3000/。(更多命令可查看 package.json 的 scripts 字段)

工程结构

  • assets 放置图片等文件资源
  • components 放置被共享的组件
  • pages 放置页面级别的组件
  • services 放置本工程依赖的所有请求服务
  • store 放置本工程被管理的数据流
  • themes 放置本工程主题文件
  • third_party 放置依赖的第三方
  • typings 放置类型增强
  • shared 共享的集合
  • App.tsx 应用的容器文件
  • index.tsx 入口文件

函数式编程

函数式的好处,非常多,举例不拘。不管是样式还是组件逻辑,我们只有一个原则:组合,我们需要从这样的角度来考虑任何问题。

适配方案

基于iPhone 6来完成设计稿,即 1334 * 750,在编写的时候直接使用 px 单位即可。

必要的注释

img img

时间旅行&操作日志

操作的回溯让我们对某一个业务的变化了如指掌

img

Component

节点可以打上 tag 或 name,方便于任何一个人来理解业务

img

Profiler

优化是另一个问题,我们会基于此来展开优化,包括网络,资源文件,store 的大小,react 组合,分割等等方面。

img

img

远程回溯

这个事情就能做一个大系统

当用户端发生一个错误时,我们可以将当前节点的数据快照传输到服务端,然后进行错误分析。

CI/CD

我之前一直使用的是gitlab,所以CI/CD是基于 runner 做的。

LICENSE

GNU LESSER GENERAL PUBLIC LICENSE Version 3, 29 June 2007

More Repositories

1

flutter-book

📚《Flutter 入门指南》
Dart
300
star
2

chrome-extension-book

📚《Chrome Extension 入门指南》
JavaScript
197
star
3

flutter-dress

👚《Flutter 入门指南》演示应用-女装大佬
Dart
108
star
4

loseYourself

移动端 HTML5 仿 iOS UIPickerView
JavaScript
106
star
5

index-oa-template

钉钉 企业定制首页 Demo for Front End Project
JavaScript
95
star
6

kodo

React UI Library so easy used in mobile, Demo Style UI Url:http://imweb.github.io/sheral
JavaScript
87
star
7

article

⚡️闪电矿工翻译组-前端(front end developer)
C
58
star
8

cheerful

小巧的JavaScript与Native通信库(JavaScript端实现)
JavaScript
41
star
9

go-dingtalk

DingTalk Golang SDK https://github.com/icepy
Go
32
star
10

weex-dingtalk

Dingtalk Weex JSAPIs SDK
JavaScript
31
star
11

cm.logger

小巧的JavaScript错误捕获,日志展示,用于手机页面调试。
JavaScript
23
star
12

Mockingbird

Swift Scan Code
Swift
22
star
13

flutter_daydart

⏰ 具备 Moment.js 一样 API 的时间处理库
Dart
22
star
14

STNetWork

The Swift HTTP Library use a so esay API
Swift
22
star
15

openapi-nodejs-index-oa-template

钉钉 企业定制首页 Demo for Server Project
JavaScript
17
star
16

MissIMUI

IM聊天应用UI Demo
Objective-C
10
star
17

chat-0-3-flutter

Chat话题:使用 Flutter 完美开发你的移动应用程序(不建议再购买)
Dart
9
star
18

farm-platfrom

简单易用的 i18n 国际化编辑平台
TypeScript
7
star
19

hybrid-app-unzip

Ctrip Hybrid App Zip包解压更新策略Demo
Swift
6
star
20

glob-proxy

Ctrip node.js module HTTP proxy
JavaScript
6
star
21

douban-shell-app

douban 命令行 shell
Python
5
star
22

electron-easy-ipc

简单易用的 electron ipc 通信实现
TypeScript
5
star
23

coinhive-mining

(测试)罗门币挖矿
JavaScript
4
star
24

chat-0-1-dingtalk

Chat话题-从0到1快速开发钉钉企业内部微应用(内容过时,不建议购买)
JavaScript
2
star
25

react-easy-toast

可快速简单使用的 React Toast 组件
TypeScript
2
star
26

website

⚡️闪电矿工翻译组 Website 工程
TypeScript
2
star
27

used

Used.js是一个轻量级小巧的可运行在浏览器中的 JavaScript 函数库
TypeScript
2
star
28

simple

LeetCode(JavaScript)解题,两周一例;
TypeScript
1
star
29

NFT-Tutorial

Deploy a NFT project on Ethereum
JavaScript
1
star
30

flutter-book-demo

🚀《Flutter 入门指南》 演示 Demo
Dart
1
star
31

articles

⚡️闪电矿工翻译组 Website
HTML
1
star
32

downloadZIP

Ctrip Hybrid unpack tools :) Gui dowload zip and unpack webapp (mkdir)
Python
1
star
33

chat-0-4-npm

Chat话题:一文带你玩转 Node.js && 前端项目管理工具 --> NPM
JavaScript
1
star