本模板工程为快速开发适配手机屏幕的网页而设计。 整合了React、mobx，能让开发者从搭建工程到发布做到开箱即用。

UI库建议使用MaterialUI

本文档大多内容来自官方文档，如需查看原版请点击这里

推荐编辑器

Visual Studio Code

目录

• 文件结构
• 可用的脚本
• 自定义WebPack配置
• 提交代码自动格式化
• 修改标题
• 异步加载组件
• CSS样式编写
• 引入图片、文件等资源
• 添加自定义的环境变量
• 调用接口
• 在开发中使用https
• 引用第三方JS
• 自定义Babel配置

文件结构

创建之后你会看到如下目录:

my-app/
  README.md
  node_modules/
  package.json
  server.js 
  public/
    index.html
    favicon.ico
  src/
    base-compoents/
    stores/
    transport-layer/
    pages/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

你可以在 src 下创建子目录. 当这个目录下内容用更改时，如果正在运行状态下，会触发快速自动构建。
JS和CSS就反正这个目录下。

public 目录存放入口文件 public/index.html,如果要引入第三方JS可以放在这个目录

server.js 发布时的服务器使用，主要用来代理跨域的接口。

可用的脚本

In the project directory, you can run:

yarn start 或者 npm start

App会以开发模式运行
会自动在浏览器打开 http://localhost:3000

每次你编辑文件后，这个页面都会自动重新加载

yarn test 或者 npm test

运行测试模式
See the section about running tests for more information.

yarn build 或者 npm run build

App构建出发布的文件到 build 目录.
现在你就可以将build目录下的文件发布到服务器上去了。

关于 发布 .

自定义配置

如果你先自定义webpack的配置，可以使用这个库rescripts

提交代码自动格式化

只有使用Git作为代码服务器时有效

使用以下插件 husky lint-staged prettier 实现在提交代码时，自动进行格式化 To format our code whenever we make a commit in git, we need to install the following dependencies:

修改标题

如果要修改网页标题，请在到public下的html中的<title>标签修改。 还可替换favicon.ico为自己的ico。 manifest.json中的信息也一并修改。

如果你想动态修改标题，请使用这个组件

异步加载组件

因为默认情况下，webpack会将引用到的包都打包到同一个JS文件中，所以可能入口js文件可能会很大。 为了使用之变小，在使用react-router打开组件时，请使用如下方法引入

const Login =loadable({loader: () => import('./pages/Login'),loading: MyLoadingComponent,})

<Route  path='/Login' component={Login}/> 

CSS样式编写

默认开启了CSS-Module功能（后缀为.module.css），所以不需要在样式前面添加 请用后缀.css

index.module.css

  .Button {
  padding: 20px;
}

index.js

import React, { Component } from 'react';
import styles from './index.module.css';  

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className={styles.Button} />;
  }
}

样式继承

请参考sass文档

VSCode 报错

如果你使用了上面的@value @composes,vscode会警告这个符号。请在设置中将css.validate设为false

引入图片等资源

为了减小Http的请求数目，在打包时webpack会将小于10k的图片直接转换成base64字符串放在html中。 目前只支持bmp,gif,jpg,jpeg,png

写法如下:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

  .Logo {
  background-image: url(./logo.png);
}

使用VSCode调试

本工程可以使用VSCode进行调试。但需要先安装这个Debugger for Chrome

添加自定义的环境变量

你可以在工程设置环境变量，好在JS、Html、CSS中使用，比如测试环境和正式环境需要不同的AppKey之类的。 默认的环境变量有 NODE_ENV ，它的值有development production test 分别对应运行的命令行yarn start yarn build yarn test。

环境变量的值会在打包阶段被动态的替换掉

设置环境变量

注意: 自定义的环境变量必须以 REACT_APP_ 开头.

1.文件内定义

可以在项目根目录下新建如下的文件（不同命令，会读取不同的文件）

• .env： 默认使用

• .env.local：用于本地变量覆盖，这个文件会在除了test环境的所有环境加载

• .env.development,.env.test,.env.production：在对应的环境加载

• .env.development.local,.env.test.local,.env.production.local：在对应的环境加载，最高优先级，会覆盖.env.*的配置 加载的优先级从高到低，依次为：

• npm start: .env.development.local, .env.development, .env.local, .env

• npm run build: .env.production.local, .env.production, .env.local, .env

• npm test: .env.test.local, .env.test, .env (注意没有 .env.local)

2.命令行直接设置

环境变量还可以在运行命令行的时候直接设置

• Windows(cmd.ext): set REACT_APP_SECRET_CODE=123&&npm start
• Mac: REACT_APP_SECRET_CODE=123 npm start

使用环境变量

render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
      </form>
    </div>
  );
}

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}

<title>%REACT_APP_WEBSITE_NAME%</title>

调用接口

请先到stores/RootStore.js中的_handleData方法中根据自己接口返回结果的格式情况，进行修改

由于现在都是前后的分离的，前端调用的接口都是跨域的，所以需要进行代理

在本地开发的时候，你只需要将相对路径配到./src/api/ApiUrl.js中即可。 例如：LOGIN: '/login'

然后修改src/setupProxy.js中的target值。 例如：

  "proxy": "http://localhost:4000",

这样配置后所有XHR请求都会被代理到本地的4000端口。

在开发中使用https

Windows (cmd.exe)

set HTTPS=true&&npm start

(Note: the lack of whitespace is intentional.)

Linux, macOS (Bash)

HTTPS=true npm start

引用第三方JS

node模块引用

使用npm安装后，直接在js文件中import即可。

单个JS文件引用

如果文件符合AMD/CMD规范可以直接import，如果不符合请在public/index.html中引入

自定义Babel配置(.babelrc中配置了打开装饰件的语法)

删除调.rescriptsrc.js中的注释即可