用 react 写页面, 官方的做法是采用 jsx 语法, JSX 是一种 JavaScript 的语法扩展, 运用于 React 架构中, 其格式比较像是模版语言, 但事实上完全是在 JavaScript 内部实现的. 元素是构成 React 应用的最小单位, JSX 就是用来声明 React 当中的元素, React 使用 JSX 来描述用户界面.
下面来看看如何使用 jsx 实现一个简单的用户界面吧.
在 React 中可以通过如下方式渲染 html 元素
ReaderDOM.render(dom,element) 方法来渲染代码如下:
- import React from 'react';
- import ReactDOM from 'react-dom';
- ReactDOM.render(
- <h3>Hello React</h3>,
- document.getElementById('root')
- );
其中 root 是 index.HTML 中的根标签的 id
效果如下:
可以看到我们写的 <h3>Hello React</h3 > 被成功渲染. 如果包含多个 HTML 元素, 最外层需要使用一个 div 进行包裹:
- import React from 'react';
- import ReactDOM from 'react-dom';
- ReactDOM.render(
- <div>
- <h3>Hello React</h3>
- <p>I'm from renderDom.</p>
- </div>,
- document.getElementById('root')
- );
这样才能正确渲染.
本文来自 React 答疑 https://www.html.cn/qa/react/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/react/15011.html