标签：入门 config 前端 ReactJS js react umi 页面
前端开发的演变
到目前为止，前端的开发经历了四个阶段，目前处于第四个阶段。这四个阶段分别是：
阶段一：静态页面阶段
在第一个阶段中前端页面都是静态的，所有前端代码和前端数据都是后端生成的。前端只是纯粹的展示功能，js脚本的作用只是增加一些特殊效果，比如那时很流行用脚本控制页面上飞来飞去的广告 。
那时的网站开发，采用的是后端 MVC 模式。
- Model（模型层）：提供/保存数据
- Controller（控制层）：数据处理，实现业务逻辑
- View（视图层）：展示数据，提供用户界面
前端只是后端 MVC 的 V 。
阶段二：ajax阶段
2004年，A JAX 技术诞生，改变了前端开发。Gmail 和 Google 地图这样革命性的产品出现，使得开发者发现，前端的作用不仅仅是展示页面，还可以管理数据并与用户互动。
就是从这个阶段开始，前端脚本开始变得复杂，不再仅仅是一些玩具性的功能。
阶段三：前端MVC阶段
2010年，第一个前端 MVC 框架 Backbone.js 诞生。它基本上是把 MVC 模式搬到了前端，但是只有 M （读写数据）和 V（展示数据），没有 C（处理数据）。
有些框架提出了MVVM模式，用 View Model 代替 Controller。Model 拿到数据以后，View Model 将数据处理成视图层（View）需要的格式，在视图层展示出来。
阶段四：SPA阶段
前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。
2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。
目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。
ReactJS简介
官网： https://reactjs.org/
官方一句很简单的话，道出了什么是ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。
ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。ReactJS可以用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构。
ReactJS圈内的一些框架简介：
- Flux
- Flux是Facebook用户建立客户端Web应用的前端架构， 它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非框架
- Redux
- Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux可以让React组件状态共享变得简单
- Ant Design of React
- 阿里开源的基于React的企业级后台产品，其中集成了多种框架，包含了上面提到的Flux、Redux。
- Ant Design提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等
搭建环境
创建项目
我们依然选择使用UmiJS作为构建工具。
创建工程:
创建完工程后点击终端：
输入命令，进行初始化：
tyarn init -y
初始化完成：
看一下package.json:
在命令输入如下命令：
tyarn add umi --dev #项目中添加umi的依赖
编写HelloWorld程序
第一步，在工程的根目录下创建config目录，在config目录下创建config.js文件
在UmiJS的约定中，config/config.js将作为UmiJS的全局配置文件。
在umi中，约定的目录结构如下：
在config.js文件中输入以下内存，以便后面使用：
//导出一个对象，暂时设置为空对象，后面再填充内容
export default {};
第二步，创建HelloWorld.js页面文件
在umi中，约定存放页面代码的文件夹是在src/pages，可以通过singular:false来设置单数的命名方式，我们采用默认即可。
在HelloWorld.js文件中输入如下内容：
export default () => {
return <div>hello world</div>;
}
在这里，可以会比较奇怪，怎么可以在js文件中写html代码，其实，这是react自创的写法，叫JSX，后面我们再细
说。
第三步，启动服务查看页面效果
#启动服务
umi dev
可以看到，通过localhost:8000/HelloWorld路径即可访问到刚刚写的HelloWorld.js文件
在 umi 中，可以使用约定式的路由，在 pages 下面的 JS 文件都会按照文件名映射到一个路由，比如上面这个例子，访问 /helloworld 会对应到 HelloWorld.js。
当然了，也可以自定义路由，具体的路由配置在后面讲解 。
添加umi-plugin-react插件
umi-plugin-react插件是umi官方基于react封装的插件，包含了13个常用的进阶功能
具体可查看：https://umijs.org/zh/plugin/umi-plugin-react.html
#添加插件
tyarn add umi-plugin-react --dev
添加成功：
接下来，在config.js文件中引入该插件：
export default {
plugins: [
['umi-plugin-react', {
//暂时不启用任何功能
}]
]
};
构建和部署
现在我们写的js，必须通过umi先转码后才能正常的执行，那么我们最终要发布的项目是普通的html、js、css，那么应该怎么操作呢？
其实，通过umi是可以进行转码生成文件的，具体操作如下：
umi build
标签：入门,config,前端,ReactJS,js,react,umi,页面 来源： https://blog.csdn.net/weixin_44848645/article/details/112451320
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。