# ReactTraining
**Repository Path**: qqcode/react-training
## Basic Information
- **Project Name**: ReactTraining
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-06
- **Last Updated**: 2025-08-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# ReactTraining
[React官网传送门](https://facebook.github.io/react/index.html "React官网")
> 当前库React版本v15.3.2
# 应用开发分类介绍
>## 原生应用:
>介绍：
特别为某个操作系统做的应用, 比如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上，选择一个版本下载，不要下载最新的，选择一个比较稳定的下载。[传送门](https://github.com/facebook/react/releases"下载地址")
下载后，在本地解压，有build文件夹和examples文件夹，还有readme.md文件。
>进入build文件夹，选择react-min.js文件和react-dom.min.js文件，复制一份放到你的demo中的js文件中。但是这并不是最终的，下面会说
## 部署后的文件内容
```
templet
```
##看一个demo
```
```
执行后页面会显示“Hello World！”
>React.createElement();是可以进行嵌套的
```
```
但是这样写起来太过麻烦，作为程序员则是能坐着不站着，能躺着不坐着。因此React推荐使用JSX语法
>JSX: JavaScript extension, 带扩展的JavaScript, 并不是一门新语言, 它是一个语法糖
>那么什么是语法糖呢？
>举个创建数组的栗子：
```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文件夹下
## 最终部署环境
```
//因此最终模板为
Title
```
## 吃块糖
```
//使用JSX书写
```
```
//也可以嵌套
```
# 聊聊JSX
## 出现尖括号<>会自动创建元素
```
ReactDOM.render(
Hello React!
,
document.getElementById('example')
);
//碰到h1元素时，会自动创建h1元素，并把h1元素渲染到真实的DOM中
```
## 出现大括号{}认为是变量
```
var text = '学姐';
ReactDOM.render(
哈喽, {text}!
,
document.getElementById('example')
);
```
>另外JSX中的{}中, 可以写表达式(变量, 运算, 函数调用)
```
ReactDOM.render(
1 + 1 = {1 + 1}
,
document.getElementById('example')
);
```
## 关键词重名问题等
>1.在渲染的元素内容中, 不能出现for, class, 因为和React中的关键词重名 for 写成 htmlFor
class 写成 className
2.渲染的元素内容, 只能有一个根节点
3.单标签需要用/闭合
```
ReactDOM.render(
,
document.getElementById('example')
);
```
## 循环操作
```
var arr = ['宝宝', '蓉蓉', '经纪人', '楼上邻居', '隔壁老王'];
ReactDOM.render(
- {arr[0]}
- {arr[1]}
- {arr[2]}
- {arr[3]}
,
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(
{arr1}
,
document.getElementById('example')
);
```
# 说说组件
## 组件的创建
>React是基于组件进行开发
>创建一个组件(类), 显示Hello world!
1.组件名字, 以大写字母开头
2.使用createClass创建组件
3.组件必须实现render方法
```
var HelloWorld = React.createClass({
//定义render方法, 当组件渲染时触发
render: function () {
return Hello world!
}
});
```
## 组件的使用
>方式1: 双标签
```
ReactDOM.render(
,
document.getElementById('example')
);
```
>方式2: 单标签
```
ReactDOM.render(
,
document.getElementById('example')
);
```
## 给组件赋属性值
>给组件赋属性值, 都会被记录在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.title}
}
});
ReactDOM.render(
,
document.getElementById('example')
);
```
## 为组件添加样式
### 为组件添加样式的3种方法
>1.内联样式, 比如div
2.选择器样式, 比如h1
3.对象样式, 比如p
### 对象样式或内联样式
>1.样式的值为对象
2.对象的属性用驼峰法命名
3.如果值为12px, 可以省略单位px
### 综合示例
>注意：选择器样式，需要在style标签内写css
根据下面的例子写个类
```
```
>js代码如下：
```
var pStyle = {
backgroundColor: "green",
fontSize: 20
};
var Message = React.createClass({
render: function () {
return (
{this.props.title}
{this.props.content}
)
}
});
ReactDOM.render(
,
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 (
)
}
});
ReactDOM.render(
,
document.getElementById('example')
);
```
# 谈谈props对象
>props: 组件自带的的属性, 用于组件内外的值的传递
>注: props是只读的, 只能获取, 不能修改
```
var Hello = React.createClass({
render: function () {
return Hello, {this.props.name1}, {this.props.name2}
}
});
ReactDOM.render(
,
document.getElementById('example')
);
```
# props对象
## props是只读的
>props: 组件自带的的属性, 用于组件内外的值的传递
注: props是只读的, 只能获取, 不能修改
```
```
## 延展操作符
>...(三个点, 延展操作符)是一种语法糖， 把对象的属性值赋到对应的组件中
```
```
## 延展操作符练习
```
```
## this.props.children
>this.props.children: 代表元素内的子元素
```
```
05-props.html
```
```
## props指定默认值
```
```
# state状态
>在此之前，先说下事件机制
```
```
>state和props的区别:
>props用于记录组件的属性和子元素, 是一个只读的对象; state用于进行状态的记录,是一个可以修改的对象
>练习: 定义一个组件CheckBox, 包含两部分复选框, 文本; 效果: 选择复选框, 文本变为true, 取消选择, 文本变成false
请结合02-state.html看
```
```
>练习: 实时显示输入内容
>请结合03-state.html看
```
```
# 组件的生命周期
>组件的生命周期: 从创建组件到组件移除的完整的过程
React组件的生命周期,分为三个阶段:
1.挂载阶段(Mounting): 把组件插入元素中
2.更新阶段(Update): 重新渲染组件
3.移除阶段(Unmounting): 从元素中移除组件
## 挂载阶段
```
```
## 更新阶段
```
```
## 移除组件
```
```
>06-lifecycle.html 是完成的测试，包含注释及代码
# React之Ajax
```
```
>入门教程结束了，但是继续学习React的路程才刚刚开始，希望本教程对你有所帮助，有缘人。