React--初体验

来源：互联网发布：网络教育的考试时间编辑：程序博客网时间：2024/06/05 00:52

React

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React特点：

1.声明式设计（Declarative）--React 采用声明式，可以轻松构建应用。

React 可以轻松构建交互式UI，为你的应用程序中的每个状态设计简单的视图，当数据更改时，React 将会有效地更新和渲染组件。
声明式视图模式让你的代码更具有预测性，更易于调试。
2.基于组件（Component-Based）--

通过React构建封装的组件来管理自己的状态，然后把它们组合起来创建更复杂的UI。
由于组件的逻辑是用JavaScript来编写的，因此，可以很轻松地通过APP应用程序来传递丰富的数据，并将状态保留在DOM之外。
3.一次学习，到处编写（Learn Once，Write Anywhere）--通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

我们不对你的技术栈做出假设，因此你可以在React中开发新功能，而无需重写现有的代码。
React 也可以在使用Node的服务器上和使用原生React的手机App上来渲染。

一个简单的组件模板：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Hello React!</title>    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      ReactDOM.render(        <h1>Hello, world!</h1>,        document.getElementById('example')      );    </script>  </body></html>

实例解析：

上述例子中引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

✦ react.min.js - React 的核心库
✦ react-dom.min.js - 提供与 DOM 相关的功能
✦ babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
ReactDOM.render(    <h1>Hello, world!</h1>,    document.getElementById('example'));
以上代码将一个 h1 标题，插入 id="example" 节点中。

注意：    如果我们需要使用 JSX--（JSX 是 JavaScript 语法的扩展），则 <script> 标签的 type 属性需要设置为 text/babel。

原文链接：https://facebook.github.io/react/

0 0