React 入门实例教程

日期： 2015年3月31日

现在最热门的前端框架，毫无疑问是 React 。

上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。

既然 React 这么热门，看上去充满希望，当然应该好好学一下。从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目。但是，好的 React 教程却不容易找到，这一方面因为这项技术太新，刚刚开始走红，大家都没有经验，还在摸索之中；另一方面因为 React 本身还在不断变动，API 一直在调整，至今没发布1.0版。

我学习 React 时，就很苦恼。有的教程讨论一些细节问题，对入门没帮助；有的教程写得不错，但比较短，无助于看清全貌。我断断续续学了几个月，看过二十几篇教程，在这个过程中，将对自己有帮助的 Demo 都收集下来，做成了一个库 React Demos 。

下面，我就根据这个库，写一篇全面又易懂的 React 入门教程。你只需要跟着每一个 Demo 做一遍，就能初步掌握 React 。当然，前提是你必须拥有基本 JavaScript 和 DOM 知识，但是你读完就会发现，React 所要求的预备知识真的很少。

零、安装

React 的安装包，可以到官网下载。不过，React Demos 已经自带 React 源码，不用另外安装，只需把这个库拷贝到你的硬盘就行了。


$ git clone [email protected]:ruanyf/react-demos.git

如果你没安装 git，那就直接下载 zip 压缩包。

下面要讲解的12个例子在各个 Demo 子目录，每个目录都有一个 index.html 文件，在浏览器打开这个文件（大多数情况下双击即可），就能立刻看到效果。

需要说明的是，React 可以在浏览器运行，也可以在服务器运行，但是本教程只涉及浏览器。一方面是为了尽量保持简单，另一方面 React 的语法是一致的，服务器的用法与浏览器差别不大。Demo13 是服务器首屏渲染的例子，有兴趣的朋友可以自己去看源码。

一、HTML 模板

使用 React 的网页源码，结构大致如下。


<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。


$ babel src --out-dir build

上面命令可以将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。

二、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。


ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

上面代码将一个 h1 标题，插入 example 节点（查看 demo01），运行结果如下。

三、JSX 语法

上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写（查看 Demo02 ）。


var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员（查看 demo03 ）。


var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代码的arr变量是一个数组，结果 JSX 会把它的所有成员，添加到模板，运行结果如下。

四、组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（查看 demo04）。


var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。

注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。


var HelloMessage = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});

上面代码会报错，因为HelloMessage组件包含了两个顶层标签：h1和p。

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，就是 HelloMessage 组件加入一个 name 属性，值为 John。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

五、this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）。


var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取，运行结果如下。

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法，请参考官方文档。

六、PropTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求（查看 demo06）。


var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。


var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

这样一来，title属性就通不过验证了。控制台会显示一行错误信息。


Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

更多的PropTypes设置，可以查看官方文档。

此外，getDefaultProps 方法可以用来设置组件属性的默认值。


var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

ReactDOM.render(
  <MyTitle />,
  document.body
);

上面代码会输出"Hello World"。

七、获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性（查看 demo07 ）。


var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

React 组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。

八、this.state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI （查看 demo08 ）。


var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

九、表单

用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取（查看 demo9 ）。


var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

上面代码中，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。

十、组件的生命周期

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

这些方法的详细说明，可以参考官方文档。下面是一个例子（查看 demo10 ）。


var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

另外，组件的style属性的设置方式也值得注意，不能写成


style="opacity:{this.state.opacity};"

而要写成


style={{opacity: this.state.opacity}}

这是因为 React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。

十一、Ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI （查看 demo11 ）。


var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
);

上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。

我们甚至可以把一个Promise对象传入组件，请看Demo12。


ReactDOM.render(
  <RepoList
    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
  />,
  document.body
);

上面代码从Github的API抓取数据，然后将Promise对象作为属性，传给RepoList组件。

如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。


var RepoList = React.createClass({
  getInitialState: function() {
    return { loading: true, error: null, data: null};
  },

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {
    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          <li>
            <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
          </li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});

十二、参考链接

React's official site
React's official examples
React (Virtual) DOM Terminology, by Sebastian Markbåge
The React Quick Start Guide, by Jack Callister
Learning React.js: Getting Started and Concepts, by Ken Wheeler
Getting started with React, by Ryan Clark
React JS Tutorial and Guide to the Gotchas, by Justin Deal
React Primer, by Binary Muse
jQuery versus React.js thinking, by zigomir

（完）

2022.10.25: 羊了个羊，如何自己实现（暨"码上掘金"编程挑战赛介绍）
[海报] 稀土掘金正在面向全国举办"首届编程挑战赛"，这是展示自己作品的好机会，详情见文后。
2022.05.05: 打包工具 rollup.js 入门教程
rollup.js 是一个 JavaScript 打包工具。本文介绍它的基本用法。
2021.09.29: JavaScript 侦测手机浏览器的五种方法
有时候，前端网页需要知道，用户使用的是手机浏览器还是桌面浏览器。
2021.01.20: 剪贴板操作 Clipboard API 教程
一、简介浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。

留言（442条）

曲双如说：

实在是不能更赞，我能去您的公司打工不。哈哈。
马上仔细跟进。
在中国做一个前端，真的是挺有福气。

2015年3月31日 15:43 | # | 引用

ZZZero 说：

相信阮一峰老师~ 先留言后看w 前端新人一只来这学了很多东西
React自己也折腾了好几个月~ 挺好玩~
thx~

2015年3月31日 16:06 | # | 引用

jprovim 说：

前排支持, 希望能看到你更多的文章.

2015年3月31日 16:08 | # | 引用

linchen 说：

阮老师的最近的每篇文章，内容都是当下最热门的话题，并且适合初学者阅读。好厉害！

2015年3月31日 16:30 | # | 引用

JimhooLiu 说：

之前从未接触过React，看了这篇博文之后就有了大概的印象了，提供的示例通俗易懂，非常感谢！

2015年3月31日 16:34 | # | 引用

白日梦做不完说：

学习了！！！

2015年3月31日 17:03 | # | 引用

题叶说：

留个链接, 我是 React 中文社区维护者之一(跟 Facebook 无关..).
社区交流的渠道可以在 http://nav.react-china.org/ 查看.
如果大家有兴趣追最新的消息, 交流跟分享 React, 可以细看一下.

2015年3月31日 17:12 | # | 引用

xue 说：

Unmounting：已移出真实 DOM, 是移除吧, 吹毛求疵一下...

2015年3月31日 18:33 | # | 引用

drunkevil 说：

真是一篇很好的入门教程！

2015年3月31日 19:28 | # | 引用

孙和说：

最近正用React写项目，老阮关于“状态机”的论述也很有帮助

2015年3月31日 19:36 | # | 引用

taiansu 说：

謝謝好文，但是我想指出你文中說 React Native 想要「同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机」是不正確的。

歷史上所有標榜 "Write once, run everywhere" 的項目都失敗了。 React Native 在發表時，說的是 "Learn once, write everywhere"。瀏覽器、 iOS 及 Android 的後端 js 邏輯可以共用，UI 還是得寫三次，但架構版型的思考模式會一樣 (都用 CSS flexbox)，畫面元件還是得從換成。

2015年3月31日 22:44 | # | 引用

wteam_xq 说：

一峰大师的文章果然赞！！！react入门必读文章哈！

2015年3月31日 23:19 | # | 引用

mead 说：

引用曲双如的发言：
实在是不能更赞，我能去您的公司打工不。哈哈。
马上仔细跟进。
在中国做一个前端，真的是挺有福气。

他在支付宝

2015年4月 1日 09:17 | # | 引用

atwal 说：

不能更赞啊，谢谢阮老师

2015年4月 1日 09:30 | # | 引用

凡客说：

老师的文章总是那么深入浅出而又博大精深。daomubiji.org

2015年4月 1日 10:25 | # | 引用

JSX 说：

加油~

2015年4月 1日 10:59 | # | 引用

chp 说：

基于React的Reagent很赞。

2015年4月 1日 12:44 | # | 引用

busyStone 说：

凡是使用 JSX 的地方，都要加上 type="text/jsx" 现在的 react 版本不需要了

2015年4月 1日 13:15 | # | 引用

转二说：

Donate 没了？

2015年4月 1日 14:41 | # | 引用

Leo 说：

引用busyStone的发言：
凡是使用 JSX 的地方，都要加上 type="text/jsx"现在的 react 版本不需要了

那是转换成原生 js 后, 才不用添加的吧.

2015年4月 1日 18:00 | # | 引用

sincera 说：

有些文章不能看了，比如
//www.greatytc.com/blog/2008/03/imdb_database_structure.html

2015年4月 1日 21:00 | # | 引用

优雅说：

相信看了您的文章，就很容易入门了吧.果断买本《如何变得有思想》支持一下.

2015年4月 2日 12:02 | # | 引用

Shawock 说：

哈哈，一峰老师名气可真大啊。。

2015年4月 2日 15:31 | # | 引用

zmhan.zhu 说：

一峰老师超赞,布道大师

2015年4月 3日 09:45 | # | 引用

小白说：

阮兄能否在结合flux一起讲一下react。

2015年4月 3日 09:52 | # | 引用

luobotang 说：

React 可能是个很 NB 的东西，可是看起来很复杂，我没有什么好感。当然，我对它没有好感并不影响它是个 NB、伟大的东西。

2015年4月 3日 11:25 | # | 引用

刘大说：

看了二十几篇教程就写出个这。。？

2015年4月 3日 17:11 | # | 引用

兴杰说：

阮兄，
请问 React 适合开发什么类型的项目？
如果我的项目围绕在电子商务，酒店订购，餐厅(包括开发管理界面)，
React 和 nagularjs 哪一个更适合我呢？
思想差异，优缺点能否说一说 ?

2015年4月 6日 15:48 | # | 引用

业界大牛说：

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

props,在这里很常见的用法是传参,显然形参你改了也灭用
而state这个属性就要好好把玩了,也说了,交互中很常见的状态

2015年4月 7日 14:07 | # | 引用

海纳百川说：

新技术介绍，不错。

2015年4月 7日 16:30 | # | 引用

query 说：

学习了，感觉特别棒。

2015年4月 9日 11:07 | # | 引用

jack 说：

真的很不错，希望阮大侠继续React在中国的布道。

2015年4月 9日 14:47 | # | 引用

Mrluobo 说：

能否解释下第十个Demo中的isMounted方法的作用和意义？谢谢。

2015年4月 9日 16:37 | # | 引用

kurtis 说：

期待阮老师在出一个Reflux的教程

2015年4月 9日 22:11 | # | 引用

小番茄说：

阮老师的博客内容总是这么棒~~

2015年4月10日 10:28 | # | 引用

haohao 说：

试了一下，四组件类的名称必须是大写字母开头！！！

2015年4月11日 16:19 | # | 引用

米不过分说：

写的真好，已经入门

2015年4月15日 10:54 | # | 引用

郑晋说：

引用luobotang的发言：
React 可能是个很 NB 的东西，可是看起来很复杂，我没有什么好感。当然，我对它没有好感并不影响它是个 NB、伟大的东西。

React已经是尽量专注于表现层了，没有加入太多东西，怎么会很复杂。

2015年4月19日 10:27 | # | 引用

郑晋说：

引用Mrluobo的发言：
能否解释下第十个Demo中的isMounted方法的作用和意义？谢谢。

只有组件还处于挂载状态下，才有setState从而更新视图的意义。

2015年4月19日 10:34 | # | 引用

王恒说：

就是 class 属性需要写成 className
新版的不需要了直接写成class 就可以了

2015年4月19日 13:18 | # | 引用

严细浪说：

写的真好。
这React看起来不是那么简单，语法都搞不清了。改变好大。另外，这东西能debug吗？

2015年4月21日 10:57 | # | 引用

新人一枚说：

写的很通俗易懂

2015年4月22日 09:53 | # | 引用

pleasureswx123 说：

通俗易懂，大赞

2015年4月22日 10:33 | # | 引用

Vincent 4J 说：

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native，结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。

下面是对 React Native 官方文档的完整中文翻译教程：http://wiki.jikexueyuan.com/project/react-native/

2015年4月25日 01:31 | # | 引用

fy 说：

引用haohao的发言：
试了一下，四组件类的名称必须是大写字母开头！！！

我也发现了

2015年4月28日 14:21 | # | 引用

Welkin 说：

看起来怎么又把模板揉进JS里了？

2015年4月29日 19:53 | # | 引用

Nixus 说：

我有点儿贪心了：React能否开发游戏/移动端游戏？

2015年4月30日 16:50 | # | 引用

王康萍说：

React.findDOMNode 这个调用报错：React is undefined. 这是怎么回事啊？大神

2015年5月 4日 16:12 | # | 引用

刘韦菠说：

勘误:
只有当子节点多余1个时
多于

2015年5月 5日 16:38 | # | 引用

Tulpar 说：

谢谢老师

2015年5月11日 13:16 | # | 引用

rocket 说：

一个错别字：
只有当子节点多余1个时

多于

2015年5月19日 15:25 | # | 引用

Kisnows 说：

打算先把这些demo过一遍

2015年5月26日 21:40 | # | 引用

HanChn 说：

非常感谢您分享这篇文章，由衷地感谢!

2015年5月29日 22:21 | # | 引用

初学者说：

现在真心不想用框架了, knockout, backbone, angular以及这个.
每次为了适应一个新框架, 需要学习很多额外的语法, 而且等到其他人来维护的时候, 却完全维护不动...
我决定以后顶多用个jQuery, 差不多大家都能看明白;
如果是移动端直接就原生写吧, 实际上也没多少代码量.

2015年6月 2日 13:32 | # | 引用

大名鼎鼎说：

引用刘大的发言：
看了二十几篇教程就写出个这。。？

那你还想咋地？

2015年6月 3日 21:54 | # | 引用

goofy 说：

请问两个独立组件之间有什么好的交互方式

2015年6月 7日 12:10 | # | 引用

你好说：

感谢博主！现学现用，很有参考价值

2015年6月 8日 11:05 | # | 引用

gethin 说：

第九个例子最好clearInterval一下

2015年6月11日 19:23 | # | 引用

gethin 说：

引用初学者的发言：
现在真心不想用框架了, knockout, backbone, angular以及这个.
每次为了适应一个新框架, 需要学习很多额外的语法, 而且等到其他人来维护的时候, 却完全维护不动...
我决定以后顶多用个jQuery, 差不多大家都能看明白;
如果是移动端直接就原生写吧, 实际上也没多少代码量.

那你最好去当个教师。不要做前端了

2015年6月11日 19:31 | # | 引用

rolin 说：

貌似this可以随便用都无视函数作用域？

2015年6月11日 19:32 | # | 引用

Rookie 说：

不错，简单易懂

2015年6月26日 16:22 | # | 引用

king-king 说：

写的很好，读的很有收获

2015年6月29日 14:27 | # | 引用

gyzhao 说：

$ git clone [email protected]:ruanyf/react-demos.git

应该是：

https://github.com/ruanyf/react-demos.git

这样不需要SSH的也可以直接clone

2015年6月29日 18:25 | # | 引用

assassin 说：

学习了！希望出现flux、reflux、redux教程！

2015年7月14日 09:37 | # | 引用

Wronght 说：

文章开头讲到参见《也许，DOM 不是答案》，和React没太大关系。《也许，DOM 不是答案》是篇值得深思的文章，那篇文章给出的答案是新的页面渲染方式，倾向仍然是web端。
而React只是稍微新一点的编写方式。Native解决的是减少工作量，统一的代码，性能能好吗？已经有太多项目做过这样的尝试了，还说什么“如果能够实现，整个互联网行业都会被颠覆”，别逗了。
React不会解决那篇文章说的问题，也挨不上关系。

2015年7月15日 12:49 | # | 引用

于说：

您好：我想问您这个框架可以开发网页版组态软件么？可以和requriejs配合么？

2015年7月15日 16:01 | # | 引用

zgldh 说：

Pretty cool!

2015年7月17日 07:04 | # | 引用

Zoe 说：

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

React.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
阮老师，为什么插入之后的html结构，会分别有两个span标签包裹着Hello和{this.props.name}呢？

2015年7月21日 15:54 | # | 引用

Zoe 说：

这段代码是demo4里面的

2015年7月21日 15:55 | # | 引用

伟鹏说：

赞！条理清晰，比较全面而简单，谢谢阮老师！

2015年7月28日 11:17 | # | 引用

前端菜鸟说：

虽然跟着demo都敲了一下，但是发现自己什么都没有学会，render是干嘛的不知道，还有就是除了这些方法还有哪些方法，也不清楚，是不是我学的太浅了？

2015年7月29日 16:25 | # | 引用

kkkk 说：

老师，能否写个flux入门？

2015年8月 6日 00:43 | # | 引用

yinz 说：

我想知道如何外部引入jsx

申明了type="text/jsx" 引入就会失败

不申明就会有语法错误!

2015年8月 9日 17:57 | # | 引用

小亮说：

引用初学者的发言：
现在真心不想用框架了, knockout, backbone, angular以及这个.
每次为了适应一个新框架, 需要学习很多额外的语法, 而且等到其他人来维护的时候, 却完全维护不动...
我决定以后顶多用个jQuery, 差不多大家都能看明白;
如果是移动端直接就原生写吧, 实际上也没多少代码量.

所以充其量你永远只是一个小码农。不愿接受新事物，墨守陈规。

2015年8月 9日 20:23 | # | 引用

Zespri 说：

看過一些資料, 感覺一直模模糊糊,
看了一下您的教學, 馬上釐清觀念! 感謝老師

2015年8月13日 02:47 | # | 引用

未央花开说：

写得太好了，太好了

2015年8月13日 17:36 | # | 引用

anduril 说：

引用曲双如的发言：
实在是不能更赞，我能去您的公司打工不。哈哈。
马上仔细跟进。
在中国做一个前端，真的是挺有福气。

阮老师好像是在淘宝少年加油吧

2015年8月15日 07:47 | # | 引用

whws 说：

文中说只要调用 setState 方法，就会自己调用 render 方法，重新渲染组件，
八、表单这节中，我看到 p 标签中使用 {value}，input 标签中也是使用value={value}，
但是改变 input 中内容，只有 p 中内容跟着改变了，input 的 value 属性值没有跟着改变，
那 render 方法到底是怎么执行的呢？没有重新渲染 input 吗？

2015年8月18日 16:23 | # | 引用

冯建俊说：

您好，我安装了git,用webstorm去push你的代码，总是失败

2015年8月18日 18:24 | # | 引用

yujieyu7 说：

阮老师自学能力太强了

2015年8月23日 18:36 | # | 引用

二妞说：

引用rolin的发言：
貌似this可以随便用都无视函数作用域？

注意看代码下面的bind(this)，这是通过function的bind方法指定了作用域，相关链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

2015年8月26日 00:11 | # | 引用

leeya 说：

写得真好，学习中

2015年8月28日 10:56 | # | 引用

llj 说：

创建组件的变量首字母要用大写才有用不知道大家是不是这样

2015年9月 1日 10:16 | # | 引用

rookie 说：

写的很好，有的看官方没看懂，看你的整明白了，支持一下

2015年9月 6日 10:06 | # | 引用

米兰说：

引用whws的发言：
文中说只要调用 setState 方法，就会自己调用 render 方法，重新渲染组件，
八、表单这节中，我看到 p 标签中使用 {value}，input 标签中也是使用value={value}，
但是改变 input 中内容，只有 p 中内容跟着改变了，input 的 value 属性值没有跟着改变，
那 render 方法到底是怎么执行的呢？没有重新渲染 input 吗？

render 的时候重新生成了 Virtual DOM，但重新渲染UI时，React 只会对 Virtual DOM 中发生改变了的部分进行重新渲染。render 后 Virtual DOM 中 input 的 value 属性值其实发生了变化，但和真实 DOM 中 input 的 .value 想用，故没有渲染到UI中。
PS. 你可以通过在 input 上加上 ref="myTextInput"，并在 handleChange 里加入 console.log(this.refs["myTextInput"].props); 来打印 Virtual DOM 的属性值来发现其中奥妙。

2015年9月 8日 17:55 | # | 引用

米兰说：

引用前端菜鸟的发言：
虽然跟着demo都敲了一下，但是发现自己什么都没有学会，render是干嘛的不知道，还有就是除了这些方法还有哪些方法，也不清楚，是不是我学的太浅了？

我建议把每一个3分钟就能看完的例子，用30分钟进行各种改写试验，就能够深入一些。

2015年9月 8日 18:00 | # | 引用

米兰说：

引用Zoe的发言：
阮老师，为什么插入之后的html结构，会分别有两个span标签包裹着Hello和{this.props.name}呢？

你应该也发现了，他们都有各自的 reactid，是React为了实现以后的查找元素和局部重新渲染。
第八个例子中你可以发现这个事实，选中前面的You或后面Click to toggle中某些字母，此时触发点击事件造成 like 部分的改变，没有使你选中区域的背景和焦点丢失，就是只重绘了中间的那个 span。

2015年9月 8日 18:07 | # | 引用

晓赟说：

引用busyStone的发言：
凡是使用 JSX 的地方，都要加上 type="text/jsx"现在的 react 版本不需要了

目前0.13 版本还是要加的JSXTransformer.js 的，除非转化为原生js

2015年9月 9日 09:58 | # | 引用

Leon 说：

想要看视频教程的同学可以到这里看
http://piliyu.com

2015年9月11日 17:02 | # | 引用

大神说：

如果我想在react组件里嵌入一个jquery的datepicker组件应该怎么来做？

2015年9月15日 08:51 | # | 引用

gujunmin 说：

感谢老师的分享

2015年9月16日 23:46 | # | 引用

孙飞说：

browser.min.js 是用来干嘛的我看到有的教程里面用的是 JSXTransformer.js 这两者有什么区别吗？

2015年9月17日 10:00 | # | 引用

海盗说：

引用兴杰的发言：
阮兄，
请问 React 适合开发什么类型的项目？
如果我的项目围绕在电子商务，酒店订购，餐厅(包括开发管理界面)，
React 和 nagularjs 哪一个更适合我呢？
思想差异，优缺点能否说一说 ?

angular适合快速搭建应用，组建比较全，依赖入驻思想，经常写java服务的同学可能很试用，但其根本没有脱离dom结构，是渲染dom结构展现，尤其双向数据绑定在复杂数据交互时候，性能不高；react比较轻，自己重写的虚拟dom渲染比较独特，但组件不全，很多需要自己扩展，写核心的应用或者酷炫效果应该不错，具体看你实际应用吧

2015年9月17日 21:20 | # | 引用

funye 说：

你好，我最近在学习react的时候，看的是facebook.github.io/react/docs/tutorial.html 的例子，发现怎么好像提交数据时候的url 和请求数据的url 一样的，这个是怎么回事，似乎和我们常见web 有点不太一样，还望指导一下，谢谢

2015年9月18日 10:51 | # | 引用

Min 说：

"Demo11 是服务器首屏渲染的例子"这里说的应该是Demo12吧！

2015年9月18日 14:38 | # | 引用

Min 说：

看你Demo11中说ajax请求的数据要通过setState来触发渲染，事实上ajax请求之前就会调用初始的state默认渲染一次，例子中初始state比较简单：
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
}
那问题是我请求的数据结构很复杂，那初始state必须得完全照搬复杂的数据结构？要不然第一次渲染时就会报错！

2015年9月18日 14:56 | # | 引用

害羞的水蜜桃说：

引用初学者的发言：
现在真心不想用框架了, knockout, backbone, angular以及这个.
每次为了适应一个新框架, 需要学习很多额外的语法, 而且等到其他人来维护的时候, 却完全维护不动...
我决定以后顶多用个jQuery, 差不多大家都能看明白;
如果是移动端直接就原生写吧, 实际上也没多少代码量.

你说的这段话很符合你的用户名

2015年9月19日 14:19 | # | 引用

小徐说：

阮老师，JSX能在浏览器控制台断点吗？我试了好像不行？是我方法错了吗？

2015年9月26日 11:22 | # | 引用

jackqqxu 说：

又重新看了一遍，主要是最近react-native推出了android的版本；所以react很值得深入学习理解；最终的方向还是在react-native方向；我看最近很多比如www.reactjs.cn，http://www.webdoes.com/blog/archives/725，都专门讲解了react-native，也很不错，值得学习一下；感谢阮老师。

2015年9月26日 18:19 | # | 引用

爱上走路说：

10分钟入门React系列

2015年9月29日 08:27 | # | 引用

Jellyfish 说：

一个是get请求，一个是post请求

引用funye的发言：

2015年9月29日 13:39 | # | 引用

Reeoo 说：

牛逼，这demo都有2000+的star了

2015年9月30日 09:48 | # | 引用

和风说：

大神，git不了啊，老说没权限。。。

2015年10月 1日 14:45 | # | 引用

路人甲说：

引用和风的发言：
大神，git不了啊，老说没权限。。。

直接用浏览器访问这个页面，然后Download ZIP
https://github.com/ruanyf/react-demos

2015年10月 2日 12:05 | # | 引用

星光说：

阮老师第一个例程里面的<script type="text/babel"> 貌似写错了
<script type="text/jsx">
// ** Our code goes here! **
</script>

2015年10月 7日 22:16 | # | 引用

星光说：

script type="text/babel" 写成了 script type="text/jsx"

2015年10月 7日 22:17 | # | 引用

阮一峰说：

@星光：

谢谢指出，已经更正了。

2015年10月 8日 07:13 | # | 引用

吴化吉说：

引用haohao的发言：
试了一下，四组件类的名称必须是大写字母开头！！！

啊，多谢，我就在这地方遇到坑了。阮老师可以考虑补充进去哈：)

2015年10月 9日 10:44 | # | 引用

邬畏畏说：

我个人的感觉，JSX是需要React解析的，这种语法糖也会改变开发JavaScript的开发方式，时间久了会导致原生JavaScript不熟了，因为好多问题你要前端非常熟悉JavaScript，否则就导致漫天大海的在网上找解决方案。

我个人觉得，类似React的这种东东不要改变JavaScript写代码方式，可以在用JavaScript编写面向对象的组件上解决组件开发中单点的处理，而不是弄一套体系改变前端开发人员的开发方式。

2015年10月10日 16:55 | # | 引用

gclove 说：

ruanyifeng大大,
PropTypes 熟悉这一部分是不是有问题哈 .

可以拿最新的 0.14.0 测试一下哦 .

2015年10月15日 20:04 | # | 引用

gclove 说：

引用初学者的发言：
现在真心不想用框架了, knockout, backbone, angular以及这个.
每次为了适应一个新框架, 需要学习很多额外的语法, 而且等到其他人来维护的时候, 却完全维护不动...
我决定以后顶多用个jQuery, 差不多大家都能看明白;
如果是移动端直接就原生写吧, 实际上也没多少代码量.

- - 那 Facebook 为啥要用 , 不是你想的那样的 .

没有 MVC 框架 , 你写 bootstrap semantic UI 试试

2015年10月15日 20:06 | # | 引用

日月大神说：

引用rolin的发言：
貌似this可以随便用都无视函数作用域？

函数结尾有个.bind(this),这个this就是传入当前作用域。

2015年10月15日 23:40 | # | 引用

张拭心说：

还不支持windows 555555555

2015年10月16日 14:47 | # | 引用

晨曦沐枫说：

能有比较完善的demo吗？

2015年10月16日 17:31 | # | 引用

大风兮说：

有没有什么优秀的开发工具来支持react？

2015年10月19日 17:39 | # | 引用

fashion1993 说：

引用星光的发言：
阮老师第一个例程里面的<script type="text/babel"> 貌似写错了
<script type="text/jsx">
// ** Our code goes here! **
</script>

不太明白,应该是"text/jsx"还是"text/babel"

2015年10月19日 17:55 | # | 引用

triffic 说：

引用题叶的发言：
留个链接, 我是 React 中文社区维护者之一(跟 Facebook 无关..).
社区交流的渠道可以在 http://nav.react-china.org/ 查看.
如果大家有兴趣追最新的消息, 交流跟分享 React, 可以细看一下.

Diff算法解释是否已收入React中文社区http://www.laolifactory.com/index.php/2015/10/19/reacts-diff-algorithm-chinese/

2015年10月20日 08:53 | # | 引用

飒沓咯说：

引用Leo的发言：
那是转换成原生 js 后, 才不用添加的吧.

现在貌似改成了0.14版本后 "text/jsx"改成"text/babel" ,官方不再发布 JSXTransformer.js 了改成babel解析...
http://www.tuicool.com/articles/NFvYfeB

2015年10月21日 16:36 | # | 引用

飒沓咯说：

Demo2 控制台报错
Each child in an array or iterator should have a unique “key” prop

解决办法只要在循环的每个子项添加一个key就行了，代码如下：

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(

{
names.map(function (name, key) {
return Hello, {name}!
})
}
,
document.getElementById('example')
);

http://f00sun.com/

2015年10月23日 13:51 | # | 引用

jack-nie 说：

这些东西，花一天时间看一遍官方文档就都知道了好吧。。还看了几个月。。。

2015年10月25日 23:52 | # | 引用

startar 说：

为啥这里可以直接写 onClick={this.handleClick} ？而不是this.handleClick.bind(this)

2015年10月26日 19:20 | # | 引用

phc 说：

在DOM4中，HelloMessage是自定义的吗，还是react中有规定，另外如果是自定义的话那首字母必须大写吗，因为我试了下，如果首字母小写的话是不报错，但是也没显示出来，所以这里的名字是自定义，但是首字母必须大写的对吗老师

2015年10月27日 10:54 | # | 引用

灵魂机器说：

阮大哥好用心，react 0.14 才出来一个月，这个教程已经更新了，用上了 ReactDOM

2015年10月29日 09:44 | # | 引用

pv 说：

四：添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

试了一下，属性class和for都可以在页面上输出，代码（html忘记转义了，再发一次）：
var HelloMessage = React.createClass({
render: function() {
return <div>
<p>HelloMessage组件属性</p>
<p>name: {this.props.name}</p>
<p>date: {this.props.date}</p>
<p>class: {this.props.class}</p>
<p>className: {this.props.className}</p>
<p>for: {this.props.for}</p>
<p>htmlFor: {this.props.htmlFor}</p>
</div>;
}
});
ReactDOM.render(
<HelloMessage name="张三" date="2015-10-30" class="icon iocn_home" for="AAA" className="BBB" htmlFor="CCC"/>,
document.getElementById('example')
);

2015年10月30日 16:51 | # | 引用

嘴角上扬说：

阮老师，能不能把react结合ES6谈一谈呢，与ES5还是有点区别的。

2015年11月 3日 11:46 | # | 引用

PV 说：

引用pv的发言：
不好意思，没有深入理解学习四：添加组件属性
确实是 class 属性需要写成 className ，for 属性需要写成 htmlFor

2015年11月 5日 14:11 | # | 引用

ZJZHOME 说：

谢谢阮老师~

demo2和demo3里迭代数组会报警告: Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using

另外demo9也会报警告不要直接插入document.body.

2015年11月 5日 20:04 | # | 引用

大牛哦说：

几个月也太久了吧
我希望1个月能投入生产的

2015年11月 6日 14:29 | # | 引用

champ 说：

引用ZJZHOME的发言：
谢谢阮老师~

demo2和demo3里迭代数组会报警告: Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using

另外demo9也会报警告不要直接插入document.body.

你可以参考这篇文章：虚拟DOM Diff算法解析

2015年11月10日 20:46 | # | 引用

三石说：

看了阮老师这篇文章收益匪浅！我是做客户端的，之前琢磨react native，看到jsx有点头疼，读完此篇，疑惑全解了。既然也在支付宝，也是同事了，同事中的老师！赞！

2015年11月11日 15:23 | # | 引用

jeffreychen 说：

非常感谢，文章对我很有帮助，公司最近做react项目，正愁学起来麻烦，这篇绝对是超好的入门教程

2015年11月11日 15:59 | # | 引用

lazyou 说：

良心文章啊。随react版本变化而更新文章。

2015年11月13日 15:26 | # | 引用

阿发说：

ES6版在这,https://github.com/zhuangtongfa/react-demos
求star

2015年11月15日 11:20 | # | 引用

喷子说：

引用初学者的发言：
现在真心不想用框架了, knockout, backbone, angular以及这个.
每次为了适应一个新框架, 需要学习很多额外的语法, 而且等到其他人来维护的时候, 却完全维护不动...
我决定以后顶多用个jQuery, 差不多大家都能看明白;
如果是移动端直接就原生写吧, 实际上也没多少代码量.

先攒一下阮一峰老师，Angularjs现在正在用，完成俩一下项目，感觉很顺，代码量少backbone和angular我认为不能比，angular的模板载入绝了，还有路由都不错感觉比react完整，适合面向对象抽像不强人用，解耦等都不错，阮一峰老师这个文章入门真好，个人认为react面向对象抽像要强才能写的好

2015年11月17日 12:37 | # | 引用

狼说：

现在的框架每一个框架都需要你学习一种语法,这个代价也大..公司换人也困难..无论它多优秀..这个成本也挺高的.

2015年11月18日 10:05 | # | 引用

visvoy 说：

应该是react入门里面最好理解的教程了，最近找了一大圈react教程基本都是复制黏贴好坑人的，这篇绝对秒杀同类型教程

2015年11月18日 12:14 | # | 引用

lzs 说：

请问，您的例子如何在webstorm里面写呢，因为是html格式的，它一直报错，在js里可以正常提示jsx，如何在写html的时候还让它认识react呢？

2015年11月24日 11:30 | # | 引用

react菜鸟说：

想请教一下大神这里面的中文乱码怎么解决?

2015年11月27日 14:18 | # | 引用

brucecham 说：

React非常优秀，阮老师也一直非常优秀，非常好的一篇入门文章，阮老师一直出精华。
React亮点是html作为了js组件，实现了dom diff和状态机的思想。
React解决的一些问题，其实用一些简易优秀库，各取其核心，一样可以实现需求，而且开发成本也低，不会像React一样，各种查api，时间大部分都花在了看api上
但个人认为，前端开发应该简而大方，不应该被一个react或angular局限在它们的生态圈中。一年前还有很多人在追逐angular，想着统一天下，现在又开始追逐react
没有完美的框架存在。简单了，维护性才好

2015年11月28日 16:28 | # | 引用

小马说：

真心赞一个，给了我们新手不少帮助，

另外在重复一个问题，我也遇到了demo2和demo3里迭代数组会报警告: Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using

这个该怎么解决？

2015年11月30日 10:31 | # | 引用

热血又不热血说：

阮老师太牛逼了，所有文章都简洁易懂，学了好多知识。

2015年11月30日 11:01 | # | 引用

seanxiao 说：

我都不好意思在潜下去了。。写的好！

2015年11月30日 16:18 | # | 引用

吖木说：

引用吖木的发言：
五、this.props.children

function(child){
return {child}
}

这里应该是这样吧？

五、this.props.children

function(child){
return <li>{child}</li>
}

2015年11月30日 16:52 | # | 引用

路人甲说：

文章很棒，但预测React只叫好不叫座，不建议多看，还是应该多看ES和JQ。再牛B的框架，也绕不开浏览器的渲染机制。至于React还出了Native版的，这个纯属FB的痴心妄想了，Native的一统世界了，让安卓和iOS喝西北风去吗？

2015年11月30日 17:15 | # | 引用

longfei 说：

demo5应该return <li>{child}</li>;

2015年12月 2日 14:39 | # | 引用

kun luo 说：

原来阮老师这篇文章更新了啊，赞！

2015年12月 3日 09:25 | # | 引用

sk-blog 说：

很好的入门教程~~~希望能有一篇文章，说说reactjs的实现原理~

2015年12月 3日 17:25 | # | 引用

gxr1020 说：

阮老师，第五点 return {child}; 应该 return <li>{child}</li>

2015年12月 5日 18:24 | # | 引用

阮一峰说：

谢谢指出 Demo05已经改过来了。

2015年12月 5日 21:07 | # | 引用

罗文兴说：

引用rolin的发言：
貌似this可以随便用都无视函数作用域？

this用在react内部的函数里面，比如render，由react调用肯定没问题，

this用在自定义函数里面，都要有显示绑定this，比如 onChange={this.handleChange}

2015年12月 8日 15:48 | # | 引用

罗文兴说：

引用邬畏畏的发言：
我个人的感觉，JSX是需要React解析的，这种语法糖也会改变开发JavaScript的开发方式，时间久了会导致原生JavaScript不熟了，因为好多问题你要前端非常熟悉JavaScript，否则就导致漫天大海的在网上找解决方案。

我个人觉得，类似React的这种东东不要改变JavaScript写代码方式，可以在用JavaScript编写面向对象的组件上解决组件开发中单点的处理，而不是弄一套体系改变前端开发人员的开发方式。

React是可以不用JSX的，可以直接写js

jsx：Hello {this.props.name}
js：React.createElement("div", null, "Hello ", this.props.name);

主要是jsx的类html语法比起原生js容易构建用户界面，嵌套层次一多自然会去用jsx了，只是做一层预编译

2015年12月 8日 15:57 | # | 引用

az 说：

Demo，做得不错

2015年12月10日 00:09 | # | 引用

ZZP 说：

demo 9里面 handleChange 需要传递event进去，还有就是input里面value={this.state.value}

2015年12月17日 09:31 | # | 引用

ky 说：

踩到了一个坑。

组件的命名：应该是首字母大写的。

习惯了驼峰命名法的coder，看到这个文章可能会果断小写，题主可否修改下？以免大家误解造成浪费时间，无法继续学习。

ps. 问了一圈得到答案后，搜索了下本页，居然很多人都发现了 - -

2015年12月19日 20:28 | # | 引用

Thomas 说：

感谢分享时下最热的前端开发框架中文版介绍。

2015年12月21日 17:55 | # | 引用

Jason Lee 说：

一直有关注阮老师的博客，可以说这个博客真正促成了我进入前端行业，感谢！

说回这篇文章，React.js 的几个核心概念都阐明得很清楚，提一点意见，只解释概念和给一些小Demo 是不够的，React.js 的使用情景是数据随时变化、模型之间互有依赖的复杂应用，其革命之处乃是在于数据单向流动的Flux 模型，初学者理解这个模型比弄清组件、传参这些概念重要得多。

2015年12月24日 12:33 | # | 引用

jack 说：

组件之间是如何通信的？？？

2015年12月29日 01:57 | # | 引用

ls 说：

当有一组按钮，
点击其中一个添加 active 样式，
其兄弟按钮，删除active样式。
这样的操作，不利用jquery或zepto这样的框架。
在react 中怎样实现呢？

2015年12月29日 10:01 | # | 引用

李黎说：

您好，我在执行demo2/inde.html时，报错如下Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information.
虽然对页面显示没有影响，但是我想知道为何会报这样的错误，以及如何解决？
我有试着百度结果，但是最终还是没有解决，希望您能够抽空解答一下，谢谢……

2016年1月 4日 14:22 | # | 引用

陈美远说：

关于browser 官方放了cdn 速度很不错

2016年1月 8日 11:44 | # | 引用

edward 说：

男神，能不能在多写react在实际应用的文章。或者微博发篇0.13和0.14的区别？因为现在许多教程都是0.13的而0.14有许变化引用就不同text/jsx也变了我想知道为什么？

2016年1月11日 16:55 | # | 引用

tyler 说：

发布这么久了，才看到

2016年1月14日 09:08 | # | 引用

deng, chao 说：

看到混写js和html那就给跪了。整一个增强版的前台jsp语言。
膜拜！！

2016年1月15日 17:40 | # | 引用

Xixilive 说：

深入一点说的话，Virtual DOM中的Style要写成Object的形式是因为它的DOM-Diff算法的需要，界定add/remove操作

2016年1月15日 22:45 | # | 引用

Xixilive 说：

引用李黎的发言：
您好，我在执行demo2/inde.html时，报错如下Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information.
虽然对页面显示没有影响，但是我想知道为何会报这样的错误，以及如何解决？
我有试着百度结果，但是最终还是没有解决，希望您能够抽空解答一下，谢谢……

由于React注重UI效率，使用Virtual DOM Diff来提高效率，最小化Html DOM渲染开销，所以遇到DOM nodelist时期望每个node有个key来做引用标识, 这仅仅是一个Warning，一般不会对你的App功能造成影响，但是应该注意此类问题，大规模View中可能会引发性能问题。

解决此问题的方法就是给你的Virtual DOM Nodelist中每个Node加唯一的key标识。


{List.map(function(item){

  return (<li key={"Item-"+item.id}>{item.name}</li>);

})}

2016年1月15日 22:56 | # | 引用

仝鹏飞说：

看见React的代码我都感觉好恶心。
没有我写的html页面简洁明了。

2016年1月16日 11:40 | # | 引用

Hank 说：

引用Nixus的发言：
我有点儿贪心了：React能否开发游戏/移动端游戏？

2D交互游戏肯定是可以的

2016年1月20日 12:10 | # | 引用

某夔说：

支持OOP否？比如可以写一个子类，覆盖超类的方法。
有（或将来会有）代码提示IDE插件否？

2016年1月23日 21:19 | # | 引用

luobotang 说：

引用郑晋的发言：
React已经是尽量专注于表现层了，没有加入太多东西，怎么会很复杂。

已经在工作中使用了，React 上手的话还是可以的，但是真的用来做较为复杂的页面，还是要花些时间查看文档的，不是很简单。
而且，完善的功能实现的话，不会只有 React，我做的时候是参照 Flux 的架构，由于不熟悉，真的是有些费劲（这个数据流还真是不寻常....）。

2016年1月26日 11:15 | # | 引用

batsing 说：

通览一遍，一句话“jQuery把前端带到了极简主义，React把前端带到了复杂主义”。这些DEMO里隐隐看到的都是PHP模板渲染的东西。对，facebook就是用PHP的。把PHP做的事情换成用JS来做，还写得那么复杂，真不明白有什么意义。

2016年1月26日 15:30 | # | 引用

he5310 说：

引用郑晋的发言：
只有组件还处于挂载状态下，才有setState从而更新视图的意义。

说通俗点，就是当组件渲染完成之后才设置组件的形态（以免get返回数据快过组件渲染速度，造成无法设置组件形态。）

2016年1月27日 14:39 | # | 引用

Cheny 说：

因为ReactJS的大名一直如雷贯耳，所以便花了些时间了解一下。原本以为只是简单的不同于JQuery的封装，但实际上却是完全打破了以前HTML开发的模式。
看到上面一大串的拍马评论，和对那位名为“初学者”的留言用户的抨击，忍不住写下看法。
从使用HTML属性到HTML和CSS分离，再到JavaScript处理逻辑，用了不短的时间。现在很少看到杂糅着各种语言的页面代码。
所以，最初看到ReactJs代码的时候，简直不敢相信眼睛，这么多年分离的结果，又活生生地杂糅到了一起。
歪果仁的创新能力的确强，前端这点东西折腾出了很多新的花样。但是FB的东西，实在是不敢说都是能改变世界的东西。FB为了让PHP更快用HHVM，脱离标准PHP。是的，他们的确是可以做到，很牛逼。但是这样真的好吗？最新的PHP7已经面世，打脸一般地证明了标准PHP同样可以很快。
ReactJS混合了JS代码和HTML代码，其实它只想做一件事情，那就是组件化前端。但是组件化前端真的有必要用这么极端和不优雅的实现方式么？JS的地位如今已经被哄抬到了一个它设计之初都没想到的位置。以至于为了坐上王位，JS必须用它不算坚固的权杖，支撑起自己。JS的语法结构根本很难以这样无限制的拓展和包容一切。
ReactJS概念的确是新颖，但是这不代表它就一定比分离代码和显示的模版优秀。组件化就代表着可复用？组件化就意味着可工程化。分离的模版就没法复用，没法工程化？
最大的一套说辞往往就是“未来的页面会日趋复杂”，真相真的是这样吗？不得不承认，现今的互联网页面的确是比二十年前的页面复杂，但是页面再复杂，也终究是有极限的。简单的设计风格已经逐渐成为设计潮流，复杂的页面难道没有又逐渐变简单的趋势吗？除了淘宝这类电商的页面复杂无比外，还有多少网站是需要极其复杂的动态前端。
越是简单的页面越是能让用户易于理解和提高更好体验不是吗?至于什么丰富的交互，革命性体验，ReactJS和普通前端架构又有什么区别。
组件化可维护性很强，的确，从名称上看起来就有很强维护性。现在后端的代码也是所谓的组件化，甚至各种设计模式的应用，放到现实中的项目，真的能说“可维护性”很强吗？
传统前端所见即所得，我思即我需，应该更为贴近人类思想，这不正是编程语言所一直努力的方向么。
未来前端肯定会有更好的方向和发展，但绝对不会是ReactJS。

2016年1月27日 18:14 | # | 引用

村小闹说：

@Cheny：

感觉你说的有一定的道理，但是ReactJS能走多远，得用时间去验证和大家的认同

2016年2月 2日 09:54 | # | 引用

Swift 说：

问一句，如果我有一个想重复使用的组件，如果组件定义的代码放在一个单独的js文件里。
多个页面的多个地方要使用这个组件，有什么办法吗？
刚开始学习这个东西，也只是研究性质的，貌似组件的定义和组件的渲染一定要写作一起，不能独立开来的。
//定义
var SingleArticle = React.createClass({
render: function() {
return (

SomeArticle

);
}
});
//渲染
ReactDOM.render(React.createElement(SingleArticle, null),
document.body);

还有，在式样定义上也觉得蛮奇葩的，JSX不走标准化路线，可能学了之后，没有其他使用的地方。
React Native还是算了吧，开发Native的程序的成本现在也很低了。

2016年2月 5日 15:00 | # | 引用

Yuan25 说：

文章中对于onClick的处理，没有这样写：this.handleClick.bind(this) 而是直接 this.handleClick()的话，会不会有this在调用时被改变的错误发生？谢谢

2016年2月11日 23:34 | # | 引用

奋斗说：

你好，我下载的0.14版本中没有了browser.min.js？该怎么将JSX 语法转为 JavaScript 语法？

2016年2月14日 16:03 | # | 引用

阮一峰说：

@奋斗：

browser.min.js是Babel提供的。可以就只用Demo里面的版本。

2016年2月14日 20:24 | # | 引用

辉辉说：

帅的不能再帅了！！！给您大大的满分！！！

2016年2月17日 11:56 | # | 引用

刘毅说：

非常浅显易懂，赞
你的blog我一直在看

2016年2月23日 19:38 | # | 引用

J 说：

引用Yuan25的发言：
文章中对于onClick的处理，没有这样写：this.handleClick.bind(this) 而是直接 this.handleClick()的话，会不会有this在调用时被改变的错误发生？谢谢

this.handleClick(); 这里可以这些写，简单说的话是因为这里其实会被解析转换（注意所有的代码写的是jsx，既不是js也不是html,当然最终是会被解析成js），底层还是会调用bind(this)或类似的方式绑定正确的this。

2016年2月25日 15:56 | # | 引用

xxl 说：

大神您好！本人初学前端；想请教下，demo10的bind（this）的用法，如果我把这个去掉，系统就会报错：
Uncaught TypeError: Cannot read property 'opacity' of undefined
想问下，这里为什么是这样写的呢？
期待回复，谢谢

2016年2月26日 17:17 | # | 引用

py 说：

引用路人甲的发言：
文章很棒，但预测React只叫好不叫座，不建议多看，还是应该多看ES和JQ。再牛B的框架，也绕不开浏览器的渲染机制。至于React还出了Native版的，这个纯属FB的痴心妄想了，Native的一统世界了，让安卓和iOS喝西北风去吗？

你的“预测”在你预测的时间点已经是伪命题。JQ 说的是 jQuery 吗。。。。？这个应该多看？。。。。呵呵呵呵呵呵

2016年2月27日 11:40 | # | 引用

锋说：

this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));

这个没看懂，this.props.promise.then是什么意思？

2016年3月 1日 09:33 | # | 引用

Mr.Song 说：

写的比官方教程清晰多了，可以简单入门，很有帮助，感谢阮老师~

2016年3月 4日 10:43 | # | 引用

cy 说：

谢谢阮老师

2016年3月 7日 16:44 | # | 引用

DaWi 说：

受益匪浅！多谢阮一峰老师！

2016年3月 8日 16:17 | # | 引用

huan 说：

引用锋的发言：
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));

这个没看懂，this.props.promise.then是什么意思？

.then()是jquery的方法，参数(success(),error())
=>是es6语法，我理解为
componentDidMount() {
this.props.promise.then(
function(value){this.setState({loading: false, data: value})}.bind(this),
function(error){this.setState({loading: false, error: error})}.bind(this)
)
}

2016年3月10日 14:33 | # | 引用

刘说：

受益匪浅！多谢阮一峰老师！每篇文章都是精华。

2016年3月11日 11:32 | # | 引用

大孩说：

阮一峰老师:

这个验证为什么不会报错？

2016年3月17日 15:50 | # | 引用

王说：

访问react的网页，是不是必须把react.js，react-dom.js，browser.min.js这三个文件下载到客户端才能运行，这几个文件还挺大的，如果真是这样岂不是很影响性能和用户体验？有没有靠谱的解决方法呢

2016年3月17日 17:10 | # | 引用

channingbreeze 说：

太厉害了，拜读

2016年3月21日 19:52 | # | 引用

captainhy 说：

@Cheny：

同意。
大公司或许可以使劲折腾，小公司还是要多考虑软件的可维护性。
越复杂的东西就越难维护，js+html的模式,对一般开发来说不见得是好事。
或许未来等React更成熟，更优雅，坑填的差不多了，这种模式就流行了。

2016年3月24日 11:27 | # | 引用

黄忆南说：

谢谢教程的帮助，前端学习中，甚至有冲动自己写一个框架。js+html对css提供更好的对接方式，让开发更快。

2016年3月24日 13:04 | # | 引用

小敏说：

请问，什么叫“组件类只能包含一个顶层标签”？

2016年3月29日 20:14 | # | 引用

gostar 说：

学习组件话，先看看老师的入门一下~

2016年3月30日 16:47 | # | 引用

momognu 说：

感觉和qt，friemonkey类似，只不过使用的技术更亲近web开发

2016年4月 3日 13:17 | # | 引用

attilax 说：

说实话，目前react是最靠谱的web ui组件化方案了。

1.React的组件化才是web ui部件的正确方向

1.1.组件化集成html ,css,js自我包含一体化，方便复用。

不鼓励使用mvc模式。或者组件内部使用mvc来分离ui与js，但整个page页面是不提倡mvc的。。

1.2.相比angular。Js方便好用

2.React的问题与改进：

2.1. 可视化模板不容易得到dw的支持。。

作为模版，得到类似dw 这类可视化Html ide的支持的是必须的。。

改进建议：使用html文件作为组件，小型组件可以使用ajax读取载入，这样组件可以方便dw的设计。。大型组件可以使用ajax载入，也可以iframe方式载入。。

2.2.组件的html与js的集成是以js为基础的

这导致了界面可视化设计极差。。应该以html dom为基础，在html的基础上内嵌js。。Js本身就是代码，可视化要求相对较低。。Dom 标签使用常用的class 增加一个特点的oocss class来表明一个组件的类型，以及复合组件，或者可增加一个扩展属性。。

2.3.组件的属性以js为主

这带来查看属性值的调试的问题，如果可以在html标签上扩展属性，就方便调试，毕竟浏览器查看工具可以一目了然的查看属性的值

2016年4月 4日 02:42 | # | 引用

pake.liu 说：

demo13怎么玩的，

2016年4月 7日 16:58 | # | 引用

Patrick 说：

请问如果定义 var MyButton = React.createClass({...})放在单独文件里比如 abc.js
html页面引用 <script type="text/babel" src="//www.greatytc.com/links/js/abc.js"></script>

页面来定义在哪里渲染（其实为了重用)，页面调用：

为什么不行？
Uncaught ReferenceError: MyButton is not defined

2016年4月 8日 17:13 | # | 引用

沃哥说：

写的很好.学起来很容易.

2016年4月12日 11:16 | # | 引用

SpaceXi 说：

比那些什么鬼视频讲的好多了

2016年4月12日 15:36 | # | 引用

magce 说：

一目了然，虽然现在只是大致看了一下没有一个个demo去尝试着做，
但是的确比其他教程要好得多！

2016年4月13日 12:28 | # | 引用

silent 说：

太棒了，清晰明了，受益匪浅

2016年4月18日 11:15 | # | 引用

the lighting 说：

由浅入深，大赞

2016年4月18日 18:02 | # | 引用

迹忆说：

React个人感觉还是挺简单的。很喜欢阮老师的文章，写的很细致。

2016年4月19日 13:27 | # | 引用

小花punk 说：

学习了，非常感谢！！！

2016年4月19日 18:09 | # | 引用

Heafib 说：

写的非常好，自己琢磨好长时间，没有太懂，来这看了一个晚上，收获很多！非常感谢！

2016年4月21日 20:08 | # | 引用

limingyang2012 说：

回过头来看，真的不错，

2016年4月24日 13:32 | # | 引用

古林子说：

组件化，这个发展的趋势有点像Flex！

2016年5月 2日 23:24 | # | 引用

顾宇说：

感觉前端的发展就是大家在制定一套界面设计的DSL，看谁更经济。

2016年5月 3日 12:41 | # | 引用

Modle_Sherlock 说：

求教啊,在做项目时候,要发布上服务器,broswer.js很大,我用react-tool 把jsx的组件文件转化成了js文件,然后移除了browser.js的引用,页面渲染不出来啊?难道不能缺少browser.js吗?

2016年5月 4日 16:54 | # | 引用

潘少说：

感觉vue跟react好像

2016年5月 6日 18:59 | # | 引用

amySand 说：

好用，点赞，很好的入门实例，对react有了大概了解，谢谢。

2016年5月 9日 10:38 | # | 引用

liugxa 说：

Web的问题是否能够依靠"组件化"来解决是需要讨论的？但现在出现的现象，是我们过于关注技术本身，而忽略了Web自身的特性。如此众多的组件库和框架都试图证明自己是解决Web的不二法则，有注重服务器端解决方案的，例如
* Tag library - Struts Tag
* Template Engineer - Velocity, Freemaker
* Components: Awt/Swing, JSF

有关注客户端的解决方案的，例如
* Flash, Applet
* java-script library: YUI, Dojo
* java-script framework: Angular, EmberJs, Rect.js

那么什么是Web的实质呢？它原本只是用来展现数据的载体，至于什么方式或者方法其实是无所谓，你用Struts Tag也好用Dojo也好，都只是为"展示"这个动作服务的。过分的关注工具的使用，而忽略了技术之外的东西（比如Dom, CSS, javascript语言这些本身的特点）就本末倒置了。

2016年5月10日 11:31 | # | 引用

秋叶说：

玩玩新东西还是可以的，但个人感觉这种写代码方式会扰乱正常js的写法方式，有的时候学得越多越混，到头来写简单的js都犯低级错误是得不偿失的。

2016年5月10日 15:16 | # | 引用

阿萨德斯蒂芬说：

引用郑晋的发言：
只有组件还处于挂载状态下，才有setState从而更新视图的意义。

我还是有疑问，componentDidMount已经是渲染完成了，这就证明组建已经肯定是处于mounting状态的。$.get(url,function)这里的function是成功后的回调，也就是说，数据已经返回了。
1、组件状态是mounting状态。
2、数据已经返回。
为什么还要判断isMounted()？

2016年5月13日 14:41 | # | 引用

666 说：

引用业界大牛的发言：
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

props,在这里很常见的用法是传参,显然形参你改了也灭用
而state这个属性就要好好把玩了,也说了,交互中很常见的状态

怎么感觉你是 => 张鑫旭大师呢

2016年5月16日 15:09 | # | 引用

spring 说：

demo13 npm install 安装后运行node server.js还是报错，应该是jsx编译报错
报错信息是
E:\www\myTest\react-demos-master\demo13\src\server.js:20
<body>
^

SyntaxError: Unexpected token <
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3

烦问这是什么原因？试过直接安装babel-core 和 babel-cli也不行

2016年5月17日 11:34 | # | 引用

阮一峰说：

@spring：

看demo13的README，需要 npm run build。

2016年5月17日 12:33 | # | 引用

spring 说：

引用阮一峰的发言：
@spring：

看demo13的README，需要 npm run build。

哇喔，果然，谢谢偶像

2016年5月17日 17:18 | # | 引用

夏逢坤说：

我们这项目要用 React和OnSen UI开发苦苦找了很多看的很痛苦！
当我看到您分享的入门很快，谢谢
希望有些深入React 见解案例分享下
谢谢！！！！

2016年5月17日 20:07 | # | 引用

刘草说：

引用郑晋的发言：
只有组件还处于挂载状态下，才有setState从而更新视图的意义。

可是componentDidMount()不就是视图挂载后才响应的事件吗？

2016年5月21日 16:02 | # | 引用

假大空说：

歪果仁奇思妙想，果仁跟风。

2016年5月23日 16:33 | # | 引用

cristal000o 说：

1、demo10中的，this.timer是表示timer是组件实例的一个属性么？2、setInterval函数中的回调函数，为什么还要加.bind(this)？

2016年5月31日 11:14 | # | 引用

路人甲说：

引用cristal000o的发言：
1、demo10中的，this.timer是表示timer是组件实例的一个属性么？2、setInterval函数中的回调函数，为什么还要加.bind(this)？

你可以搜索下js的bind用法

2016年5月31日 12:35 | # | 引用

555 说：

引用cristal000o的发言：
1、demo10中的，this.timer是表示timer是组件实例的一个属性么？2、setInterval函数中的回调函数，为什么还要加.bind(this)？

setInterval()内部的this指向window,而我们需要当前的对象，故绑定this传入。

2016年5月31日 19:16 | # | 引用

555 说：

引用cristal000o的发言：
1、demo10中的，this.timer是表示timer是组件实例的一个属性么？2、setInterval函数中的回调函数，为什么还要加.bind(this)？

忘了说，bind()是ES5的方法，所以想兼容浏览器，需要自己写一个bind()函数。

2016年5月31日 19:18 | # | 引用

Lucas 说：

老師,
我練習完你的範例之後,
試著將組件拆成外部一個個的js檔後發現就報error,
我也試著上網查了相關的教學,
發現大家的教學好像都是將組件寫在同一隻js或是html中,
不知道如果是以下的結構要怎麼樣往外拆?

遠本寫在index.html中的js

var Test = React.createClass({
render: function () {
return (
Test
);
}
});

ReactDOM.render(
,
document.getElementById('main')
);

想要改成link:

2016年6月 1日 22:08 | # | 引用

勇俊说：

刚一打开页面感觉好长一篇，看完才发现下面都是评论。。。

2016年6月 3日 15:31 | # | 引用

一笑解千愁说：

@Cheny：

层住观点我比较赞同，框架这东西仁者见仁智者见智，不是流行的就是好的，适合自己就好

2016年6月 7日 12:06 | # | 引用

裘曾渊说：

引用郑晋的发言：
React已经是尽量专注于表现层了，没有加入太多东西，怎么会很复杂。

今天再来看的，react生态是最复杂的

2016年6月12日 07:45 | # | 引用

张二孩说：

最初看到您的文章觉得写的也不错，但是并没有出彩的地方（个人愚见）！直到今日学习react，看了好多教程，包括官方英文的教程，皆不能得其要领！直至看到阮老师的react文章，一句话真是对我醍醐灌顶，帮助甚大，特此鸣谢！！！

2016年6月13日 10:55 | # | 引用

若惜勿忘说：

引用rolin的发言：
貌似this可以随便用都无视函数作用域？

初代版本有做 this 作用域的封装～

2016年6月15日 16:07 | # | 引用

John 说：

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求, 这里应该是propType，应该是小写开头的。

2016年6月18日 11:59 | # | 引用

若然说：

@Cheny：

严重赞同！真不觉得“初学者”说的有错，代码维护连续性，确实存在这些问题。不能从正面解决问题出发，除了打击、抨击，显得高高在上，很爽？！

2016年6月18日 13:29 | # | 引用

pashae 说：

您好，我在使用最新的react开发的过程中发现无法使用ReactDOM.findDOMNode这个方法；有什么解决办法呢

2016年6月23日 00:42 | # | 引用

瀚海说：

React是facebook的项目，然而他们的老大，马克扎尔伯格不是说过自己投资HTML5是极大的失败吗？那我很好奇他对于HTML5相关的项目或者技术的支持力度能有多大，或者说有多久？
一个框架，不是要看它一时的风光，而是未来的可维护性。jQuery为何能够生存十年还屹立不倒？这离不开数万个程序员的你一字我一句的代码维护。
如果真的要制作MVC框架，其实Angular就是个很好的选择了吧，至少人家在1.X版本风靡的前提下，胆敢大刀阔斧的推出2.X版本，这本身就说明了这个团队的精益求精。
此外，项目也必须考虑到后续的维护呀，如果现在用的是昙花一现的框架，那么接手的人遇到了问题，想在网上找个解决方案都不太容易，总不能让他们重新制作一个网站吧？

2016年6月27日 03:12 | # | 引用

瀚海说：

当然，以上的言论并没有针对阮老师的意思，阮老师对于我而言，是新兴技术的一盏明灯。
只是觉得有些人只顾追逐时尚潮流，却不顾框架/技术是否适合自己适合团队，是否具有可维护性就去讥讽他人，这种行为不太雅观。

2016年6月27日 03:23 | # | 引用

happyChong 说：

求推荐react与现有项目结合的文章

2016年7月 4日 21:21 | # | 引用

smilebai 说：

引用happyChong的发言：
求推荐react与现有项目结合的文章

同求

2016年7月 8日 17:53 | # | 引用

Jerry 说：

引用瀚海的发言：
React是facebook的项目，然而他们的老大，马克扎尔伯格不是说过自己投资HTML5是极大的失败吗？那我很好奇他对于HTML5相关的项目或者技术的支持力度能有多大，或者说有多久？
如果真的要制作MVC框架，其实Angular就是个很好的选择了吧，至少人家在1.X版本风靡的前提下，胆敢大刀阔斧的推出2.X版本，这本身就说明了这个团队的精益求精。

1.React不是MVC框架，它只能算是MVC中的V
2.Angular1.x和2.x完全是两个不同的框架,也没给出迁移方案，太坑了（2.x）！
3.我们只有对框架的深入理解后，才能为项目技术的选型提供很好的保障

2016年7月11日 09:25 | # | 引用

zeroone001 说：

把官方的文档看完，再看这个也是很有收获

2016年7月15日 11:57 | # | 引用

路人乙说：

正因为追求极致，才推进了前端行业的蓬勃发展。丰富的交互，革命性体验，ReactJS确实比其他普通前端架构更好，特别是移动端，甩Angular几条街。虚拟dom这一概念提高了web性能，部分其它类似的框架都是直接操作DOM，这点不得不服。单看fps，实际测试react在51-60fps, h5在33-55fps。
还有native方面，追求App和wap的统一，react提供了目前最好的方式。
当然实际开发项目里，不只有react，还有和他相关的好多，比如redux,router，为了追求极致，你还可以再上immutable.js。react实现了完全的前后端分离，国内目前也有好多再用了。
颠覆了传统的前端行业，目前在学习，着实惊叹！！！

2016年7月17日 23:54 | # | 引用

路人乙说：

新兴技术自然有它的优势，太多人不愿花额外的学习成本去了解它，就开始喷了。说啥维护性不好，说啥别人都是跟风，竟然还有人固守jQ，没有学习永远不会有成长。

2016年7月18日 00:05 | # | 引用

键盘侠说：

老师的文章除了Flex篇其他都是精髓

2016年7月18日 21:56 | # | 引用

码字所得税说：

哪位有测过demo06，为什么我的没报错，正常输出数字？

2016年7月22日 14:51 | # | 引用

yh 说：

只想说一句谢谢！

2016年7月26日 14:59 | # | 引用

asyxu 说：

引用码字所得税的发言：
哪位有测过demo06，为什么我的没报错，正常输出数字？

我也是。。。

2016年7月29日 17:45 | # | 引用

canca 说：

this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));

请问这段代码是什么意思呢？有什么地方可以深入研究

2016年8月 1日 14:12 | # | 引用

tommyhu 说：

老实说，初看react这样的代码风格，非常恶心，强迫症患者是在是受不了那种代码无依无靠的感觉

2016年8月 1日 17:23 | # | 引用

seven 说：

我喜欢先简单看一下然后再仔细学的。这样会让我的记忆深刻。但是很难找到阮老师这种很精简的学习教程！！初学者的福利啊！！谢谢阮老师

2016年8月 4日 18:20 | # | 引用

遥远的光说：

引用asyxu的发言：
我也是。。。

审查元素报错信息在console里面

2016年8月 5日 16:30 | # | 引用

嘿嘿嘿说：

demo11里面的get是跨域吗?为什么直接能获取，是在服务器端处理了吗？

2016年8月 6日 19:41 | # | 引用

xiaobin 说：

会让人少走弯路！赞！

2016年8月14日 00:00 | # | 引用

yyfer 说：

最近公司要用一个项目需要用到react，没有学过，找到这里来了，很好的一篇入门文章，thx

2016年8月16日 18:27 | # | 引用

王朋说：

您好，看了你的文章受益匪浅，但是有个疑问，就是第七讲你说this.refs[refName]是真实的，但是我看的视频讲解里面他说是虚拟的，是react的，这个怎么理解啊？

2016年8月16日 23:31 | # | 引用

李阳说：

我觉得阮老师就是中国的尼古拉斯赵四，不对，尼古拉斯 zakas！

2016年8月17日 20:44 | # | 引用

leeho 说：

阮老师的教程果然通熟易懂，干货

2016年8月19日 12:35 | # | 引用

chenjianyi 说：

@Lucas：

因为这个不是标准的js啊

2016年8月24日 12:31 | # | 引用

Walkerqiao 说：

阮老师的文章都挺好的，非常通俗易懂。

这里推荐一个关于react的比较好的网页： http://survivejs.com。

里边主要分两大篇，一篇是说如何成为react高手，另一篇是如何使用webpack来进行工程化管理的，都比较经典。

里边提供了最终源码，不过建议从头开始，一步步读下去，边读边写，边看效果。对react, webpack的认识和使用还是蛮有帮助的。

虽然现在还不是很熟悉，但能上手一点点简单的东西，大家有兴趣可以看我的github demo :
https://github.com/walkerqiao/react-redux-router-demo.git

欢迎大家一起探讨学习。

2016年8月24日 18:30 | # | 引用

Miracle 说：

读了您的文章，感觉通俗易懂，有一种想要跟着你的脚步一步一步向前的想法，谢谢您！受益匪浅！

2016年8月26日 11:01 | # | 引用

kevin 说：

为什么没有一个回到顶部的按钮呢？

2016年8月27日 14:49 | # | 引用

cosbor 说：

看了些评论，想说两句。JQ和react根本没有冲突啊，两者解决的问题不一样。JQ是个工具类库，react是前端开发的一个框架。个人觉得react更适合开发移动端SPA(单页应用)的项目，解决的是页面组件的复用性和维护性等问题，思想理念是比较创新的。我们学习一个框架不光是学习如何用，更要学习框架的架构思想和它所能解决的问题是什么？到底适不适合我们的项目。我也坚持认为react并不适合所有项目，因为开发领域就没有银弹。

2016年8月29日 13:31 | # | 引用

Learner 说：

搞不懂现在的编程语言的设计理念了，以前提出逻辑与展示分离，我决得调理清晰，然而淘汰了ASP, JSP这种 HTML 和JS 之间互相嵌套的web语言，现在React 的设计理念差不多，却得到很多人的追捧，搞不懂，我个人觉得一个好的语言的展示与逻辑实现还是分离的好， html标签里面不要写js，调试维护成本高，现在的框架为了功能强大，有点乱套了，有的框架设置支持后端服务的工程，我决得没必要。一个好的框架，简单，逻辑清晰最重要。

2016年8月31日 15:25 | # | 引用

白一梓说：

引用py的发言：
你的“预测”在你预测的时间点已经是伪命题。JQ 说的是 jQuery 吗。。。。？这个应该多看？。。。。呵呵呵呵呵呵

jquery博大精深，我想没有几个人能够完全了解其源码。

2016年9月 3日 11:00 | # | 引用

gaowen 说：

引用业界大牛的发言：
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

props,在这里很常见的用法是传参,显然形参你改了也灭用
而state这个属性就要好好把玩了,也说了,交互中很常见的状态

看了阮老师教程就是能静下心来看入，我也发现这里this.props 和 this.state

个人认为最大区别是

this.props 是组件被引用时在组件自身内部用 this.props 接收当前自身的所有属性value

this.state 是组件自身内部操作

不知道对不对，有知道朋友指点一下

2016年9月 3日 11:35 | # | 引用

silence Li 说：

添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

class 和 for应该是ES6(ECMAScript 6)的保留关键字比较好点

2016年9月 6日 17:13 | # | 引用

小x 说：

感谢峰哥的入门教程，有个疑惑，demo7获取真实dom节点，应该是使用React.findDOMNode(this.refs.myTextInput)吧。

2016年9月 9日 15:10 | # | 引用

keller 说：

说说redux或者flux
还有VUE 等其他框架

2016年9月18日 14:31 | # | 引用

hyhappy 说：

引用rolin的发言：
貌似this可以随便用都无视函数作用域？

好像是用bind实现的，改变了上下文

2016年9月19日 14:59 | # | 引用

An0nymous 说：

看您发的React文章比较多啊，如果做前台和后台不考虑兼容您分别推荐使用哪个框架？

2016年9月20日 11:44 | # | 引用

An0nymous 说：

引用An0nymous的发言：
看您发的React文章比较多啊，如果做前台和后台不考虑兼容您分别推荐使用哪个框架？

补充上条 React 跟 Angular

2016年9月20日 11:48 | # | 引用

未伊说：

认认真真看了一遍又一遍受益良多学习了

2016年9月21日 11:31 | # | 引用

王鲁说：

只用了半个小时，就从一个刚听说react的小白升级为初学者

2016年9月21日 15:39 | # | 引用

漫步钓鱼说：

后台开发者，想学点前端技术，看了这个，很容易懂，谢谢阮老师，希望多更新

2016年9月21日 16:58 | # | 引用

不必知道说：

@Learner：说得好

2016年9月21日 17:16 | # | 引用

迷途小前端说：

老司机领路，学啥都快

2016年9月22日 15:35 | # | 引用

赵小兵说：

老师讲的真好，通俗易懂。特佩服这种无私的分享精神。

2016年9月29日 20:11 | # | 引用

零度·冰华说：

前端新人，前来学习，也算是看了阮老师不少博客了，这篇同样让我受益匪浅。谢谢老师啦！

2016年10月 5日 14:03 | # | 引用

OliveKong 说：

请问，我做第六个例子的时候，为什么不会报错呢，就算要求字符串是必须的，我把变量定义成数字也照样会显示出来

2016年10月10日 11:28 | # | 引用

SA 说：

引用OliveKong的发言：
请问，我做第六个例子的时候，为什么不会报错呢，就算要求字符串是必须的，我把变量定义成数字也照样会显示出来

打开浏览器的控制台就可以看到报错信息.

2016年10月10日 13:59 | # | 引用

Yangfan 说：

楼上的同学，你的问题解决了吗，我也是做第六个例子的时候，控制台死活不报错

2016年10月10日 21:43 | # | 引用

小郭说：

一篇非常不错的文章

2016年10月14日 09:10 | # | 引用

吴映才说：

写得很好很基础，入门大概了解是够了。

2016年10月21日 16:59 | # | 引用

钟嘉俊说：

引用前端菜鸟的发言：
虽然跟着demo都敲了一下，但是发现自己什么都没有学会，render是干嘛的不知道，还有就是除了这些方法还有哪些方法，也不清楚，是不是我学的太浅了？

也许你学习的方式有问题，前提明白javascript 和 html/dom 这些看的才会明白一些。

2016年10月22日 16:44 | # | 引用

max 说：

应该可以折叠评论

2016年10月22日 22:45 | # | 引用

陈雯说：

type="text/bable"与type="text/jsx"有什么区别呢？我是刚学习react，有好多都不明白。。。

2016年10月24日 15:06 | # | 引用

张波说：

阮老师：我试着按照你说的这个，demo5中的例子试了一下，就是不成功，是不是安装配置没有装好，老师你写这些demo,都是基于npm 安装配置吗？需要不需要安装webpack ,我的本机上一直npm install webpack -server g 出错不知道怎么回事。

2016年10月24日 19:51 | # | 引用

杨静说：

您好，老师之前不是一直说需要让标签模板与JS分离，使得代码清晰，容易维护么，那react为什么要将标签与js混写呢还是没明白react的初衷

2016年10月27日 18:02 | # | 引用

webgeeker 说：

React 2 docs:
http://react2.webgeeker.xyz/

2016年10月28日 13:05 | # | 引用

夏灿说：

引用SA的发言：
打开浏览器的控制台就可以看到报错信息.

这只是一个警告，方便你的调试

2016年10月29日 01:11 | # | 引用

大名鼎鼎说：

vue.js呢？

2016年10月31日 15:10 | # | 引用

tylerdong 说：

有没有一些开源的适合做企业开发的库呢？

2016年11月 1日 17:48 | # | 引用

John 说：

你的文章讓我太感動了，我是個初學者一直不知怎麼入門，你的教學真是太棒了

2016年11月 1日 22:39 | # | 引用

Melody 说：

有没有使用webstrom的伙伴，一直语法报错怎么整？

2016年11月 3日 10:12 | # | 引用

我手写我心说：

非常感谢一峰老师的这篇文章，作为一个打算接触React框架的新人来说，Demo简单易懂，对React的用法有了一个具体的印象。

2016年11月 6日 11:53 | # | 引用

夏文科说：

看了一峰老师的讲解，对react.js略懂，感觉好强大啊，要好好研究，赞

2016年11月 7日 14:40 | # | 引用

蔡庆东说：

不知道为什么我做的demo2出错了，求解

2016年11月11日 11:24 | # | 引用

学习react 说：

建议楼主把回复清理一下，大部分瞎哔哔趋势的一点用没有

2016年11月11日 15:14 | # | 引用

张宝说：

“添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
”

这个地方还是不明白。我这样写☞

通过☞{this.props.class} {this.props.for}依旧可以取到。

“class 和 for 是 JavaScript 的保留字”不影响我取 this.props 对象的属性啊，对不？

2016年11月16日 12:59 | # | 引用

lovyist 说：

Hi, 开头的react-demos SSH的链接权限验证失败

2016年11月20日 20:09 | # | 引用

张朝阳说：

阮老师，您好，请问
react-native 开发HTTPS怎么实现信任自签名证书

2016年11月21日 10:37 | # | 引用

严志超说：

在老师的网站中看完文章点击广告，支持支持支持，有去广告插件的朋友，也把老师的域名添加上白名单，在次感谢老师的默默分享，谢谢.....

2016年11月22日 21:50 | # | 引用

DF 说：

感谢老师~！！！！！

2016年11月23日 18:33 | # | 引用

gp 说：

留个言，有广告随便发，哈哈哈，支持阮一峰老师，期望更多的好文章

2016年11月24日 08:38 | # | 引用

狼王说：

引用米兰的发言：
render 的时候重新生成了 Virtual DOM，但重新渲染UI时，React 只会对 Virtual DOM 中发生改变了的部分进行重新渲染。render 后 Virtual DOM 中 input 的 value 属性值其实发生了变化，但和真实 DOM 中 input 的 .value 想用，故没有渲染到UI中。
PS. 你可以通过在 input 上加上 ref="myTextInput"，并在 handleChange 里加入 console.log(this.refs["myTextInput"].props); 来打印 Virtual DOM 的属性值来发现其中奥妙。

2016年11月30日 09:32 | # | 引用

start 说：

引用小敏的发言：
请问，什么叫“组件类只能包含一个顶层标签”？

你可以理解为根标签，即最外层的标签

2016年12月 2日 21:34 | # | 引用

flytiger 说：

感觉和vuejs差不多，一样是属性，方法，钩子函数，组件，但是总感觉vuejs更优雅

2016年12月 5日 23:13 | # | 引用

张员外说：

没研究过，不知道维护成本高不，如果人员流动大，通用技术还是上手比较快

2016年12月 6日 09:07 | # | 引用

曾侃说：

多谢了，不知道怎么入门React的看这篇文章能有一个大概了解，非常感谢。

2016年12月 7日 14:32 | # | 引用

flybrother 说：

建议大家看完阮老师的教程后，可以在慕课网上看一些案例，来增加对react的理解

2016年12月 9日 16:18 | # | 引用

xiao_A 说：

整个网络,阮老师的文章是我最喜欢追的.
每一篇都能学到东西,棒

2016年12月15日 16:40 | # | 引用

李朝辉说：

我能去您公司打工吗，老师？

2016年12月18日 11:37 | # | 引用

Tree 说：

看完很受用，谢谢

2016年12月19日 11:11 | # | 引用

老六说：

本人是一个老全栈，之前只会js和jq，最近学习了angular和react，感觉世界变化真快，所谓全栈其实没有太多必要了，让专业的人做专业的事吧。

2016年12月25日 19:53 | # | 引用

paris 说：

我按照react官网的例子来学习，想用babel在本地将src/example.js转译生成到lib/example.js，从而去掉这个在线转译的，但是遇到以下问题：
因为example.js中有使用jquery 的ajax方法$.ajax()，jQuery是在html页面头部引入的，使用babel转译之后运行，浏览器报错 $.ajax()is not a function...
请问在利用babel本地转译的时候如何将react和jquery同时使用

2016年12月26日 14:22 | # | 引用

mj 说：

我还以为好多，哈哈原来都是评论。厉害了。

2016年12月27日 09:57 | # | 引用

xiasf 说：

好你个状态机，哈哈，不管什么只是从阮老师嘴里讲出来都变得通俗易懂，生动深刻。可以看出作者的功力，和对知识认真的态度，还有背后付出的辛苦，谢谢！

2016年12月28日 06:46 | # | 引用

moli 说：

引用mj的发言：
我还以为好多，哈哈原来都是评论。厉害了。

哈哈，我刚开始也是以为内容很多，原来评论没有分页。。。

2016年12月28日 17:41 | # | 引用

北夜人说：

看完文章，可以写react代码了。

2016年12月29日 22:23 | # | 引用

无名说：

引用刘大的发言：
看了二十几篇教程就写出个这。。？

不知道你是眼瞎还是眼瞎。标题说了是入门，你想写出什么？你来试试？

2017年1月 3日 17:27 | # | 引用

梅子说：

引用asyxu的发言：
我也是。。。

本身就会报错，在控制台，只是会正常渲染出来而已

2017年1月 4日 11:45 | # | 引用

xu 说：

很赞的，对新学习React帮助很大

2017年1月11日 15:58 | # | 引用

七月羽歌说：

这文章写的不能再赞了！！！

2017年1月13日 13:24 | # | 引用

fuguxu 说：

能大致了解react，浅入门，但不知如何运用在项目中

2017年1月13日 17:27 | # | 引用

玖头说：

阮老师，我想用react做开发，请问如何解决不兼容ie8的问题

2017年1月16日 13:20 | # | 引用

huangqing 说：

看您总结的技术点，比自己自学要懂得快。

2017年1月17日 22:08 | # | 引用

来凑热闹的后端说：

博主的文章很不错, 然后我发现评论区各位的观点更加精彩纷呈.
就是太多了, 有时间还要一一研读.

2017年1月19日 23:07 | # | 引用

Lovelliu 说：

demo在火狐浏览器中无任何显示

2017年1月20日 14:57 | # | 引用

Lovelliu 说：

demo2在火狐浏览器中无任何显示

2017年1月20日 14:57 | # | 引用

keith 说：

引用曲双如的发言：
实在是不能更赞，我能去您的公司打工不。哈哈。
马上仔细跟进。
在中国做一个前端，真的是挺有福气。

2017年1月21日 11:42 | # | 引用

前端半段说：

一峰大师，听说你在支付宝，你是在杭州的西溪园区吗？

2017年1月25日 14:57 | # | 引用

愛前端说：

React 其實就是處理UI層 (view層)。透過React 可輕易自行創造出類似 jqueryUI 的庫 (要配合自己的css)，從而在日後加速建立網頁和維護(由其是它的標籤化組件和輸入參數部份)。
防止采集又多了一層保護!?

就如站長所說，如果數據是單一化，實在沒必要使用React，反而令項目更複雜。

框架何其多，什至自己用JS 打出自己的一套東西都行，自己覺得那個順手就好了。

2017年2月 1日 18:49 | # | 引用

yaco 说：

这个教程目前位置会不会过时？现在看会不会有不一样的地方，好像几年前的帖子

2017年2月 9日 10:43 | # | 引用

韭菜说：

引用王恒的发言：
就是 class 属性需要写成 className
新版的不需要了直接写成class 就可以了

貌似是需要的

2017年2月10日 11:01 | # | 引用

韭菜说：

引用遥远的光的发言：
审查元素报错信息在console里面

严格来说，是个warning

2017年2月10日 11:32 | # | 引用

没错high少是我说：

引用cristal000o的发言：
1、demo10中的，this.timer是表示timer是组件实例的一个属性么？2、setInterval函数中的回调函数，为什么还要加.bind(this)？

setInterval自动执行，timer只是一个属性索引而已，有无不影响功能；setInterval的匿名函数this指向window，如果想在里面使用this调用组件，要么在外面事先把需要的保存在函数作用域如 let that = this; 要么上层this绑定到当前匿名函数也可以的

2017年2月10日 15:38 | # | 引用

梦想家说：

清晰易懂，非常感谢！

2017年2月11日 11:59 | # | 引用

百度军说：

适合零基础的看，现在官方建议用es6写react
什么时候写呢？最好是那种比较全面的实例讲解的文章

2017年2月16日 14:55 | # | 引用

^$ 说：

歪果仁肆意民科，果仁溜须拍马。我不是说react，我是说react，angular，都是垃圾。

为什么？因为所有实际参数少于需要参数的构造，无论它叫什么名字，都是函数的阉割，是不完备的。函数之所以不能让你爽，原因很简单，任何事物如果不受其他事物干扰，它基本上可正交定义，可稳定描述。如果被其他事物干扰，它就是不可正交定义，不可稳定描述的。只要事物不可稳定描述，这个描述是不完备的，基于这个描述的任何推论(也就是对它的任何调用)都是脆弱的，不完备的。

你所企图得到的，只是以需求的最小正交全集自动推理整个系统实现的工具，根据哥德尔定理，完备的东西不能自洽，自洽的东西不会完备，所以实际上你所企图的是不可能得到的东西。

不要小看了if和for这两个结构，当代码的执行路径依赖于运行时数据时，它就是下一阶逻辑，当前阶逻辑不可能知道下一阶逻辑，否则当前阶无输出时不需要执行，这是因果关系的最终局限。这种需要向前看的构造是不可以通过函数这种自顶向下的evaler来做动态规划的。

上面那个人说的对，你们这些整天对歪果仁对函数阉割出新花样的套路捧臭脚，然后自鸣得意的人，真是作死作孽。

2017年2月21日 14:17 | # | 引用

^$ 说：

现在的计算机科学就是垃圾，根本没有人工智能这个东西，有的只是越人工越智能的假智能，而且一旦带上智能这两个字，人工投入和智能产出必有数量级的差异。任何为了智能而智能的歧途都是走不通的。

2017年2月21日 14:25 | # | 引用

Demo 说：

{value}

);
}
});

ReactDOM.render(, document.getElementById('example'));

一下下按删除键，打印的是：
Hello
Hello!

Hell
Hello

Hel
Hell

He
Hel

H
He

为什么呀?

2017年2月22日 21:40 | # | 引用

牛牛说：

阮老师，我想问您一个问题，react父组件里面有子组件，我点击父组件里面的链接进到子组件时，可不可以只显示子组件，不显示父组件？

2017年2月23日 11:53 | # | 引用

天使在唱歌说：

引用tommyhu的发言：
老实说，初看react这样的代码风格，非常恶心，强迫症患者是在是受不了那种代码无依无靠的感觉

非常认同，但我觉得这可能是个适应的过程。

最开始看jquery也是不适应，但慢慢也就适应了。react这么火爆，自然有他的道理，我们慢慢去体会她的精髓吧。

2017年2月24日 16:05 | # | 引用

尚宏浩说：

demo12的

是什么意思，作用是什么，生成的 HTML怎么看不到key属性？
如果去掉怎么还会报错。。

2017年2月24日 23:32 | # | 引用

地球上的我说：

阮老师，我有点看不懂demo10里面
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
这儿style赋值为什么是双括号呢。。

2017年2月27日 16:59 | # | 引用

范玮頔说：

感谢写的这么易懂，支持

2017年2月27日 23:20 | # | 引用

狼人的逍遥说：

在第四个例子中并不是不能包含两个顶层标签，是将其中一个包含在另一个中还是可以的return
Hello {this.props.name}

some text

2017年2月28日 17:25 | # | 引用

linkinpark213 说：

引用地球上的我的发言：
阮老师，我有点看不懂demo10里面
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
这儿style赋值为什么是双括号呢。。

写成这样是就清楚些了：
render: function () {
var style= {
opacity: this.state.opacity
}
return (
<div style={style}>
Hello {this.props.name}
</div>
);
}

外层括号是选择jsx变量，内层以及其中的内容表示一个对象，与上述的style对象作用相同

2017年3月 3日 10:36 | # | 引用

前端菜鸡说：

用户操作表单元素时不可以通过ref属性来操作真实DOM来获取或者改变它的值吗？

2017年3月 8日 17:21 | # | 引用

高级菜鸟说：

学前端开发，看峰哥的文章就够了

2017年3月12日 23:41 | # | 引用

前端菜鸟说：

阮老师，为什么我用你的demo在microsoft egde上跑没效果啊？在ie 和chrome都能显示出结果

2017年3月13日 20:32 | # | 引用

小周说：

iframe中可以渲染父页面react.js的组件么

2017年3月16日 16:38 | # | 引用

Max 说：

2年前的文章，现在是不是过时了？

2017年3月17日 18:23 | # | 引用

刘进洪说：

请问怎么在一个页面里面引用另一个一面呢？也就是想html4的框架一样，我现在在被引用的那个文件里写上React的代码，在引用页面显示不出来，但是也不报错，该怎么做呢？

2017年3月20日 09:51 | # | 引用

Johnson 说：

阮老师,你都快成神了,佩服.你每天睡觉几个小时啊?

2017年3月21日 17:40 | # | 引用

小冯说：

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(

{
names.map(function (name) {
return Hello, {name}!
})
}
,
document.getElementById('example')
);

阮老师，为什么在return后面不可以换行啊

2017年3月23日 16:17 | # | 引用

双说：

受益匪浅，感谢分享

2017年4月10日 15:30 | # | 引用

李二狗说：

很强势，真的是受益匪浅，国内数一数二的react中文教程了，我还专门买了老师你的es6入门看看，共同进步。

2017年4月10日 18:58 | # | 引用

黄鹏说：

阮老师，我看了你的文档感觉受益匪浅，但是我最近听到了，react native ，这两个有什么区别呀，请帮我讲解下，我在网上查看的东西，都讲的比较粗糙，不太理解。

2017年4月12日 08:44 | # | 引用

向前迈一步说：

阮老师的文章思路清晰明了，学了好多东西

2017年4月12日 15:05 | # | 引用

yummy 说：

阮老师，react更新了，React.createClass和React.PropTypes已经废弃了，用了create-react-class和prop-types来代替

2017年4月18日 09:23 | # | 引用

terryjim 说：

写得好，看过作者简历，实在是佩服！
根据本文介绍结合新版的react全部实现了一遍，上传于https://github.com/terryjim/yyf-react-study，排得比较乱，仅供新手参考（呵呵，本人也是新手）,有什么问题大家共同学习

2017年4月19日 11:30 | # | 引用

Tekka 说：

您写的这种react编译方式会拖慢页面脚本的解析，jsx的解析应该放到后端。

2017年4月23日 01:57 | # | 引用

小于说：

引用小徐的发言：
阮老师，JSX能在浏览器控制台断点吗？我试了好像不行？是我方法错了吗？

我用Chrome浏览器，用React Developer Tools 可以修改组件状态。
可是怎么在浏览器打断点调试啊，求解。

2017年4月25日 15:47 | # | 引用

谭冬说：

react 浏览器兼容性怎么样都能兼容那些版本浏览器？

2017年4月26日 08:52 | # | 引用

袁叔叔说：

简直厉害了，2小时让我“精通”react了，太感谢了

2017年5月 4日 22:43 | # | 引用

龚方盛说：

我是先学的VUE，现在回过头来学习React，忽然感觉茅塞顿开啊

2017年5月 8日 14:27 | # | 引用

viosey 说：

阮老师，请问能否更新为 ES6 的语法呢？十分感谢！

2017年5月12日 00:36 | # | 引用

sunny 说：

求助：react中这样的怎么做map遍历进行数据绑定？怎么嵌套?

Option 1
Option 2
Option 3
Option 4

Option 5
Option 6
Option 7
Option 8

……..

2017年5月14日 17:45 | # | 引用

大力说：

阮大大给自己的博客做个评论的分页吧- -！

2017年5月15日 16:46 | # | 引用

Enson 说：

真的好好，看完算是入门了，不然一头雾水，非常感谢

2017年5月24日 00:04 | # | 引用

lynxerzhang 说：

引用阿萨德斯蒂芬的发言：
如果这个ajax请求很久才能完成，再加上mount后又在请求成功前unmount，所以需要加个这个isMounted判断

我还是有疑问，componentDidMount已经是渲染完成了，这就证明组建已经肯定是处于mounting状态的。$.get(url,function)这里的function是成功后的回调，也就是说，数据已经返回了。
1、组件状态是mounting状态。
2、数据已经返回。
为什么还要判断isMounted()？

2017年5月27日 16:42 | # | 引用

lgn 说：

这个教程现在来看的确已经过时了，建议从官方文档开始看，官方教程已经很完善了。当然有条件我还是支持去学习vue.js学习成本要低的多。毕竟react要学全还有react-router和redux两个难啃的骨头。

2017年5月29日 21:30 | # | 引用

用思维写代码说：

Warning: UserGist: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement. 这个警告在，谷歌现在直接报错了。意思是说新版本不支持React.createClass 要降级。想学习最新的。

2017年6月 2日 14:51 | # | 引用

菜鸟一只不留名说：

demo06并没有在控制台报错啊

2017年6月 6日 10:28 | # | 引用

可爱梦说：

测试demo6的时候一直会报这个错也不知道是什么意思

2017年6月 7日 16:26 | # | 引用

起阳说：

大哥这个文章写得真心好，良心文章，可以转载嘛

2017年6月12日 16:12 | # | 引用

df 说：

demo4
组件的属性为for和class都不报错呀

2017年6月20日 16:21 | # | 引用

沈厉玮说：

我想把react放到.js文件中应该怎么处理。我以这样的形式，a.js中写代码，但是360浏览器以及好几个浏览器都无法显示出来， /*代码*/这样的时候是可以的

2017年6月24日 16:18 | # | 引用

陈。说：

在哪可以看到更多的视频教程呢？本人穷，看到付费就心疼。。。

2017年7月17日 16:39 | # | 引用

夜落姑苏说：

第二遍看, 感谢 , 很不错 , 怒赞!

2017年7月19日 15:13 | # | 引用

小马说：

大赞！一个多余的字都没有，言简意赅！

2017年7月21日 23:23 | # | 引用

曲鹏说：

请教一下各位：表单下的点击事件 onClick 点击失效，onclick 才管用，但是在非表单下的点击事件 onclick 失效，onClick 管用
这是为什么？

2017年7月24日 14:31 | # | 引用

yangfir 说：

广告已经挨个点过，感谢阮老师，哈哈哈~~~

2017年7月25日 14:27 | # | 引用

Carey 说：

一定要看完，最近学react

2017年7月28日 22:45 | # | 引用

月月颜说：

demo6并没有报警说类型不对

2017年8月 3日 09:26 | # | 引用

xhuanhuan 说：

阮大能不能讲解一下setState的原理呐

2017年8月 6日 17:47 | # | 引用

路过说：

引用曲双如的发言：
实在是不能更赞，我能去您的公司打工不。哈哈。
马上仔细跟进。
在中国做一个前端，真的是挺有福气。

傻吗？在美国才有好，语言障碍没有了，一手最新资料，世界一流大牛，最前沿的技术，你给我讲在中国有福气？脑壳有包？

2017年8月 8日 10:41 | # | 引用

Byesorry 说：

引用初学者的发言：
现在真心不想用框架了, knockout, backbone, angular以及这个.
每次为了适应一个新框架, 需要学习很多额外的语法, 而且等到其他人来维护的时候, 却完全维护不动...
我决定以后顶多用个jQuery, 差不多大家都能看明白;
如果是移动端直接就原生写吧, 实际上也没多少代码量.

如果你用框架写过复杂的交互项目，我想你应该不会这么说了吧

2017年8月10日 10:38 | # | 引用

zeyi 说：

为什么demo4 我把组件名从HelloMessage 改成其他的就出不了效果了呢
希望有大牛告知一下

2017年8月16日 22:20 | # | 引用

lind 说：

demo在手机UC，360无法运行

2017年8月21日 10:16 | # | 引用

流星说：

三、JSX语法中 dome中用的map()方法遍历的数组；然而用forEach()替换为什么出不来；

2017年9月 8日 15:09 | # | 引用

东旭说：

老阮，太棒了，太赞了。看了一下午官方文档不如看你这个十分钟掌握的多。简洁明了，直插重点。大大的赞

2017年9月18日 20:54 | # | 引用

龙涌说：

为什么demo13中的src3个js页面都报错了

2017年9月21日 16:22 | # | 引用

赵世浩说：

引用zeyi的发言：
为什么demo4我把组件名从 HelloMessage 改成其他的就出不了效果了呢
希望有大牛告知一下

上下都有HelloMessage，修改为同样的，首字母大写

2017年10月15日 18:48 | # | 引用

huzhongchun 说：

您好，请问React怎么做到，从list到detail，返回之后不会重新渲染组件呢？虽然localstorage能缓存数据，但是也会重新渲染，图片就会有闪现，体验很不好。

2017年11月 1日 15:57 | # | 引用

邹说：

demo06 运行在我的电脑上，并不会出现您所说的那一句warning,请问这是这么一回事呢？

2017年11月 8日 12:35 | # | 引用

li 说：

引用刘大的发言：
看了二十几篇教程就写出个这。。？

大道至简，厚积薄发

2017年11月 9日 14:09 | # | 引用

只非不黑说：

阮老师看过您的demo后掌握很多但是还是感觉有点没头绪您能指导一下比如写一个网页，react的用法逻辑么

2017年11月18日 10:18 | # | 引用

dfafd 说：

引用li的发言：
大道至简，厚积薄发

还不如看官方的文档

2017年11月18日 23:27 | # | 引用

阿详说：

if(this.isMounted()){
this.setState({
username: lastGist.owner.login, //octocat
lastGistUrl: lastGist.owner.html_url, //https://github.com/octocat
});
}
第十一个demo应该是 lastGist.owner.html_url

2017年11月29日 11:25 | # | 引用

fengkl 说：

为什么我按照官网上安装好之后没有biuld文件夹呢？而且找不到核心库文件

2017年12月12日 10:42 | # | 引用

刘宇哲说：

写的很不错用心了加油

2017年12月13日 09:46 | # | 引用

Q桐说：

引用goofy的发言：
请问两个独立组件之间有什么好的交互方式

独立组件嘛，如果是父子组件最好是用props交互呗。

2017年12月15日 18:32 | # | 引用

R 说：

请问一下有没有具体的视频教程啊，光看这个学不会啊

2017年12月20日 14:14 | # | 引用

阿萨德说：

给阮老师疯狂打电话

2018年1月10日 14:04 | # | 引用

张扬说：

为什么和菜鸟教程上的例子差不错

2018年1月15日 21:01 | # | 引用

杨智念说：

对我入门和大概了解帮助很大，thx

2018年2月28日 13:38 | # | 引用

axing 说：

十一: ajax 的 get 请求回调里面 this 指向不正确吧?

2018年3月 2日 13:33 | # | 引用

姚可鑫说：

这篇入门教程很好,请问老师有react书籍推荐吗???

2018年3月26日 00:07 | # | 引用

草草书说：

一峰老师的文章就是不错，希望老师写更多更加深入的东西

2018年3月26日 11:36 | # | 引用

程晓峰说：

请教，这个命令是什么？怎么用？babel src --out-dir build

2018年4月 1日 09:52 | # | 引用

马战川说：

demo05里this.props.children应该指的是组件所有元素子节点吧？原文说的是“所有子节点”，感觉不严谨，因为组件的属性也是组件的子节点，但是我试了下，this.props.children并不能得到组件的属性。

2018年4月 2日 15:00 | # | 引用

dinasour 说：

想学React好久了，大概2、3年前收藏了您的这篇文章，今天终于趁着假期看完了。感谢阮老师！

2018年4月 5日 11:45 | # | 引用

王凯允说：

阮老师，我的react框架build完之后，不能正常的打开。正常情况下，build完之后该如何查看项目的效果

2018年4月16日 11:12 | # | 引用

王智强说：

虽然有些语法过时了，但是整体思路还是很好的，小白看完这个再去看官方文档就很轻松了。多谢大神呀！

2018年5月 2日 10:36 | # | 引用

伍先生说：

@Cheny：

一己之见，需求不同，见解不同，用法自然也就不同，各路诸侯分天下，终有见分晓的一天。但是，在代码技术的世界里，不等分晓现，后浪以上岸；科技无限，创造无限，不定的未来，也许会出现新的事物；

目前，各取所需，自己认为好，团队认为好，公司认为好，即可。

2018年5月 4日 14:43 | # | 引用

后端开发者的前端菜鸟说：

如雷贯耳的阮一峰老师，膜拜！

2018年6月12日 20:30 | # | 引用

ANKIT 说：

This tutorial might be helpful for beginners:https://appdividend.com/2017/08/22/reactjs-tutorial-beginners-2017/

2018年6月19日 17:44 | # | 引用

Jessewo 说：

感觉阮老师可以把评论区做一下分页, 不然一进来发现滚动条这么小还以为是文章超级长, 结果发现都是评论.......

2018年6月27日 17:26 | # | 引用

jean 说：

2018-06-29！！！终于开始学习react了，第一件事就是先翻阮老师的文档，有，并且还是3年多以前的，再次被打击到了。我是一个假前端，对技术我太不积极了。
感谢阮老师的分享~~

2018年6月29日 16:44 | # | 引用

安安定定的地方说：

现在是不是好多写法改了，学习这个能有用吗

2018年7月 4日 00:32 | # | 引用

红豆说：

阮一峰老师，react浏览器运行时能将jsx单独写一个文件吗？我看菜鸟上可以，但自己写的时候一直报错

2018年7月10日 17:41 | # | 引用

mandy 说：

项目当中的基本都用到了

2018年8月 3日 10:44 | # | 引用

Frank 说：

感谢阮老师的辛苦写作和整理，当中的基本都用到，学习了。

2018年10月12日 19:56 | # | 引用

于_台说：

引用lgn的发言：
这个教程现在来看的确已经过时了，建议从官方文档开始看，官方教程已经很完善了。当然有条件我还是支持去学习vue.js学习成本要低的多。毕竟react要学全还有react-router和redux两个难啃的骨头。

Vue-router ,Vuex差不多吧

2018年10月17日 13:41 | # | 引用

泡泡说：

引用pake.liu的发言：
demo13怎么玩的，

我这里也是demo13出错了，重新下载node_module也不行啊，，，报错信息是这样的：
(index):1 GET https://fb.me/react-0.14.0.min.js net::ERR_CONNECTION_TIMED_OUT
bundle.js:95 Uncaught TypeError: Cannot read property 'Component' of undefined
at Object.2 (bundle.js:95)
at s (bundle.js:1)
at bundle.js:1
at Object.1../app (bundle.js:14)
at s (bundle.js:1)
at e (bundle.js:1)
at bundle.js:1

2018年11月 1日 17:09 | # | 引用

想做大牛的菜鸟说：

真的是非常好啊

2018年11月22日 12:22 | # | 引用

xx 说：

和菜鸟教程如出一辙～

2019年1月 7日 14:52 | # | 引用

tg 说：

感谢阮老师终于让我摸到react的大门了。根据您的文档再结合官方文档，边看边敲捋清楚了不少react的基础知识。

2019年1月15日 15:21 | # | 引用

木瓜说：

网站是用什么写的啊,竟然一下子把留言全展示了,还不卡,厉害

2019年1月23日 10:01 | # | 引用

赵举飞说：

写的深入浅出，非常好的入门教材。。。感觉可以出书了。。

2019年2月25日 10:56 | # | 引用

Thomas 说：

比官方详细很多，但是希望能更新一下，这个页面有些内容和git上的demo对不起来

2019年6月 1日 16:09 | # | 引用

坚果 Jeango 说：

国内的IT资源还不错了，相对于十几年前，简直是天差地别。还有大批像一峰老师这样用心造血的前行者，觉得不能赞更多了

2019年7月 7日 11:42 | # | 引用

大涛子说：

Demo已经更新较新版本，阮老师真棒

2019年7月16日 20:16 | # | 引用

太极说：

真的不错！有基础的看了可以很快了解react的语法特性

2019年9月10日 10:29 | # | 引用

鸠摩大师傅说：

老师有的更新吗？最新版本的教程

2019年10月20日 20:16 | # | 引用

路人甲乙丙丁说：

看完freecodecamp过来复习，发现阮一峰老师写的还是很简洁明了的！

2020年4月 7日 16:59 | # | 引用

墨轩尘说：

学习了，用了两个下午抽空的时间，都给它敲完了，简洁意骇，意犹未尽。
希望阮老师能够再接再厉，加油！！！

2020年4月15日 18:09 | # | 引用

杨老皮说：

言简意赅。这篇文章对于react新手来说，如久旱逢甘霖。

2021年3月29日 16:43 | # | 引用

黄· 说：

我的项目里用的MOBX 改变props，这样是不是就代替了this.state。

2021年6月21日 14:08 | # | 引用

我要发表看法

您的留言（HTML标签部分可用）

您的大名：

«-必填

电子邮件：

«-必填，不公开

个人网址：

«-我信任你，不会填写广告链接

记住个人信息？

«- 点击按钮

React 入门实例教程

零、安装

一、HTML 模板

二、ReactDOM.render()

三、JSX 语法

四、组件

五、this.props.children

六、PropTypes

七、获取真实的DOM节点

八、this.state

九、表单

十、组件的生命周期

十一、Ajax

十二、参考链接

文档信息

相关文章

留言（442条）

我要发表看法