好久没有写博客，有空再来记一下。最近在整些小东西，需要用到前端，最开始本着对nodejs的动不动几百兆插件的恐惧, 于是使用自己以前写的 OSS.Pjax 小框架（类似国外的Pjax，利用pushState达到单页的效果），表单配合jQuery凑合一下，有兴趣的可以看下我github上的OSS.Core.AdminUI 。不过本着学习精神，还是额外挑战了下React（主要是冲着AntDesignPro去的，公司团队已经在使用），结果这么稍微深入了解一下，还真没能逃掉真香定律。这篇文章主要借我个人经验，梳理前后学习过程涉及知识点，希望可以帮助有需要的同学，特别是一直奋战在服务端但希望了解前端的同学。
1. 基础相关涉及知识
2. React及相关扩展框架认识
3. AntDesign 相关开发框架
4. Umi下AntDesignPro项目配置
5. .NetCore项目下集成调试
在开始下边之前，先贴一个涉及相关框架的图：
一. 基础相关涉及知识
碰上新框架，不少同学的学习路径直接就从入门到放弃了。这里让我们首先在战略上轻视它，毕竟只是一个交互界面实现工具，万变不离其宗，还是要落地到CSS，HTML，JS这些基础实现上。重点在于，这个工具在这些基础实现之上做了哪些改进，为了这些改进引入了哪些新的支撑。首先基础层面的认知必须清晰。
这里我们先关注下JS相关概念，有些名称（如：ES5, ES6, ES2016）可能上来就把很多人整蒙了。这些和JS有何关联，我们先来梳理一下。JS最早随网景浏览器发布，后来交由一个ECMA的组织制定统一标准，其他的浏览器依此提供js支持。ES5、ES6就是这些标准的版本，其定义了JS的相关语法标准规范。粗暴点理解，一个标准规范，一个规范的具体实现。特别是后边的TypeScript，在语法上自然是实现了相关标准，于此同时它又引入了类、接口、泛型等其他高级语言特性，特别是类型检查特性等，使得代码更加可控和模块化，所以它又称为JS的超集，因为浏览器支持的是JS规范，所以TypeScript最终编译成JS代码运行。
如果你还没有使用过TypeScript，不必急于学习，后续继续使用JS也是OK的。如果你想去学习了解，也挺简单，不容易理解的可能集中在部分复杂的类型处理，这块和静态语言最大的不同就是类型结构是可以动态创建的，也可以了解下它本身提供的Pick，Exclude，Omit 几个高级类型的使用。
前端历史悠久，除了JS，还有CSS、HTML也有了长足发展，以至于横跨不同浏览器，上下不同版本，能够做到的支持各不相同。这么多新特性使用起来给开发人员带来相当的压力，开发过程中畏手畏脚，多少同学为了兼容而身心疲惫。还好有那么一群好心人做了各种兼容处理类库，这些包对新特性，新语法进行包装或转换，使得最终的代码能够在低版本的浏览器中运行。比如Babel，通过编译，生成新的低版本代码。当项目中使用了很多类库之后，相互间的引用依赖，编译顺序，生成代码压缩等又成为新的问题，于是我们又引入了Webpact这类用来打包的工具类库，通过各种配置用来处理打包压缩等处理。
有了这些工具类库，给了我们能够使用新特性的机会，又尽可能做到向下的兼容支持。作为类库必须能够广泛传播复用，肯定需要一个统一可靠的管理平台，这时就引入了Nodejs的npm包管理器，Nodejs本身不过多说明，我们先了解它就是一个能够让JS脱离浏览器直接运行的环境，npm就是在集成在这个环境中包的上传下载管理等命令引擎，类似.Net 的Nuget，Java的Maven。有了这个管理器，我们可以在项目中方便的通过npm命令安装或运行对应的类库包。
二. React及相关扩展框架认识
1. React
具体语法等请参见官方文档，我们先认识其重要的核心组成部分。
首先，我们要建立一个基础认知，React也只是一个JS类库，个人理解其核心包含两大块：
1.1 语法层面
通过对JS进行扩展的JSX语法，完成对UI交互的包装渲染，类似Babel，这些语法最终通过解释器转换成浏览器可执行的基础代码。