React--初体验

最新推荐文章于 2022-06-19 10:42:01 发布

珍妮的小罐君

最新推荐文章于 2022-06-19 10:42:01 发布

阅读量418

点赞数

分类专栏： JavaScript 文章标签： react 模板 render

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React--初体验

ReactReact 是一个用于构建用户界面的 JAVASCRIPT 库。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React特点：1.声明式设计（Declarative）--React 采用声明式，可以轻松构建应用。React 可以轻松构建交互式UI，为你的应
复制链接

扫一扫