-
新版本需要注意的地方： 1，js文件引用换成最新的 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 2， <script type="text/jsx"> 换成<script type="text/babel"> 3，var tipE = React.findDOMNode(this.refs.tip); 换成var tipE = ReactDOM.findDOMNode(this.refs.tip); 4,React.render 换成ReactDOM.render查看全部
-
1. JSX 实际上是一种语法糖，写法类似原生的HTML 嵌套一些JS 变量，其中的JS 变量部分需要用一对大括号包括（如视频里的`{this.props.name}`）。JSX 最终会由解析器编译成真正的JS（视频里没讲到的是，JSX 并不是必须的，需要渲染的内容完全可以直接用JS 写）； 2. JSX 中如果要为标签设置类属性，其名称应为`className`；因为`class`是JS 里的关键字（JSX 只是语法糖，最后要被编译成JS，所以要考虑JS 的语法约束）； 3. JSX 中为标签设置样式属性，属性值应为一个对象；由于对象的字面量形式包括一对大括号，所以实际写法应该是`style={{color: "red", fontSize: '16px'}}`。注意到这里定义字体大小用的是`fontSize`而不是`font-size`，因为JS 操作CSS 属性名就是以驼峰形式的。查看全部
-
stopPropagation()停止事件冒泡 preventDefault()停止事件默认行为 React.findDOMNode(this.fess.<ref属性的值>): 索引子组键的dom元素 新版本需要注意的地方： 1，js文件引用换成最新的 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 2， <script type="text/jsx"> 换成<script type="text/babel"> 3，var tipE = React.findDOMNode(this.refs.tip); 换成var tipE = ReactDOM.findDOMNode(this.refs.tip); 4,React.render 换成ReactDOM.render查看全部
-
“罐头是1810发明出来的，可是开罐器呢，却在1858年才发明出来。有时就是这样，重要的东西可能迟来一步，但却一定会到。生活和爱情，都是如此。程序，当然也不例外。 所谓，粉墨登场，演进几番，风云更迭，西皮二黄，多少聚散于圆缺。查看全部
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>查看全部
-
js部分：first-引入JSX语法糖对应的解析JS，以及react.js库 <Script src="JSXTransformer.js"></Script>/*注意，0.14之后，依赖库已经改为browser.js*/ 然后写JSX的Script标签内的type要改 <Script type="text/jsx">/*注意，0.14之后，标签已经改为text/bable*/ var Hello = React.createClass({ render: function(){ /*添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。然后，属性名都是驼峰命名法*/ return <div className="fontcolor">Hello {this.props.name}</div> } }); ReactDOM.render( <Hello name="World" ></Hello>, document,getElementById('example'); ); </Script> 1. JSX 实际上是一种语法糖，写法类似原生的HTML 嵌套一些JS 变量，其中的JS 变量部分需要用一对大括号包括（如视频里的`{this.props.name}`）。JSX 最终会由解析器编译成真正的JS（视频里没讲到的是，JSX 并不是必须的，需要渲染的内容完全可以直接用JS 写）； 2. JSX 中如果要为标签设置类属性，其名称应为`className`；因为`class`是JS 里的关键字（JSX 只是语法糖，最后要被编译成JS，所以要考虑JS 的语法约束）； 3. JSX 中为标签设置样式属性，属性值应为一个对象；由于对象的字面量形式包括一对大括号，所以实际写法应该是`style={{color: "red", fontSize: '16px'}}`。注意到这里定义字体大小用的是`fontSize`而不是`font-size`，因为JS 操作CSS 属性名就是以驼峰形式的。查看全部
-
罐头是1810年发明出来的，可是开罐器却在1858年才发明出来，有时就是这样，重要的东西可能迟来一步，但却一定会到，生活，和爱情都是如此查看全部
-
js部分：first-引入JSX语法糖对应的解析JS，以及react.js库 <Script src="JSXTransformer.js"></Script>/*注意，0.14之后，依赖库已经改为browser.js*/ 然后写JSX的Script标签内的type要改 <Script type="text/jsx">/*注意，0.14之后，标签已经改为text/bable*/ var Hello = React.createClass({ render: function(){ /*添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。然后，属性名都是驼峰命名法*/ return <div className="fontcolor">Hello {this.props.name}</div> } }); ReactDOM.render( <Hello name="World" ></Hello>, document,getElementById('example'); ); </Script> 1. JSX 实际上是一种语法糖，写法类似原生的HTML 嵌套一些JS 变量，其中的JS 变量部分需要用一对大括号包括（如视频里的`{this.props.name}`）。JSX 最终会由解析器编译成真正的JS（视频里没讲到的是，JSX 并不是必须的，需要渲染的内容完全可以直接用JS 写）； 2. JSX 中如果要为标签设置类属性，其名称应为`className`；因为`class`是JS 里的关键字（JSX 只是语法糖，最后要被编译成JS，所以要考虑JS 的语法约束）； 3. JSX 中为标签设置样式属性，属性值应为一个对象；由于对象的字面量形式包括一对大括号，所以实际写法应该是`style={{color: "red", fontSize: '16px'}}`。注意到这里定义字体大小用的是`fontSize`而不是`font-size`，因为JS 操作CSS 属性名就是以驼峰形式的。查看全部
-
一、页面更新方式的不同： 1、react: state的更新直接导致react components的render，从而在合适的时候触发页面更新。 1、传统的页面dom更新：直接通过dom节点的innerHtml，或者修改dom节点的className等来实现。 二、绑定事件： 1、react事件绑定与处理： 2、传统：通过element.addEventListener绑定处理, 事件包括：按钮被点击，键盘被触发，动画开始等。 三、react的render中的<button onClick></button>与在html原生js通过html属性onClick在html标签绑定事件不是一回事。这里不是一个真实的dom节点，只是一个react Element。html中的onClick不区分大小写，这里要用驼峰式命名。查看全部
-
### 初识 React 1. React 不是一个完整的 MVC、MVVM 框架，其只负责 View 层，MVC 已经不适用于某些场景的开发 2. React 跟 Web Components 不冲突 3. React 的特点就是“轻”，数据单向绑定，独立、小巧、快速、创新 4. 组件化的开发思路，小组件构成大组件，高度可重用 ### React 应用场景 1. 复杂场景下的高性能 2. 重用组件库，组件组合 3. “懒”，少做无用功 > 你总是这样轻言放弃的话 无论过多久都只会原地踏步。 -- 多啦a梦 ### 前置知识 1. JS CSS 2. Sass Compass 3. Yeoman Grunt Webpack 4. CommonJS NodeJS 5. Git GitHub ### to be a better engineer 1. 无论知识有多新、项目有多难，只要来了什么姿势都要上 2. 没人疼、没人爱，团队中没人可以帮上忙，要学会借助外力，视频、Google、开源项目 3. 积极要求进步 my blog: https://zyf.im查看全部
-
### 初识 React 1. React 不是一个完整的 MVC、MVVM 框架，其只负责 View 层，MVC 已经不适用于某些场景的开发 2. React 跟 Web Components 不冲突 3. React 的特点就是“轻”，数据单向绑定，独立、小巧、快速、创新 4. 组件化的开发思路，小组件构成大组件，高度可重用 ### React 应用场景 1. 复杂场景下的高性能 2. 重用组件库，组件组合 3. “懒”，少做无用功 > 你总是这样轻言放弃的话 无论过多久都只会原地踏步。 -- 多啦a梦 ### 前置知识 1. JS CSS 2. Sass Compass 3. Yeoman Grunt Webpack 4. CommonJS NodeJS 5. Git GitHub ### to be a better engineer 1. 无论知识有多新、项目有多难，只要来了什么姿势都要上 2. 没人疼、没人爱，团队中没人可以帮上忙，要学会借助外力，视频、Google、开源项目 3. 积极要求进步 my blog: https://zyf.im查看全部
-
js部分：first-引入JSX语法糖对应的解析JS，以及react.js库 <Script src="react.js"></Script> <Script src="JSXTransformer.js"></Script>/*注意，0.14之后，依赖库已经改为browser.js*/ 然后写JSX的Script标签内的type要改 <Script type="text/jsx">/*注意，0.14之后，标签已经改为text/bable*/ var Hello = React.createClass({ render: function(){ /*添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。然后，属性名都是驼峰命名法*/ return <div className="fontcolor">Hello {this.props.name}</div> } }); ReactDOM.render( <Hello name="World" ></Hello>, document,getElementById('example'); ); </Script>查看全部
-
罐头是1810发明出来的，可是开罐器呢，却在1858年才发明出来。有时就是这样，重要的东西可能迟来一步，但却一定会到。生活和爱情，都是如此。程序，当然也不例外。查看全部
-
hook函数：<br> 最早是指windows 系统下提供的一种用来替换DOS 系统下的中断的系统机制；<br> 现在则是泛指，在对特定的系统事件进行hook 后，一旦发生已hook 事件，对该事件进行hook 的程序，就会收到系统的通知。这是程序就可以对该事件第一时间做出响应。查看全部
-
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>React demo</title> <style> .alert{ color: blue !important; } </style> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> var Hello = React.createClass({ render: function () { var style1 = { color: 'red', fontSize: '30px' }; return <div className="alert" style={{color:'yellow'}}>Hello {this.props.name} <span style={style1}>{this.props.title}</span></div>; } }); ReactDOM.render(<Hello name="World" title="ilzq" />, document.getElementById('container')); </script> </body> </html>查看全部
举报
0/150
提交
取消