ReactJS入门基础
|
渲染这俩字可能在很多地方都见过。但可能不太理解是啥意思。 那么首先我们来理解一下渲染。 渲染 我觉得这样理解比较通俗。 我们做一个汽车，开始是没有喷漆的（没有css） 只是些框框架架（HTML标签）。那么网页加载就是首先加载完HTML元素，其次是css，css去遍历渲染每个对应元素的样式让其看起来就是我们所想看到的效果一样。不同浏览器的渲染方式不一样，渲染机制也不一样。 简单来将一个完整的HTML页面渲染完成是有2个东西的。一个HTML元素加载完成，一个是CSS样式加载完成。其次才是JS，如果JS写在页面顶部在css元素加载之前 那就会在其执行完后在执行后面的渲染，会让页面的加载断断续续。所以现在很多JS都是建议放在页面之前 而不是在header里。更不能放在样式加载之前。 为什么要说渲染呢，我认为ReactJS就是渲染器。 |
下面我们来说一下如何入门。首先要做的是下载文件。你可以去官网下载最新版本
http://facebook.github.io/react/
首先我们要导入三个库（实际路径以自己文件为准）
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
react.min.js 是 React 的核心库。
react-dom.js提供与 DOM 相关的功能。
browser.js 的作用是将 JSX 语法转为 JavaScript 语法。
React JSX
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
使用JSX
<div id="example"></div>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。
上面代码将一个 h1 标题，插入id为example中.
运行结果：
独立文件
我们也可以将React JSX 代码写在一个独立文件里，例如我们创建一个 helloworld_react.js 文件，代码如下：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
然后可以在HTML中引入
<body>
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>
JSX 语法
JSX的语法，它允许 HTML 与 JavaScript 的混写。
遇到 HTML 标签（以 < 开头的），就用 HTML 规则解析；遇到代码块（以 { 开头的），就用 JavaScript 规则解析。
var names = ['lisi', 'wanger', 'zhangsan'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员。上面程序运行结果如下
组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
以上代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。因为原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头另外，组件类只能包含一个顶层标签，否则也会报错。
组件的用法与原生的 HTML 标签完全一致，如果我们需要向组件传递参数，可以使用 this.props 对象。以上实例中 name 属性通过 this.props.name 来获取。
复合组件
我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
以下实例我们实现了输出网站名字和网址的组件：
var WebSite = React.createClass({
render: function() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});
var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});
var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});
ReactDOM.render(
<WebSite name="博客园" site=" http://www.cnblogs.com" />,
document.getElementById('example')
);
实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息，可以理解为 WebSite 拥有 Name 和 Link 的实例。
以上就是RejectJS入门基础，看懂就可以继续深锐学习了。
其实学习ReactJS的要求并不高。有HTML5，CSS和JavaScript的基础就可以了
ReactJS入门基础的更多相关文章
- Reactjs 入门基础(三)
State 和 Props以下实例演示了如何在应用中组合使用 state 和 props .我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上.在 render ...
- Reactjs 入门基础(二)
如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下: <body> <div id="example"></div> & ...
- Reactjs 入门基础(一)
实例中我们引入了三个库: react.min.js .react-dom.min.js 和 browser.min.js: 1,react.min.js -React 的 核心库 2,react-do ...
- ReactJS入门指南
ReactJS入门指南 本文旨在介绍ReactJS的基本知识,并一步步详细介绍React的基本概念和使用方法等,以及相应的Demo.本文在很大程度上参考了React官方文档和官方指南.如果你英语还不错 ...
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...
- 01shell入门基础
01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...
- Markdown入门基础
// Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...
- ReactJS入门学习二
ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...
- ReactJS入门学习一
ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...
随机推荐
- 各种API总结大全 JAVA、HTML、HTML5等等
本文章,发现新的API会进行更新,如果你们觉得有新的版本或者拥有新的,也可以发有邮箱到"zenglei8732@163.com"当中,本人会在12小时内更新,非常感谢!!! HTM ...
- [CTSC1999]【网络流24题】星际转移
Description 由于人类对自然资源的消耗,人们意识到大约在2300 年之后,地球就不能再居住了.于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177 年冬由于未知的原因,地 ...
- sql关键字之null
在数据库中使用一种特殊的值表示未知的值--NULL,我们称之为空值但并不是空的字符串,而是特殊的值.
- VMWare下ubuntu无法全屏的问题解决
遇到的情况: 在VMWare中,安装ubuntu 最新版操作系统(16.04).运行该系统,发现ubuntu系统在虚拟机中,只能居中显示,全屏也只能占一半显示屏幕.怎么看,怎么不舒服. 分析问题: 一 ...
- 【Spark2.0源码学习】-5.Worker启动
Worker作为Endpoint的具体实例,下面我们介绍一下Worker启动以及OnStart指令后的额外工作 一.脚本概览 下面是一个举例: /opt/jdk1..0_79/ ...
- C#集合之链表
LinkedList<T>是一个双向链表,其元素会指向它前面和后面的元素.这样,通过移动到下一个元素可以正向遍历链表,通过移动到前一个元素可以反向遍历链表. 链表在存储元素时,不仅要存储元 ...
- oracle的神奇化学反应（行转列+获取表字段）
橘子+汽水=橘子汽水,∑(ﾟДﾟノ)ノ好无聊!!! 火鸡+烤架=烤火鸡,ლ(´ڡ`ლ)还不错. wm_concat()+表字段查询=(✪ω✪)会是啥呢? wm_concat()函数,该函数可以把列值以 ...
- [刷题]算法竞赛入门经典(第2版) 5-6/UVa1595 - Symmetry
题意:平面上给若干点,问它们是不是关于某垂直于x轴的直线对称. 代码:(Wrong Answer, –ms) //UVa1595 - Symmetry #include<iostream> ...
- 将github上的项目源码导入到eclipse中
1.注册github帐号 在github上注册一个自己的帐号. 2.安装git插件egit 在eclipse中安装git插件egit,安装方法可以参考这篇文章: http://www.cnblogs. ...
- Alamofire源码解读系列(十二)之请求(Request)
本篇是Alamofire中的请求抽象层的讲解 前言 在Alamofire中,围绕着Request,设计了很多额外的特性,这也恰恰表明,Request是所有请求的基础部分和发起点.这无疑给我们一个Req ...