`

30天了解30种技术系列---(20)React .js 一个比较有意思的前端框架

阅读更多

  

  React含义及特点 

   React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库,是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。即由数据驱动变化的UI组件。

   

   传统的UI库,我们需要使用Ajax对后台进行数据获取,往往是主动型程序。即我们需要去拉取数据,而React.js是自动拉取型,相当于可以进行监听与自动渲染,并且速度比较快。

 

  • 声明式 (Declarative):数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分
  • 构建可组合的组件:React 都是关于构建可复用的组件。事实上,通过 React 你唯一要做的事情就是构建组件

   总结一下就是:React.js 框架提供了2个功能:渲染和维护 DOM,监听 DOM 的事件

    

    React.js 的hello world:

      新建hello-react.html

      

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.13.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">

      var HelloWorld = React.createClass({
      render: function() {
           return (
             <p>
                 Hello, <input type="text" placeholder="Your name here" />!
                 It is {this.props.date.toTimeString()}
             </p>
            );
      }
         });

     setInterval(function() {
        React.render(
            <HelloWorld date={new Date()} />,
            document.getElementById('example')
             );
        }, 500);

    </script>
  </body>
</html>

    

 

    在浏览器中打开 hello-react.html ,在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间,你在输入框的输入内容会保留着,即使你没有写任何代码来完成这个功能。React 也为你解决了这个问题,做了正确的事。    

   

    React 是不会去操作 DOM 的,它用一种更快的内置仿造的 DOM 来操作差异,为计算出效率最高的 DOM 改变。

 

     React 的核心JSX

       JSX 就是 JavaScript,JSX 把类 XML 的语法转成纯粹 JavaScript。而React的核心概念即将JS与HTML统一打包成一个组件,然后最后输出一个HTML,所以通JSX语法来做件事会比较的容易。即我们可以使用最原生的JS。

 

    渲染HTML 标签   

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

 

    Recat 组件示例    

     

var HelloText = React.createClass({
      render: function() {
        return (
        <div>
          <h3>Hello, {this.props.data}</h3>
       </div>
        );
      }
  });

   

    大家需要注意,这个组件render的意思就是渲染,我们可以服用这个组件:直接调用HelloText对象就可以,HTML,JS一网打尽。

 

    React 与我们以往的框架还是非常不一样的,大家可以到http://react-china.org/ 社区上找一些文档看看。希望这个介绍只是看头儿,前端技术大踏步的在发展,希望大家一起进步。

 

   更多精彩请关注微信 : 图灵搜索

   请大家使用中国第一个为程序员打造的搜索引擎:图灵搜索,https://www.tulingss.com 

 

    

4
3
分享到:
评论
2 楼 jackchan 2015-09-16  
非常感谢,我来修改一下
1 楼 bengben 2015-09-16  
jackchan,
你推出的:

图灵搜索,https://www.tulingss.com

我进入之后,我个人强力有以下建议:

第一:用户反馈机制
第二:用户UX不是炫酷,比如:我搜索是想要搜索的结果集,所以起码一页要多点items,但是。。。。
等等。。。我就没有用了,

相关推荐

    react.js、react-dom.js、babel.js文件包下载

    React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前,让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...

    React.js所需三个js文件2--react-dom.development.v17.js

    React.js所需三个js文件之2--react-dom.development.v17.js,在head引入script即可使用。

    react下载,包括react.development.js;babel.min.js;react-dom.development.js

    2. **babel.min.js**: Babel是一个广泛使用的JavaScript编译器,它的主要任务是将使用ES6+(包括JSX)语法的代码转换为兼容当前浏览器的ES5语法。这是因为许多老版本的浏览器不支持新的JavaScript特性,如类...

    前端开发框架 React 离线 js 类库 (react @16.8.0)

    包含如下四个文件: - react.development.js,react核心库; - react-dom.development.js,支持react操作DOM; - babel.min.js,用于将jsx转为js; - prop-types.js,用户检查组件的 Props。

    React所需的三个js文件3--babel.min.js.zip

    React作为一个流行的前端JavaScript库,主要用于构建用户界面,尤其在单页应用程序(SPA)中广泛应用。在React的应用开发中,有三个关键的JavaScript文件通常会被用到:`react.js`、`react-dom.js`和`babel.min.js`...

    react,react-dom及babel打包文件.zip

    4. @babel/preset-react:这是一个Babel预设,包含了将JSX转换为React.createElement调用的规则。 5. 开发环境集成:Babel通常与构建工具(如webpack、rollup)一起使用,实现自动化转换和打包过程。 在实际开发中...

    Node.js-基于React.jsNode.js的开源博客框架

    这个项目是一个结合了Node.js后端技术和React.js前端框架的开源博客平台。它利用了Node.js的非阻塞I/O模型和JavaScript的全栈能力,实现了高效、可扩展的服务器端功能。React.js作为Facebook推出的组件化前端库,以...

    前端项目-mobx-react.zip

    标题"前端项目-mobx-react.zip"揭示了这是一个关于前端开发的项目,其中使用了MobX和React技术。MobX是一个流行的状态管理库,它简化了在React应用中处理状态变化的过程。React是Facebook开发的用于构建用户界面的...

    Node.js-全栈开发样板-使用Express.js作为后端React.js作为前端

    全栈开发样板 - 使用Express.js作为后端,React.js作为前端

    Node.js-一个React.js静态网站生成器

    标题 "Node.js-一个React.js静态网站生成器" 指的是使用Node.js环境下的工具,如Gatsby.js,来创建基于React.js的静态网站。React.js是Facebook开发的一个JavaScript库,专门用于构建用户界面,尤其适合构建单页应用...

    前端项目-amazeui-react.zip

    在这个项目中,“amazeui-react”可能包含一系列预定义的React组件,这些组件基于AmazeUI,一个流行的、适应移动优先的HTML5/CSS3/JS前端框架。AmazeUI提供了一系列预先设计的UI元素,如按钮、表单、导航等,用于...

    PyPI 官网下载 | tg_react-0.5.1-py2.py3-none-any.whl

    标签提到了"react.js 前端 reactjs 前端框架 javascript",这表明`tg_react`可能是一个与React.js相关的Python库。React.js是由Facebook开发的一个流行的JavaScript库,主要用于构建用户界面,特别是单页应用程序。`...

    前端项目-formsy-react.zip

    **标题解析:** "前端项目-formsy-react.zip" 这个标题表明这是一个关于前端开发的项目,具体来说是使用了`formsy-react`库。`formsy-react`是一个专为React.js设计的表单输入构建器和验证工具,用于帮助开发者更...

    前端项目-react-chartjs-2.zip

    **前端项目-react-chartjs-2.zip** 是一个包含React组件库的压缩包,该库是为图表库 **Chart.js** 提供的一个React包装器。这个项目旨在帮助前端开发者在React应用中更方便地使用Chart.js的功能,以创建各种数据可视...

    credit-bi-react.zip

    在本项目"credit-bi-react.zip"中,我们聚焦于使用React前端框架构建一个数据实时大屏的应用。这个应用旨在展示动态更新的大量信贷业务数据,以帮助决策者快速理解和分析关键指标。以下是对相关知识点的详细说明: ...

    前端项目-semantic-ui-react.zip

    前端开发领域中, Semantic UI React 是一个备受开发者青睐的框架,它将 Semantic UI 的优雅设计系统与 React 的强大功能相结合,为构建用户友好的交互界面提供了高效解决方案。本文将详细探讨 Semantic UI React 的...

    前端项目-react-chartjs.zip

    在本文中,我们将深入探讨基于React的前端项目——"react-chartjs",它是一个利用Chart.js库构建图表组件的框架。React是Facebook开发的一个用于构建用户界面的JavaScript库,而Chart.js则是一个轻量级、易用的图表...

    前端项目-survey-react.zip

    【标题】"前端项目-survey-react.zip"是一个包含React实现的前端调查应用的压缩包,主要涉及使用JavaScript库survey.js创建交互式用户调查。 【描述】这个项目利用了survey.js,一个JavaScript调查库,旨在为网站...

    目前超流行的跨平台移动应用开发框架-React-Native项目实战 从React到React-Native

    ├─1113_AM_React-basic-1.mp4 ├─1113_AM_React-basic-2.mp4 ├─1113_AM_React-basic-4.mp4 ├─1113_PM_React-basic-3.mp4 ├─1114_AM_React-basic-5.mp4 ├─1114_AM_React-basic-6.mp4 ├─1114_PM_React-...

    Python库 | react_pages-0.2.2-py2.py3-none-any.whl

    标题中的"Python库 | react_pages-0.2.2-py2.py3-none-any.whl"揭示了我们正在讨论一个名为`react_pages`的Python库,它的版本是0.2.2。这个库可能用于结合Python和React.js技术进行开发。`py2.py3-none-any`部分...

Global site tag (gtag.js) - Google Analytics