05 2017 档案
摘要：React Router参数传递 从Header中跳转到list传递数值。 利用在root.js中设置中path="list/id:"。这个为定义的方法 在list中用{this.props.params.id}获取从Header路由传递过来的值 Header中使用
阅读全文
摘要：React Router概念 由于对于新版的Router的不熟悉，这节开始转向Router2和webpack1，等待React Router4理解后，我会更新这几章 Router 以上Router采用的是Router2 Router中文是路由的意思。 路由库React Router。它是官方维护的，
阅读全文
摘要：CSS模块化 "babel plugin react html attrs": "^2.0.0"让JSX中className能变回原来class webpack要重新配置 // webpack.config.js var webpack = require("webpack"); var path
阅读全文
摘要：內联式样中的表达式 import React from 'react'; export default class CompomentHeader extends React.Component{ constructor(){ super(); this.state ={ miniHeader:fa
阅读全文
摘要：独立组件间共享 Mixins ES6不支持Mixin，所以需要相插件来进行支持，npm install save react mixin@2 测试一下Mixin是如何运行的 在src/js/components下创建mixins.js const MixinLog = { componentDidM
阅读全文
摘要：React 內联式样 通过header.js演示JSX样式控制,直接內联到标签中的style import React from 'react'; export default class CompomentHeader extends React.Component{ render(){ cons
阅读全文
摘要：组件Refs(操作DOM的2⃣️两种方法) 第一种方式 var mySubmitButton = document.getElementById('submitButton'); console.log(mySubmitButton); ReactDOM.findDOMNode(mySubmitBu
阅读全文
摘要：可复用组件 类定义完后，追加属性propTypes传入参数userid:React.PropTypes.number，规定userid是一个数字型，如果传入字符型和其他的非数字型，都会报错。 给页面传入默认值 const defaultProps ={username:'这是一个默认的用户名'//默
阅读全文
摘要：事件与数据的双向绑定 bodyIndex.js代码 import React from 'react'; import BodyChild from './bodychild' export default class BodyIndex extends React.Component { cons
阅读全文
摘要：Props属性 Props事例 index.js代码 ... render() { return ( ) } ... bodyIndex.js代码 import React from 'react'; export default class BodyIndex extends React.Comp
阅读全文
摘要：State属性 state状态 state 是组件内部的属性。组件本事是一个状态机，它可以在constructor中通过this.state直接定义它的值，然后根据这些值来渲染不同的UI。当state的值发生改变时，可以通过this.setState方法让组件再次调用render方法，来渲染新的UI
阅读全文
摘要：1.组件首次加载 getDefaultProps只会在装载之前调用一次，在组件中赋值的数据会被设置到this.props中。 getInitialState只会在装载之前调用一次，这个函数的返回值会被设置到this.state中，需要注意的是，在ES6的写法，只需写在constructor中即可，如
阅读全文
摘要：生命周期 每个生物😯都有它的生命周期，从出生🐣、少年、成年再到死亡。同理组件也有它特定的生命周期，React用不同的方法来描述它的整个生命周期。现在，要稍微修改一下组件的代码，当组件加载完毕1秒以后，使like的值自动加1 ... componentDidMount(){ setTimeout(
阅读全文
摘要：JSX内置表达式 JSX 在render方法中有一种直接把HTML嵌套在JS中的写法，它被称为JSX。这种写法类似XML，它可以定义HTML一样简洁的树状结构。这种语法结合了JavaScript和HTML的优点（我理解模版化我们编写的程序，这就是React的初衷）既可以像平常一样使用HTML，也可以
阅读全文
摘要：React多组件嵌套 webpack dev server环境运行起来,这里主要是明白了React如何做嵌套 src/js/components下创建header.js书写代码✍️ import React from 'react'; import ReactDOM from 'react dom'
阅读全文
摘要：HTML标签与React组件 React可以直接渲染HTML类型的标签，也可以渲染React的组件 HTML类型的标签第一个字母用小写来写表示。 import React from 'react'; //当一个标签里面为空的时候，可以直接使用自闭和标签 //注意class是一个JavaScript保
阅读全文
摘要：React组件 组件是React的基石，所有的React应用程序都是基于组件的。 之前React组件，使用React.createClass来进行声明 var List = React.createClass({ getInitialState: function(){ return['a','b'
阅读全文
摘要：React虚拟DOM概念 虚拟DOM的结构 在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。如果当前 DOM 结构较为复杂，频繁的操作很可能会引发性能问题。React 为了解决这个问题，引入了虚拟 DOM 技术。 虚拟 D
阅读全文
摘要：React开发相关Atom插件配置 在Packages中直接安装，这几个比较不错的插件！！！ atom ternjs atom beautify open in browser emmet file icons highlight line highlight selected
阅读全文
摘要：WebPack 热加载配置(下) webpack dev server的使用 不用每次都去用WebPack一遍 webpack watch自动监听编译，但是需要手动刷新浏览器 如果采用在Mac终端中项目根目录下webpack dev server这样可以浏览器中自动刷新，一边写代码，保存后自动刷新。
阅读全文
摘要：WebPack 热加载配置(中) 采用WebPack2进行打包 WebPack2安装sudo npm install g webpack WebPack dev server安装sudo npm install g webpack dev server 全局安装完后进行项目目录下的安装！！！！（安装
阅读全文
摘要：WebPack 热加载配置(上) 创建index.html 123 （这里会出现一个问题就是关于src中的bundle.js地址的问题，如果是使用src/bundle.js就会出现webpack server无法更新的情况，我想原因是在与WebPack配置文件中我们定义了文件读取的绝对路径） 在项目
阅读全文
摘要：使用NPM配置React 建立项目后，cd到项目目录，用npm init做项目的初始化，会在目录下产生一个package.json文件 然后开始安装React$ sudo npm install save react react dom babelify babel preset react 安装完
阅读全文
摘要：NPM配置国内源 如果你不会FQ，或者经常NPM装不上东西，可以试一下国内的NPM镜像 这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。 方法一,定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm $
阅读全文
摘要：NodeJS简介 Node.js®是一个基于Chrome V8 JavaScript引擎构建的JavaScript运行时。 Node.js使用事件驱动的非阻塞I / O模型，使其轻便且高效。 Node.js的包生态系统，npm，是世界上最大的开源生态系统。 NPM命令，NPMJS有强大的库，存放着各
阅读全文
摘要：React Starter Pack 下载使用与React初体验 新版的React没有演示文件，03 02是使用的React 15.3.2 03 02中有一些举例 在examples／basic／下index.html是一个事例可以研究一下,这个地方体现了React在页面上的高性能的优点 var E
阅读全文
摘要：React简介 React 是近期非常热门的一个前端开发框架，其本身作为 MVC 中的 View 层可以用来构建 UI，也可以以插件的形式应用到 Web 应用非 UI 部分的构建中，轻松实现与其他 JS 框架的整合，比如 AngularJS。同时，React 通过对虚拟 DOM 中的微操作来实对现实
阅读全文
摘要：webpack处理项目中的资源文件 loader：可同步可异步，可在nodejs里使用，可带参数，可让webpack去执行它不支持的东西 例如我们之前用到的style loader，常用的方式是在webpack.config.js中加loader配置 安装babel loader： npm inst
阅读全文
摘要：同源策略 ajax之所以需要“跨域”，罪魁祸首就是浏览器的同源策略。即，一个页面的ajax只能获取这个页面相同源或者相同域的数据。 如何叫“同源”或者“同域”呢？——协议、域名、端口号都必须相同。例如： http://google.com 和 https://google.com 不同，因为协议不同
阅读全文
浙公网安备 33010602011771号