001|什么是React？
2017-06-06 本文已影响25人
中年小钢炮
什么是React？官方的一句话解释是“A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES”，翻译过来就是 “React是一个用于构建UI的 JavaScript 库”。
UI（User Interface），字在翻译是“用户接口”，涵义为图形界面。
React将JavaScript进行了扩展，所以 “React是一个JavaScript库” 并不十分准确。React将JavaScript扩展成了一种新语言，叫JSX，并且提供了JSX编译器，用于将JSX代码转换成JavaScript代码。
一段经典的JSX片段如下：
ReactDOM.render(
<h1>Hello, world!</h1>, // JSX允许插入HTML标签
document.getElementById('root')
);
上述JSX代码，与JavaScript代码非常相似，惟一不同的是，JSX中允许直接插入HTML标签。
React提供面向组件的编程模型，它将整个页面拆分为一个一个可重用的组件，使得代码结构异常清晰。
为了运行一个最简单的React网页，我们需要在网页头插入React框架脚本。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script> // react核心库
<script src="../build/react-dom.js"></script> // dom相关库
<script src="../build/browser.min.js"></script> // 提供jsx编译支持
</head>
<body>
<div id="root"></div>
<script type="text/babel"> // 类型必须为text/babel
// put jsx codes here
</script>
</body>
</html>
我们必须在head中插入：
- react.js，react核心库
- react-dom.js，dom相关库
- browser.js，提供jsx编译支持
- script 类型必须 为 "text/babel"
我们将前述jsx代码插入到上述的script标签域内，然后运行一下网页，看一下运行结果：
运行结果
我们成功运行了一个用React技术制作的网页。
上述代码的原理是什么？
JSX语法还有哪些牛到不行的功能？
什么是组件？
好，这一节就到这里。后续我将逐步介绍React技术细节，来慢慢解答上述问题。
想学计算机技术吗？需要1对1专业级导师指导吗？想要团队陪你一起进步吗?欢迎加我为好友！微信号：iTekka。
