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