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
相关推荐
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前,让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
React.js所需三个js文件之2--react-dom.development.v17.js,在head引入script即可使用。
2. **babel.min.js**: Babel是一个广泛使用的JavaScript编译器,它的主要任务是将使用ES6+(包括JSX)语法的代码转换为兼容当前浏览器的ES5语法。这是因为许多老版本的浏览器不支持新的JavaScript特性,如类...
包含如下四个文件: - react.development.js,react核心库; - react-dom.development.js,支持react操作DOM; - babel.min.js,用于将jsx转为js; - prop-types.js,用户检查组件的 Props。
React作为一个流行的前端JavaScript库,主要用于构建用户界面,尤其在单页应用程序(SPA)中广泛应用。在React的应用开发中,有三个关键的JavaScript文件通常会被用到:`react.js`、`react-dom.js`和`babel.min.js`...
4. @babel/preset-react:这是一个Babel预设,包含了将JSX转换为React.createElement调用的规则。 5. 开发环境集成:Babel通常与构建工具(如webpack、rollup)一起使用,实现自动化转换和打包过程。 在实际开发中...
这个项目是一个结合了Node.js后端技术和React.js前端框架的开源博客平台。它利用了Node.js的非阻塞I/O模型和JavaScript的全栈能力,实现了高效、可扩展的服务器端功能。React.js作为Facebook推出的组件化前端库,以...
标题"前端项目-mobx-react.zip"揭示了这是一个关于前端开发的项目,其中使用了MobX和React技术。MobX是一个流行的状态管理库,它简化了在React应用中处理状态变化的过程。React是Facebook开发的用于构建用户界面的...
全栈开发样板 - 使用Express.js作为后端,React.js作为前端
标题 "Node.js-一个React.js静态网站生成器" 指的是使用Node.js环境下的工具,如Gatsby.js,来创建基于React.js的静态网站。React.js是Facebook开发的一个JavaScript库,专门用于构建用户界面,尤其适合构建单页应用...
在这个项目中,“amazeui-react”可能包含一系列预定义的React组件,这些组件基于AmazeUI,一个流行的、适应移动优先的HTML5/CSS3/JS前端框架。AmazeUI提供了一系列预先设计的UI元素,如按钮、表单、导航等,用于...
标签提到了"react.js 前端 reactjs 前端框架 javascript",这表明`tg_react`可能是一个与React.js相关的Python库。React.js是由Facebook开发的一个流行的JavaScript库,主要用于构建用户界面,特别是单页应用程序。`...
**标题解析:** "前端项目-formsy-react.zip" 这个标题表明这是一个关于前端开发的项目,具体来说是使用了`formsy-react`库。`formsy-react`是一个专为React.js设计的表单输入构建器和验证工具,用于帮助开发者更...
**前端项目-react-chartjs-2.zip** 是一个包含React组件库的压缩包,该库是为图表库 **Chart.js** 提供的一个React包装器。这个项目旨在帮助前端开发者在React应用中更方便地使用Chart.js的功能,以创建各种数据可视...
在本项目"credit-bi-react.zip"中,我们聚焦于使用React前端框架构建一个数据实时大屏的应用。这个应用旨在展示动态更新的大量信贷业务数据,以帮助决策者快速理解和分析关键指标。以下是对相关知识点的详细说明: ...
前端开发领域中, Semantic UI React 是一个备受开发者青睐的框架,它将 Semantic UI 的优雅设计系统与 React 的强大功能相结合,为构建用户友好的交互界面提供了高效解决方案。本文将详细探讨 Semantic UI React 的...
在本文中,我们将深入探讨基于React的前端项目——"react-chartjs",它是一个利用Chart.js库构建图表组件的框架。React是Facebook开发的一个用于构建用户界面的JavaScript库,而Chart.js则是一个轻量级、易用的图表...
【标题】"前端项目-survey-react.zip"是一个包含React实现的前端调查应用的压缩包,主要涉及使用JavaScript库survey.js创建交互式用户调查。 【描述】这个项目利用了survey.js,一个JavaScript调查库,旨在为网站...
├─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"揭示了我们正在讨论一个名为`react_pages`的Python库,它的版本是0.2.2。这个库可能用于结合Python和React.js技术进行开发。`py2.py3-none-any`部分...