ReactJS—用户界面构建的JavaScript库 HelloWorld

ReactJS 01/14 阅读 67 views次 人气 0
摘要:

React,用于用户界面构建的JavaScript库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

React 是一个用于构建用户界面的JavaScript库:

起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React可以使构建交互UI的过程变得简单。对于你的应用里面的每个状态视图,当数据变化的时候,React都会及时并且正确有效率地进行对其更新。

用react构建封装的组件来管理自己的状态,然后组合它们以创建复杂的UI。

由于组件逻辑是用JavaScript而不是模板编写的,因此您可以轻松地通过应用程序传递丰富的数据,并将状态保留在DOM之外。


React特点:

1、声明式设计 −React采用声明范式,可以轻松描述应用。

2、高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

3、灵活 −React可以与已知的库或框架很好地配合。

4、JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

5、组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

6、单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。


HelloWorld例子:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello World!!!</h1>,
            document.getElementById('app')
        );
    </script>
    <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>
</html>

引入库:

https://cdn.bootcss.com/react/16.7.0/umd/react.development.js

https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js

https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js

页面内容:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>


评论

表情

分享到: