react.js快速入门（1）
React官网传送门
本教程的所有源代码都托管在github上
地址 https://github.com/kkcode24/ReactTraining
应用开发分类介绍
原生应用:
介绍：
特别为某个操作系统做的应用, 比如iOS, Android, Blackberry等等。
iOS的开发语言:OC(Objective-C), Swift。Android的开发语言: Java
优点：
a.访问手机的所有功能
b.速度比较快, 用户体验好
c.可以投放到应用市场(app stroe, 豌豆荚), 并进行内购, 收费下载
d.方便查找
缺点：
a.开发成本高
b.上传时间难易把控
c.内容限制
d.新版本需要重新下载
web应用
介绍：
web应用是为移动浏览器设计的应用, 使用普通web技术(html, css, JavaScript)实现
优点:
a.跨平台(各种智能终端的浏览器上运行)
b.开发成本低
c.可以立即上线
d.内容没有限制
e.用户更新比较快(只需要刷新浏览器)
缺点
a.加载速度慢
b.不能上传应用商店
c.必须联网
d.可以看到源码
混合应用
介绍：
混合应用, 使用原生的技术(OC, Java)和web技术(html, css, js)来开发应用
优缺点：
a.原生应用的开发者做一个应用皮(应用内部只有一个控件webview, 浏览器组件), 前端人员开发移动页面, 并在原生应用中的webview中显示
原生技术 : 前端技术 = 1 : 9
b.通过js代码, 写一个应用, 最终编译成iOS和Android版本
原生技术 : 前端技术 = 0 : 10
c.原生的应用中某些界面使用前端来开发
原生技术 : 前端技术 = 5 : 5
引用React库
部署开发环境
在github上，选择一个版本下载，不要下载最新的，选择一个比较稳定的下载。传送门
下载后，在本地解压，有build文件夹和examples文件夹，还有readme.md文件。
进入build文件夹，选择react-min.js文件和react-dom.min.js文件，复制一份放到你的demo中的js文件中。但是这并不是最终的，下面会说
部署后的文件内容
<html lang="en">
<head>
<meta charset="UTF-8">
<title>templettitle>
head>
<body>
<div id="example">div>
<script type="text/javascript" src="js/react.min.js">script>
<script type="text/javascript" src="js/react-dom.min.js">script>
<script>
//这里是我们的代码区域
script>
body>
html>在我们的代码区域使用JavaScript代码进行开发
<script>
//这里是我们的代码区域
ReactDOM.render(
//React.createElement(元素名, 元素属性, 元素内容);
React.createElement('h1', null, 'Hello world!'),
document.getElementById('example')
);
/*ReactDom.render()作用: 把元素内容渲染到元素中.
有两个参数:
parameter1:虚拟DOM
parameter2:真实DOM
*/
script>执行后页面会显示“Hello World！”
React.createElement();是可以进行嵌套的
<script type="text/javascript">
//这里是我们的代码区域
ReactDOM.render(
React.createElement('div', null,
React.createElement('p', null,
React.createElement('em', null, '今天星期一')
)
),
document.getElementById('wrap')
);
script>但是这样写起来太过麻烦，作为程序员则是能坐着不站着，能躺着不坐着。因此React推荐使用JSX语法
JSX: JavaScript extension, 带扩展的JavaScript, 并不是一门新语言, 它是一个语法糖
那么什么是语法糖呢？
举个栗子：//创建数组 var arr = new Array(1, 2, 3); //通过语法糖, 创建数组 var arr1 = [1, 2, 3]; //创建对象 var obj = new Object(); obj.name = "张三"; //通过语法糖, 创建对象 var obj1 = { name: "李四" };往简单了说就是帮助我们坚持彻底的去执行懒规则
如何使用JSX
虽然JSX比起JavaScript写起来更简单，代码更直观，但是浏览器对JSX并不友好，那怎么办呢，React提供了一个中间人，就是Bable转换器。
bable转换器的工作就是把ECMAScript6, JSX等转化成浏览器可以执行的js代码
所以JSX的执行顺序与JS比较就多了一个X
JSX的执行顺序：
JSX->浏览器下载->Babel进行转换->JavaScript->浏览器执行
JavaScript的执行顺序：
JavaScript->浏览器下载->浏览器执行
引入转换器脚本
再次进入build文件夹，选择browser.min.js文件，复制一份到demo下的js文件夹下
最终部署环境
//因此最终模板为
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="example">div>
<script type="text/javascript" src="js/react.min.js">script>
<script type="text/javascript" src="js/react-dom.min.js">script>
<script type="text/javascript" src="js/browser.min.js">script>
<script type="text/babel">
//我们的代码
script>
body>
html>吃块糖
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!h1>,
document.getElementById('example')
);
script>//也可以嵌套
<script type="text/babel">
ReactDOM.render(
<div><p><em>今天天气真好!em>p>div>,
document.getElementById('example')
);
script>聊聊JSX
出现尖括号<>会自动创建元素
ReactDOM.render(
Hello React!
,
document.getElementById('example')
);
//碰到h1元素时，会自动创建h1元素，并把h1元素渲染到真实的DOM中出现大括号{}认为是变量
var text = '学姐';
ReactDOM.render(
哈喽, {text}!
,
document.getElementById('example')
);另外JSX中的{}中, 可以写表达式(变量, 运算, 函数调用)
ReactDOM.render(
<div>1 + 1 = {1 + 1}div>,
document.getElementById('example')
);关键词重名问题等
1.在渲染的元素内容中, 不能出现for, class, 因为和React中的关键词重名
for 写成 htmlFor
class 写成 className
2.渲染的元素内容, 只能有一个根节点
3.单标签需要用/闭合
ReactDOM.render(
<div className = "bg">
<label htmlFor="username">用户名:label>
<input type="text" id="username"/>
div>,
document.getElementById('example')
);循环操作
var arr = ['宝宝', '蓉蓉', '经纪人', '楼上邻居', '隔壁老王'];
ReactDOM.render(
<ul>
<li>{arr[0]}li>
<li>{arr[1]}li>
<li>{arr[2]}li>
<li>{arr[3]}li>
ul>,
document.getElementById('example')
);上面代码不符合程序员的懒特点，所以需要改，改为
ReactDOM.render(
{
arr.map(function (e) {
//e: 代表数组中的某个元素
return - Hi, {e}!
})
}
,
document.getElementById('example')
);因为本教程不针对0基础同学，所以不再讲解JavaScript代码基础，如果想看本教程需要有HTML5和JavaScript的基础。
简单提下数组的map和过滤方法：
//map: 映射, 按照一定的规则, 对数组元素进行转换, 比如 1 2 3 -> 4 5 6
//filter: 过滤, 按照一定的条件, 对数组元素进行筛选, 比如 1 2 3 -> 3
数组中存放元素
当数组中存放的是元素, 可以直接使用数组进行渲染, 相当于把数组的每个元素进行渲染
ReactDOM.render(
<div>{arr1}div>,
document.getElementById('example')
);说说组件
组件的创建
React是基于组件进行开发
创建一个组件(类), 显示Hello world!
1.组件名字, 以大写字母开头
2.使用createClass创建组件
3.组件必须实现render方法
var HelloWorld = React.createClass({
//定义render方法, 当组件渲染时触发
render: function () {
return <h1>Hello world!h1>
}
});组件的使用
方式1: 双标签
ReactDOM.render(
<HelloWorld>HelloWorld>,
document.getElementById('example')
);方式2: 单标签
ReactDOM.render(
给组件赋属性值
给组件赋属性值, 都会被记录在this.props的对象中,
对象的属性和组件的属性一一对应
var HelloWho = React.createClass({
render: function () {
return Hello {this.props.name}!
}
});
ReactDOM.render(
"帅哥"> ,
document.getElementById('example')
);练习: 定义组件Link, 用于展示一个超链接
例如:百度
其中链接地址和链接标题可以进行设置
var Link = React.createClass({
render: function () {
return this.props.url}>{this.props.title}
}
});
ReactDOM.render(
"http://baidu.com" title="百度"/>,
document.getElementById('example')
);为组件添加样式
为组件添加样式的3种方法
1.内联样式, 比如div
2.选择器样式, 比如h1
3.对象样式, 比如p
对象样式或内联样式
1.样式的值为对象
2.对象的属性用驼峰法命名
3.如果值为12px, 可以省略单位px
综合示例
注意：选择器样式，需要在style标签内写css
根据下面的例子写个类
<style>
.title {
text-align: center;
color: #cc52ff;
}
style>js代码如下：
var pStyle = {
backgroundColor: "green",
fontSize: 20
};
var Message = React.createClass({
render: function () {
return (
<div style={{
backgroundColor: "yellow",
borderWidth: 5,
borderColor: "black",
borderStyle: "solid"
}}>
<h1 className="title">{this.props.title}h1>
<p style={pStyle}>{this.props.content}p>
div>
)
}
});
ReactDOM.render(
<Message title="干了这碗鸡汤"
content="如果你得罪了老板，失去的只是一份工作；如果你得罪了客户，失去的不过是一份订单；是的，世上只有一个人可以得罪：你给她脸色看，你冲她发牢骚，你大声顶撞她，甚至当 着她的面摔碗，她都不会记恨你，原因很简单，因为她是你的母亲。">Message>,
document.getElementById('example')
);多个组件组合成一个组件
直接上例子
var ListTitle = React.createClass({
render: function () {
return {this.props.title}
}
});
var ListContent = React.createClass({
render: function () {
return {this.props.content}
}
});
var List = React.createClass({
render: function () {
return (
this.props.t}/>
this.props.c}/>
)
}
});
ReactDOM.render(
"我真帅!" c="这是一个真理!"/>,
document.getElementById('example')
);