欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
React 入门实例教程
2017-10-25 17:20:34   来源:网络 阮一峰   评论:0 点击:

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


ReactDOM.render(
  

Hello, world!

, document.getElementById('example') );

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

 三、JSX 语法

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


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

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

  上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。上面代码的运行结果如下。

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


var arr = [
  

Hello world!

,

React is awesome

, ]; ReactDOM.render(
{arr}
, document.getElementById('example') );

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

 四、组件

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


var HelloMessage = React.createClass({
  render: function() {
    return 

Hello {this.props.name}

; } }); ReactDOM.render( , document.getElementById('example') );

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

相关热词搜索:实例 教程

上一篇:JavaScript原型详解
下一篇:学JavaScript是什么样的体验?

收藏