React学习笔记-模板、ReactDOM.render()、JSX语法

来源：互联网发布：linux下关机命令编辑：程序博客网时间：2024/06/07 14:09

引言

React 起源于 Facebook 的内部项目，他从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。

HTML模板

<!DOCTYPE html><html><head>    <title>react_demo1</title>    <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"></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 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

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 的混写

script内只允许存在// **666**。这样形式的注释，如果写了其他样式的注释整个页面会直接dump掉。

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 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

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

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

阅读全文

0 0