react入门实例教程-阮一峰01

来源：互联网发布：游戏开发书籍推荐知乎编辑：程序博客网时间：2024/06/11 16:14

一、HTML模板

<!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>

(1)上面代码有两个地方需要注意。首先，最后一个

  <div id="example"></div>  <script type="text/babel">    ReactDOM.render(      <h1>hello,world</h1>,<!-- 注意此处逗号 -->      document.getElementById("example");    );  </script>

三、JSX语法
上一节代码，HTML语言直接写在Javascript中，不加任何引号，这就是JSX语法，它允许HTML和javascript混写。

<div id="example"></div>    <script type="text/babel">      var names = ['Alice', 'Emily', 'Kate'];      ReactDOM.render(        <div>        {          names.map(function (name, index) {            return <div key={index}>Hello, {name}!</div>          })        }        </div>,        document.getElementById('example')      );    </script>

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

这里写图片描述

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

<div id="example"></div>    <script type="text/babel">      var arr=[        <h1 key="1">hello world</h1>,        <h2 key="2">hello world</h2>,      ];      ReactDOM.render(        <div>{arr}</div>,        document.getElementById('example')      );    </script>

阅读全文

0 0