如何用reactjs构建一个完整的前端页面

 我来答
山东中公优就业
2017-08-08 · TA获得超过1511个赞
知道小有建树答主
回答量:907
采纳率:88%
帮助的人:212万
展开全部

用reactjs构建一个完整的前端页面的步骤:

准备:React 的安装包,建议去官网下载安装

1、使用 React 的网页源码,结构大致如下:

<!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">      // **用户代码 **    </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 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

2、将 src 子目录的 js 文件进行语法转换,转码后的文件全部放在 build 子目录。

$ babel src --out-dir build

3、渲染转换成html节点,以方便操作dom:

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

这里以插入hello world为例来说明

ReactDOM.render(  <h1>Hello, world!</h1>,  document.getElementById('example'));

4、运行结果如下:

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式