网站建设 之 react ts

React 使用 JSX 来替代常规的 JavaScript。你也可以认为JSX其实就是JavaScript。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

jsx的变量与函数的区别

变量就是变量，直接使用

函数变成大写的HTML标签，就是如此。

JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

那么react函数的。。。

umi 会根据 pages 目录自动生成路由配置。但是路由为什么只出现在content的呢？它是如何注入的呢？

在Layout是直接注入的，那么谁在用Layout？

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
 |—— public                        //共享资源
└── src/                           // 源码目录，可选
    ├── assets                  // 静态资源
    ├── layouts/index.js           // 全局布局
    ├── models/global.js
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── a                      //按页面维度进行组织
            ├── index.js
            ├── models
                ├── a1.js
                ├── a2.js
            ├── services
                ├── a.js
        ├── b                      //按页面维度进行组织
            ├── index.js
            ├── model.js
            ├── service.js
        ├── 404.js                 // 404 页面  
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

看来这些东西是自动的，这就是umi！

路由需要改一下，fragment用不着路由