怎么用react写界面

用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')
);

这样才能正确渲染。