Atitit react 详细使用总结 绑定列表显示 attilax总结 1. 前言 1
|
Atitit react 详细使用总结 绑定列表显示 attilax总结 1. 前言 1 1.1. 资料数量在百度内的数量对比 1 1.2. 版本16 v15.6.1 1 1.3. 引入js 2 2. 显示列表数据到table控件 2 2.1. 准备json数据 2 2.2. 定义一个contain div 3 2.3. 绑定数据到list控件UL控件 3 3. Jsx语法 3 3.1. JavaScript 表达式表达式写在花括号{} 3 3.2. 注释注释需要写在花括号中，实例如下： 4 3.3. HTML 标签 vs. React 组件 4 4. React一些可能需要克服的问题 5 4.1. 可视化设计的问题 ，工具IDE的支持 5 4.2. 可以结合jq 配合使用h5模板模式缓解jsx的可视化设计问题 5 4.3. Recat资料 5 5. 参考资料 5 1.前言1.1.资料数量在百度内的数量对比React 百度为您找到相关结果约17,500,000个 Vue 百度为您找到相关结果约16,100,153)">angular 1.2.版本16 v15.6.1下载v16..相对v15改名了，不能直接react.js了。 https://cdn.bootcss.com/react/16.0.0/cjs/react.development.js react.development.js 不过ver16版本居然很难下载在大中华LAN内。先用15.4凑活着把。。 1.3.引入js<html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> Babel是用来简析jsx的。。 2.显示列表数据到table控件2.1.准备json数据<script type="text/babel" > var jsonlist= [ {category: "Sporting Goods",price: "$49.99",stocked: true,name: "Football"},
];
2.2.定义一个contain div<div id="container"></div> 2.3.绑定数据到list控件UL控件ReactDOM.render(
<ul> { jsonlist.map(function (obj) { return <li>Hello,{obj.name}!</li> }) } </ul> , document.getElementById('container') ); </script> 比较愚蒙的是必须要用Httml元素抱起来。。 3.Jsx语法3.1.JavaScript 表达式表达式写在花括号{}我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号中。实例如下： React 实例 ReactDOM.render(<div> <h1>{1+}</> </>,documentgetElementById('example');
在 JSX 中不能使用if else语句，但可以使用conditional (三元运算)表达式来替代。以下实例中如果变量i等于1浏览器将输出true,如果修改 i 的值，则会输出false.
3.2.注释注释需要写在花括号中，实例如下：React 实例 >菜鸟教程</> {/*注释...*/;
3.3.HTML 标签 vs. React 组件React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。 要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。 varmyDivElement= <className="foo"/>; (,0)">))要渲染 React 组件，只需创建一个大写字母开头的本地变量。 MyComponent= ReactcreateClass({/*...*/}); myElementsomeProperty={trueReact 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。 4.React一些可能需要克服的问题4.1.可视化设计的问题 ，工具IDE的支持4.2.可以结合jq 配合使用h5模板模式缓解jsx的可视化设计问题4.3.Recat资料React 教程 _ 菜鸟教程.html 使用React并做一个简单的to-do-list - 王福朋 - 博客园 5.参考资料Atitit. js框架angular.js Knockout.js与react vue.js jq.tmpl的使用总结2016流行的 react demo.html 作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher 捕鸟王"Bird Catcher kok 虔诚者Pious 宗教信仰捍卫者 Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王纵火者 简称：： Emir Attilax Akbar 埃米尔 阿提拉克斯 阿克巴 全名：：Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 埃米尔 阿提拉克斯 阿克巴 本 马哈茂德 本 阿提拉 本 所罗门 本亚当 阿尔 拉帕努伊 常用名：艾提拉（艾龙）， EMAIL:1466519819@qq.com 头衔：
转载请注明来源：attilax的专栏 http://blog.csdn.net/attilax http://www.cnblogs.com/attilax/ Microblog http://weibo.com/u/5941179815(common attilax) https://weibo.com/p/1005055941179815（attilax201707,bek weibo） http://weibo.com/u/5487832265(tech,for blog auto gene) 知乎空间 https://www.zhihu.com/people/ati-att/activities Qq 1466519819 小号112237553 微信attilax 小号attilax201708 微博 attilax2016 小号attilax201707 --Atiend v16 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |