一个react + typescript的移动端demo工程
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
client
server
.gitignore
README.md
babel-presets.js
dev-constants.js
index.template.ejs
nodemon.json
package-lock.json
package.json
pm2.yml
postcss.config.js
server.config.js
tslint.json
upyun-deploy.js
upyun.config.js
webpack.base.conf.js
webpack.client.dev.conf.js
webpack.client.prod.conf.js

README.md

react-typescript-mobile-seed

本工程基于实际项目简化而来,已去除相关业务代码与公司内部服务相关的配置或改写,如:

  1. 源项目的dll是使用公司内网的webpack dll云打包服务,由于改造成本过高,故去除
  2. 又拍云配置以及上传静态资源的代码从私有源迁移至项目中
  3. 省略配置文件的拉取过程, server.config.js以及upyun.config.js会与环境不同而不同,这里仅做演示,实际项目应由配置中心管理,早项目部署时或运行时根据适当的策略去拉取。

推荐使用vscode进行开发,理由:

  1. scopde CSS方案使用的是 styled-jsx, vscode上有相应的插件支持 vscode-styled-jsx.
  2. vscode对tslint支持较友好(webstorm也还不错)

安装依赖

npm install

开发

npm start

命名

  • 所有文件名统一小写,间隔符使用-
  • 所有react组件类名大写开头

路径别名

别名的目的是减少书写繁琐度。

本工程支持以client开头的别名,这一个已足够使用,比如components:

import Component from 'client/components/Component'

其他如assets, pages, utilsclient下的目录都可同理引入。

路由配置

pages目录下新建一个目录,代表一个顶级页面,新建routes.tsx, 用于配置当前路由的所有子路由。 页面级组件命名为container.tsx,如果还有子路由,与container.tsx同级再新建一个目录。

本工程已支持异步路由,比如index的路由:

import * as React from 'react';
import { Route } from 'react-router-dom';
import asyncComponent from 'client/utils/async-component';

export default [
  <Route
    key="index" exact path="/index"
    component={asyncComponent(import('./container') as any)} />,
];

CSS方案

对于外部样式,stylus或css均支持。

为避免ts的编译错误,使用require方式引入:

require('client/assets/app.styl')
require('client/assets/app.css')

对于scoped样式,使用如下方式:

render() {
  return (
    <div>
      <header key="header" className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h3 className="App-title">Welcome to React!</h3>
        <Sub></Sub>
      </header>
      <style jsx>{`
        .App-header {
          h3 {
            color: red;
            &:hover {
              color: green;
            }
            transition: all .4s;
            height: 20px;
          }
        }
      `}</style>
    </div>
  )
}

详细文档请参考styled-jsx, 已引入styled-jsx-plugin-stylusstyled-jsx-plugin-postcss

外部与scoped样式均已支持autoprefixer, pxtorem, cssnano三个postcss插件。

网络请求

import axios from 'axios'

axios.get('/xxx')
  .then((data) => {
    // data即为后端返回的数据
  })

模块热替换

目前仅支持css的热替换,ts更新后会自动刷新浏览器。官方也是推荐这样做,也许未来对ts/js的热替换会有更好的支持。