addfilter wordpress企业网站seo优
ReactJs入门
一.前端开发四个阶段
1.静态页面阶段
- 这个阶段的前端网页都是静态的，前端仅仅是展示功能，js只是添加一些特殊效果，后端采取MVC模式
- Model：提供保存数据
- Controller：数据处理，实现业务逻辑
- View：展示数据，提供用户界面
2.ajax阶段
- ajax技术的诞生改变了前端开发，前端的作用不仅仅是展示页面，还可以管理数据与用户互动
3.前端MVC阶段
- 将MVC模式搬到前端，但是只有M(读写数据)和V(展示数据)，没有C(处理数据)
4.SPA阶段
- 前端可以做到读写数据，切换视图，用户交互，这意味着网页其实是一个应用程序，而不是信息的纯展示
- 前端开发从开发页面逐渐变成了开发前端应用
- 目前最流行的前端框架Vue，AngularJS，React，都属于SPA开发框架
二.ReactJS简介
- 是FaceBook开发的一个用于构建用户界面的JavaScript框架
- 组件化开发，使用MVC架构(类似于Vue.js)
- Flux：通过利用单向的数据流补充了React的组合视图组件
- Redux：提供可预测化的状态管理，使得共享变得简单
- Ant Design of React：提供了丰富的组件，按钮，日历，表格等
1.项目上手
- 1.新建一个web项目
- 2.初始化命令：tyarn init -y
- 3.添加umi依赖：tyarn add umi --dev
- 4.在项目根目录中创建config目录，在目录中下创建config.js文件(umi全局配置文件)
- 5.创建HelloWorld.js文件
- 6.umi dev运行，得到访问路径，到此hello world程序完成
- umi中，约定存放页面代码的文件夹是在src/pages
- umi中，使用约定式路由，在pages下的JS文件都会按照文件名映射到一个路由
- 项目添加umi-plugin-react插件：tyarn add umi-plugin-react --dev
- 插件中包含了13个常用的进阶功能
插件安装成功：
{"name": "itcast-React","version": "1.0.0","main": "index.js","license": "MIT","devDependencies": {"umi": "^3.5.20","umi-plugin-react": "^1.15.8"}
}
//引入该插件
export default {plugins: [['umi-plugin-react', {//暂时不启用任何功能}]]
};
- Hello World程序：
export default () => {return <div>hello React.js</div>;
}
2.项目部署
- 我们在ES6规范下的js代码，必须通过umi先转码才能够正常执行
- 最终发布的项目是普通的html，css，js
- 通过umi build命令部署项目
- 通过umi进行转码文件生成