React 入门实例教程

最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 react-tools 包来预编译你的代码。

如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。

如果需要在手机或平板等触摸设备上使用 React，需要调用 React.initializeTouchEvents(true); 启用触摸事件处理。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <p>遇到 HTML 标签（以 &lt; 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析</p>
  9.     <p>添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字</p>
  10.     <div id="example1"></div>
  11.     <div id="example2"></div>
  12.     <div id="example3"></div>
  13.     <div id="example4"></div>
  14.     <div id="example5"></div>
  15.     <div id="example6"></div>
  16.     <script src="react.js"></script>
  17.     <script src="JSXTransformer.js"></script>
  18.     <script type="text/jsx">
  19.         var names = ['Alice', 'Emily', 'Kate'];
  20.  
  21.         React.render(
  22.           <div>
  23.           {
  24.             names.map(function (name) {
  25.               return <div>Hello, {name}!</div>
  26.             })
  27.           }
  28.           </div>,
  29.           document.getElementById('example1')
  30.         );
  31.  
  32.         var myDivElement = <div className="foo" />;
  33.         React.render(myDivElement, document.getElementById('example2'));
  34.  
  35.         var MyComponent = React.createClass({
  36.             render: function() {
  37.                 return (
  38.                     <div className="commentBox">{this.props.name}</div>
  39.                 )
  40.             },
  41.             componentDidMount: function() {
  42.                 console.log(this.props.someProperty)
  43.             }
  44.         });
  45.         var myElement = <MyComponent name="John" someProperty={true} />;
  46.         React.render(myElement, document.getElementById('example3'));
  47.  
  48.         var NotesList = React.createClass({
  49.           render: function() {
  50.             return (
  51.               <ol>
  52.               {
  53.                 this.props.children.map(function (child) {
  54.                   return <li>{child}</li>
  55.                 })
  56.               }
  57.               </ol>
  58.             );
  59.           }
  60.         });
  61.  
  62.         // 这里需要注意，只有当子节点多余1个时，this.props.children 才是一个数组，否则是不能用 map 方法的， 会报错。
  63.         React.render(
  64.           <NotesList>
  65.             <span>hello</span>
  66.             <span>world</span>
  67.           </NotesList>,
  68.           document.getElementById('example4')
  69.         );
  70.  
  71.         var MyTitle = React.createClass({
  72.             getDefaultProps : function () {
  73.                 return {
  74.                   title : 'Hello World'
  75.                 };
  76.             },
  77.  
  78.           // PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串
  79.           propTypes: {
  80.             title: React.PropTypes.string.isRequired,
  81.           },
  82.  
  83.           render: function() {
  84.              return <h1> {this.props.title} </h1>;
  85.            }
  86.         });
  87.  
  88.         var data = '123';
  89.  
  90.         React.render(
  91.           <MyTitle title={data} />,
  92.           document.getElementById('example5')
  93.         );
  94.  
  95.         var MyComponent = React.createClass({
  96.           handleClick: function() {
  97.             React.findDOMNode(this.refs.myTextInput).focus();
  98.           },
  99.           render: function() {
  100.             return (
  101.               <div>
  102.                 <input type="text" ref="myTextInput" />
  103.                 <input type="button" value="Focus the text input" onClick={this.handleClick} />
  104.               </div>
  105.             );
  106.           }
  107.         });
  108.  
  109.         React.render(
  110.           <MyComponent />,
  111.           document.getElementById('example6')
  112.         );
  113.     </script>
  114. </body>
  115. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div id="example1"></div>
  9.     <div id="example2"></div>
  10.     <div id="example3"></div>
  11.     <script src="react.js"></script>
  12.     <script src="JSXTransformer.js"></script>
  13.     <script type="text/jsx">
  14.         var GroceryList = React.createClass({
  15.           handleClick: function(i) {
  16.             alert('You clicked: ' + this.props.items[i]);
  17.           },
  18.  
  19.           render: function() {
  20.             return (
  21.               <div>
  22.                 {this.props.items.map(function(item, i) {
  23.                   return (
  24.                     <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
  25.                   );
  26.                 }, this)}
  27.               </div>
  28.             );
  29.           }
  30.         });
  31.  
  32.         React.render(
  33.           <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, document.getElementById('example1')
  34.         );
  35.  
  36.         var Box = React.createClass({
  37.           getInitialState: function() {
  38.             return {windowWidth: window.innerWidth};
  39.           },
  40.  
  41.           handleResize: function(e) {
  42.             this.setState({windowWidth: window.innerWidth});
  43.           },
  44.  
  45.           componentDidMount: function() {
  46.             window.addEventListener('resize', this.handleResize);
  47.           },
  48.  
  49.           componentWillUnmount: function() {
  50.             window.removeEventListener('resize', this.handleResize);
  51.           },
  52.  
  53.           render: function() {
  54.             return <div>Current window width: {this.state.windowWidth}</div>;
  55.           }
  56.         });
  57.  
  58.         React.render(<Box />, document.getElementById('example2'));
  59.  
  60.         function createMarkup() { return {__html: '<script>alert(2);<\/script><b>22</b>First &middot; Second'}; };
  61.         React.render(<div dangerouslySetInnerHTML={createMarkup()} />, document.getElementById('example3'));
  62.     </script>
  63. </body>
  64. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div id="example1"></div>
  9.     <div id="example2"></div>
  10.     <div id="example3"></div>
  11.     <script src="react.js"></script>
  12.     <script src="JSXTransformer.js"></script>
  13.     <script type="text/jsx">
  14.         React.render(<input value="hi" />, document.getElementById('example1'));
  15.  
  16.         React.render(<input value={null} />, document.getElementById('example2'));
  17.  
  18.         var mountNode = document.getElementById('example3') 
  19.  
  20.         var Todo = React.createClass({
  21.           render: function() {
  22.             return <div onClick={this.props.onClick}>{this.props.title}</div>;
  23.           },
  24.  
  25.           //this component will be accessed by the parent through the `ref` attribute
  26.           animate: function() {
  27.             console.log('Pretend %s is animating', this.props.title);
  28.           }
  29.         });
  30.  
  31.         var Todos = React.createClass({
  32.           getInitialState: function() {
  33.             return {items: ['Apple', 'Banana', 'Cranberry']};
  34.           },
  35.  
  36.           handleClick: function(index) {
  37.             var items = this.state.items.filter(function(item, i) {
  38.               return index !== i;
  39.             });
  40.             this.setState({items: items}, function() {
  41.               if (items.length === 1) {
  42.                 this.refs.item0.animate();
  43.               }
  44.             }.bind(this));
  45.           },
  46.  
  47.           render: function() {
  48.             return (
  49.               <div>
  50.                 {this.state.items.map(function(item, i) {
  51.                   var boundClick = this.handleClick.bind(this, i);
  52.                   return (
  53.                     <Todo onClick={boundClick} key={i} title={item} ref={'item' + i} />
  54.                   );
  55.                 }, this)}
  56.               </div>
  57.             );
  58.           }
  59.         });
  60.  
  61.         React.render(<Todos />, mountNode);
  62.     </script>
  63. </body>
  64. </html>

React入门2的更多相关文章

  1. react入门（3）

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  2. react入门（1）

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  3. react入门（2）

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...

  4. react入门（4）

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  5. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  6. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  7. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  8. React入门简单实践

    参考文献: 1.React入门示例教程——阮一峰 2.React仅仅只是你的界限 React主要的优点就是增量更新(虚拟DOM)和组件化(状态机). <!DOCTYPE html> < ...

  9. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  10. React入门资源整理

    另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列. React入门资源整理 React项目新手指南 http://www.w3ctech.com/top ...

随机推荐

  1. Entity Framework 使用sql语句分页(查询视图)

    1.查询视图 //3.查询视图 var sql = @" SELECT D.* FROM ( SELECT ROW_NUMBER() OVER ( ORDER BY TestView.B_M ...

  2. STORM 免费且开源的WebSerivce测试工具

    一.名称 STORM 是一款免费且开源的WebSerivce测试工具 二.使用方式 1.发布自己的webservice服务 例如:http://www.webxml.com.cn/WebService ...

  3. Object-C类目(Category)

    类目是Object-C中最有用的一个特性.实质上,类目允许你为一个已存在的类添加一些方法而不用子类化该类,也不需要你了解该类的实现细节. 这是特别有用的,因为你可以给一个内建的对象添加方法.当你想在你 ...

  4. java新手笔记20 抽象类模板（letter)

    1.抽象类 package com.yfs.javase; //信模板 public abstract class Templater { public abstract String toName( ...

  5. 07_MyBatis原始的Dao编写方法

    [UserDao.java ] package com.Higgin.Mybatis.dao; import com.Higgin.Mybatis.po.User; public interface ...

  6. jQuery弹出层_点击自身以外地方关闭弹出层

    <html> <style> .hide{display:none;} </style> <script type="text/javascript ...

  7. c#基础班笔记

    1.静态与非静态的区别:是否有static 非静态: 1)在非静态类中,既可以有实例成员,也可以有静态成员 2)在调用实例成员,通过  对象.实例成员 在调用静态成员时,通过  类名.静态成员 静态: ...

  8. php 加载函数 __autoload(), spl_autoload_register()

    来自:http://www.cnblogs.com/myluke/archive/2011/06/25/2090119.html spl_autoload_register (PHP 5 >= ...

  9. event的属性

    t获取鼠标相对于浏览器左上角的坐标 <div id="dv" style=" width:300px; height:200px; background-color ...

  10. 不能正确获得上次构建以来的Commit

    不能正确获得上次构建以来的Commit 如何解决?