React 、React.js、React Native三者关系

JavaScript020

React 、React.js、React Native三者关系,第1张

React:

React 是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或者网页。

React.js:

在React框架之上,发展出了React.js 框架来开发网页。

React Native:

在React框架之上,发展出来React Native 用来开发移动应用。

ps:因为React 基础框架与React.js框架是同时出现、同时进化发展的,这就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。后来,Facebook退出了React Native 后,也没有把React的相关概念文档从React.js文档中分离出来。这就导致出现了学React Native 要去看React.js文档,说React Native 不时会说到React.js的情况。

用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、运行结果如下: