网站标题 空格绍兴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进行转码文件生成