怎么用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') );
这样才能正确渲染。
本文来自React答疑栏目,欢迎学习!
以上就是怎么用react写界面的详细内容,更多请关注易知道|edz.cc其它相关文章!