![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react webpack学习笔记
文章平均质量分 82
南太平洋_99
这个作者很懒,什么都没留下…
展开
-
React16 新特性总结
createPortalcreatePortal 的出现为 弹窗、对话框 等脱离文档流的组件开发提供了便利,Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。const modalRoot = document.body;class Modal extends React.Component { constructor(props) { ...转载 2020-01-08 13:45:02 · 456 阅读 · 0 评论 -
react相关知识点记录
1. async/await理解 JavaScript 的 async/awaitasync 的作用async 函数返回的是一个 Promise 对象如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象,直接可以用then() 链来处理这个 Promise 对象如果 async 函数没有返回值,会返回 P...原创 2019-10-29 15:03:33 · 206 阅读 · 0 评论 -
【小作品】react构建简单SPA(react+webpack+router+es6)
我将前段时间练手的demo用es6重写,路由使用React Router,使用webpack打包,构成了一个简单的单页面应用。url-loader来打包图片,file-loader来打包MP3文件package.json{ "name": "webpacktest", "version": "1.0.0", "description": "just for webp原创 2017-04-13 18:43:09 · 1950 阅读 · 1 评论 -
react学习笔记(2)
table{ border-collapse: collapse; border: 1px solid #000; width: 600px; margin: 20px auto; } th,td{ border: 1px solid #000; } tbody .active{ background-color: skyblue; } var namelist=[{ i原创 2017-03-15 21:31:07 · 371 阅读 · 0 评论 -
react学习笔记(1)
ReactDOM.renderReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。 ReactDOM.render( Hello Again, document.getElementById("example") );JSX语法原创 2017-03-13 20:34:29 · 397 阅读 · 0 评论 -
【demo】react+webpack音乐播放器
使用react+webpack做了一个简单的音乐播放界面使用H5的audio作为播放器音乐播放时唱片图片顺时针旋转,音乐停止时图片也停止旋转url-loader和file-loader 都是用于打包文件和图片一般限制小图片转 base64 可以用 url-loader,其他情况都用 file-loader。url-loader应该是file-loader上加了一原创 2017-04-11 10:59:24 · 2848 阅读 · 1 评论 -
React-Router 学习笔记
传统开发中的路由,是由服务端根据不同的用户请求地址 URL,返回不同内容的页面,而前端路由则将这些任务通过 JS 在浏览器端完成(前端路由有2种实现方式,一种是html5推出的historyapi,另一种是hash路由,就是常见的 # 号,这种方式兼容性更好)。SPA应用则是前端路由的最佳适用场景,因为它结构简单,只需更新页面部分显示内容也不必每次都从服务端获取内容。react-route原创 2017-04-08 17:53:13 · 1107 阅读 · 0 评论 -
【demo】React+Webpackt做一个微博发送表单
使用React实现一个微博发送表单表单的需求:(1)输入框获取焦点时,输入框边框变为橙色,右上角显示剩余字数的提示;输入框失去焦点时,输入框边框变为灰色,右上角显示热门微博。(2)输入字数小于且等于140字时,提示显示剩余可输入字数;输入字数大于140时,提示显示已经超过字数。(3)输入字数大于0且不大于140字时,按钮为亮橙色且可点击,否则为浅橙色且不可点击。GitH原创 2017-04-04 17:33:51 · 825 阅读 · 0 评论 -
【demo】使用React+Webpackt做一个简单的todolist
使用Reactk实现一个简单的todolist,实现基本的增删功能创建项目创建的todo主要采用node包的方式,使用webpack打包初始化项目并创建一些基础文件初始化项目之后,就需要安装所需要的库及其依赖。npm安装方式可以为开发环境或生产选择所安装的依赖。安装完所需要的依赖之后,配置webpack。webpack.config.js:var pat原创 2017-04-02 10:59:59 · 2298 阅读 · 1 评论 -
webpack填坑之路
昨天今天一直在捣腾react和webpack结合,巨坑。。。心累。。。昨天差点就要放弃了,可是晚上想想又不甘心。。。今天又来苦逼地看文档。。。总算有个初步的结果!(具体坑就不详细写了,又多又细又杂@-@)。因为电脑曾经安装过appcan,这家伙自带了node10.38版本,安装webpack需要node版本大于12,折腾了半天总算弄明白啥回事,果断卸载了appcan。webpackWe原创 2017-03-17 20:12:26 · 3791 阅读 · 1 评论