初识React全家桶
react全家桶包括技术栈及框架如下:
- react:
- webpack
- react-router
- redux
- bable
- webpack-dev-server
一、react:
react起源于facebook的内部项目。react的出现是革命性的创新,react是一个颠覆性的前端框架。在react官方这样介绍它:一个声明式、高效的、灵活的、用于创建用户界面的javascript库。是一个前后端通吃的webapp解决方案。
react声明式特点减少了操作DOM的性能损耗,同时利用项目的解耦及组件化的开发思想,更便于开发人员相互配合及组件代码复用。内部实现的虚拟DOM和DOM diff算法使DOM的操作变得高效。
二、webpack
由来:由于前端之前js、css、图片等项目资源都需要独立打包和压缩,这样很繁琐,然而Instagram团队想让这些工作自动化,webpack应用而生。
介绍:webpack是一个模块打包器(module bundler),webpack视HTML,JS,CSS,图片等文件都是一种 资源 ,每个资源文件都是一个模块(module)文件,webpack就是根据每个模块文件之间的依赖关系将所有的模块打包(bundle)起来。
作用:
- 对 CommonJS 、 AMD 、ES6的语法做了兼容
- 对js、css、图片等资源文件都支持打包(适合团队化开发)
- 比方你写一个js文件,另外一个人也写一个js文件,需要合并很麻烦,现在交给webpack合并很简单
- 有独立的配置文件webpack.config.js
- 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
- 具有强大的Plugin(插件)接口,大多是内部插件,使用起来比较灵活
三、react-router
介绍:用于界面跳转。
React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。
React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom。
四、redux
介绍:是一个极其简单的状态管理框架,清晰的描述应用的状态。
几个概念性词汇:
action:定义发送及接收的事件名称
reducer:就是一个函数,计算view新状态的过程函数
store:用于创建reducer函数,维持应用的state;getState()方法获取state;提供 dispatch(action)
触发reducers
方法更新 state
;通过 subscribe(listener)
注册监听器; 通过 subscribe(listener)
返回的函数注销监听器。
五、bable
javascript转译器,为什么会有babel存在呢?原因是javascript在不断的发展,但是浏览器的发展速度跟不上。以es6为例,es6中为javascript增加了箭头函数、块级作用域等新的语法和 Symbol、Promise等新的数据类型,但是这些语法和数据类型并不能够马上被现在的浏览器全部支持,为了能在现有的浏览器上使用js新的语法和新的数据类型,就需要使用一个转译器,将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。
六、webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能:
- 为静态文件提供服务
- 自动刷新和热替换(HMR)
初识React全家桶相关推荐
- React全家桶之构建应用-姜威-专题视频课程
React全家桶之构建应用-1475人已学习 课程介绍 课程延续<React全家桶之WEB基础应用>,课程从webpack构建的react应用开始讲起,通过讲解动画机制,路 ...
- 从零搭建React全家桶框架教程
从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...
- react全家桶从0到1(react-router4、redux、redux-saga)
本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解, ...
- 使用react全家桶制作博客后台管理系统
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...
- react全家桶实现招聘app-项目准备(一)
1.1 项目技术 a. 使用react全家桶 + es6 + webpack + antd-mobile b. 采用模块化.组件化.工程化 c. Node + express + mongodb + ...
- 初学者的React全家桶完整实例
概述 该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系.我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...
- React全家桶项目
开篇 利用业余时间,做了个React项目,算是成品吧,比较简单,还有很多瑕疵.目录结构相当简单.没有数据库,你们运行不起来.想运行起来的话,把express调用数据库的部分全删掉,写死数据. ak47 ...
- 视频教程-React 全家桶从入门到实战到源码-其他
React 全家桶从入门到实战到源码 上市公司前端开发工程师,专注于 React 技术栈,对 React 全家桶从 react-router 路由到 Redux 状态管理工具再到 webpack 打包 ...
- React全家桶写一个CNode社区,奉上心得与源码
webpack2+react+react-router+react-redux+ES6+antd-mobile版本的Cnode 苦于我就职的公司的技术栈还是ES5+jQ+handelbars, 而我一 ...
最新文章
- Linux常用命令--网终设置
- 学习LINUX的几点注意事项
- mac 开机执行命令
- Android判断Service是否运行
- This is a Blog Test
- 获取电脑和操作系统信息-uname
- data-role参数表:
- node 获取mysql数据类型,node连接mysql获取数据
- Kubernetes入门指南
- 百万数据php7取出循环_Thinkphp5 分批批量导出百万条数据记录的Code,不用PHPEXCEL哦!...
- [CENTOS7] [IPTABLES] 卸载Firewall Id安装 IPTABLES及防火墙设置
- java只修改变的字段_修改Java中的最终字段
- android studio for android learning (十七) Toast使用详解
- hdu4699(对顶栈模拟+简单dp)
- linux征途架设教程,Linux下征途私服架设详细教程
- 【翻译】混沌网+SkyWalking:为混沌工程提供更好的可观察性
- 数据监控体系是什么?该怎么搭建?
- 将海康大华宇视等网络摄像机RTSP流采用websecket和H5进行RTSP网页无插件直播点播的技术方案
- 关于爱情,每个人都有话说
- Pycharm的快捷键