bob体育官方平台
React.js入门实例教程之创建hello world 的5种方式_javascript技巧_脚本之家

bob体育app,2,组件化

虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。

 var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建render:function(){return (React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! "))}});React.render( //组件方式创建元素React.createElement, document.getElementById; 

这里大家可能会奇怪,为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。 其次,React 提供两个库: react.js 和 JSXTransformer.js ,它们必须首先加载。其中,JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

ReactJS官网地址:

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

,document.getElementById;

对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

封装 React Elements, 包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块,例如 分页,侧栏导航等。

三、下载ReactJS,编写Hello,world

1,虚拟DOM

下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

3,单向数据流

  • React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

  • React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

  • 有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

  • React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

组件只包含自身逻辑,更新组件的时候可以预测,利于维护

(1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

第5种方式

(3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

);React.render(

在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

React 是近期非常热门的一个前端开发框架。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

2、组件化

React.render( //直接创建元素React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'), document.getElementById; 

1、ReactJS的背景和原理

四、React 编写Hello,world 入门的5种方式

到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

var child1 = React.createElement('li', null, 'First Text Content');var child2 = React.createElement('li', null, 'Second Text Content');var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2);React.render({root2},document.getElementById; 

bob体育app 1

 var Hello=React.createClass({ // 模板 Hello render:function(){return (<span>{this.props.data}</span>)}});var World=React.createClass({ // 模板 world render:function(){return (<span> 和 World 模板拼接</span>)}});React.render( // 2个 模板 组件方式创建元素<h1 className="classN5" ><Hello data='5 hello' /><World /></h1>, document.getElementById;

ReactJS官网地址:

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI, 同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。

一、ReactJS简介

三、入门React 编写 Hello,world 首先了解下什么是JSX

(2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

JSX 是 React 定义的一种 JavaScript 语法扩展,类似于 XML 。 JSX 是可选的, 我们完全可以使用 JavaScript 来编写 React 应用, 不过 JSX 提供了一套更为简便的方式来写 React 应用。

如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

第3种方式

ReactJs下载非常简单,为了方便大家下载,这里再一次给出下载地址(链接),下载完成后,我么看到的是一个压缩包。解压后,我们新建一个html文件,引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):

第2种方式

bob体育app 2

var CreateEl=React.createClass{// return <h1>hellow 组件 创建 html world </h1> //有无括号均可 return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>);}});React.render( //组件方式创建元素<CreateEl/>, //或者双括号 <CreateEl></CreateEl>document.getElementById; 

 

  • First Text Content
  • Second Text Content

Github地址:

代表 HTML 元素的 JavaScript 对象。 这些 JavaScript 对象最后被编译成对应的 HTML 元素。

React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

二、ReactJS特点

然后,在浏览器打开这个页面,就可以看到浏览器显示一个大大的Hello,world,因为我们用了

React.render( //直接html<h1 className="classN1" >1 hellow 直接 html world </h1>, document.getElementById; 

如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

上一篇:[Bootstrap]组件(二) 下一篇:没有了
返回顶部