React介绍
React是一个用于构建用户界面的JavaScript库。
React主要用于构建UI,其本事不是一个MVC框架,只是是MVC中的V（视图）。
React起源于Facebook的开源项目,诞生之初用来架设Instagram网站。
React特点
- 声明式设计 − React采用声明范式，可以轻松描述应用。
- 高效 − React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 灵活 − React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
React入门示例
示例使用React版本v15.4.1; 库下载地址: https://github.com/facebook/react/releases
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- react.js是react的核心库-->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供与Dom相关的功能-->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是讲JSX语法转换成JavaScript预发 -->
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<!-- React渲染的模板内容会插入到该Dom节点中,作为一个容器-->
<div id="container"></div>
</body>
<!--
在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel
babel是一个转换编译器,ES6转成可以在浏览器中运行的代码
-->
<script type="text/babel">
ReactDOM.render(
<h1>第一个React示例程序</h1>,
document.getElementById("container")
);
</script>
</html>
说明:
- build中的js库来自https://github.com/facebook/react/releases。
- 在React开发中,使用JSX语法,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel; babel是一个转换编译器,ES6转成可以在浏览器中运行的代码
- ReactDom.render()是最基本的React语法,支持三个参数:(参数1:模板渲染的内容,为html形式, 参数2:模板需要插入的dom结点, 参数3: 渲染后的回调,一般不用)
React JSX
React使用JSX来替代常规的 avaScript; JSX是一个看起来很像XML的JavaScript语法扩展。
JSX必须借助React环境运行,JSX语法能够让我们更直观的看到组件的Dom结构,不能直接在浏览器上运行,最终会转换成JavaScript。
JSX标签其实就是HTML标签,只不过在JavaScript中书写这些标签时,不需要使用""括起来, 可以像xml一样书写
<script type="text/babel">
ReactDOM.render(
<h1>
第一个React示例程序
</h1>,
document.getElementById("container")
);
</script>
JSX中运行JavaScript代码,使用{}括起来, 语法格式为:{表达式}
<script type="text/babel">
var text = "第一个React示例程序";
ReactDOM.render(
<h1>{text}</h1>,
document.getElementById("container")
);
</script>
React定义组件
React中创建组件类以大写字母开头,驼峰命名法; React中使用React.createClass方法创建一个组件类, 每个组件类都必须实现自己的render方法,输出定义好的组件模板,返回值:null、false、组件模板;
<script type="text/babel">
// 定义组件类
var HellComponent = React.createClass({
render: function(){
return <h1>第一个自定义组件</h1>;
}
});
// 渲染dom
ReactDOM.render(
<HellComponent/>,
document.getElementById("container")
);
</script>
React定义样式
React组件样式样式,有三种: 内连样式(示例div元素)、对象样式(示例h1元素)、选择器样式(示例h2元素)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- react.js是react的核心库-->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供与Dom相关的功能-->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是讲JSX语法转换成JavaScript预发 -->
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
<style>
.ft{ color: blue;}
</style>
</head>
<body>
<!-- React渲染的模板内容会插入到该Dom节点中,作为一个容器-->
<div id="container"></div>
</body>
<!-- 在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel
babel是一个转换编译器,ES6转成可以在浏览器中运行的代码
-->
<script type="text/babel">
// react中定义对象样式
var hellStyle = {
backgroundColor: "green",
color: "red",
}
// 定义组件类, this.props定义组件属性
var HellComponent = React.createClass({
render: function(){
return (
<div style={{backgroudColor:"yellow", borderWidth:5}}>
<h1 style={hellStyle}>第一个自定义组件,动态参数{this.props.param1}</h1>
<h2 className="ft">第一个自定义组件-动态参数:{this.props.param2}</h2>
</div>
);
}
});
// 渲染dom
ReactDOM.render(
<HellComponent param1="参数1" param2="参数2"/>,
document.getElementById("container")
);
</script>
</html>
在React和Html5中设置样式时书写格式是有区别的:
- html5样式以
;结尾,React以,结尾 - Html5中key,value都不需要加引号, React中属于JavaScript对象, key的名字不能出现“-”, 需要使用驼峰命名法, 如果value为字符串需要加
"" - Html5中value如果是数字,需要带单位,React中不需要带单位.
- Html5中选择器样式使用class, React中class是关键字,使用选择器样式时, 属性名使用
className, 类似的也有使用htmlFor替换for.
React事件操作
React事件示例
<script type="text/babel">
var BtnAction = React.createClass({
// react中事件命名规范: 首字母小写, 驼峰命名法
handleClick: function(){
alert("点击按钮触发事件");
},
render: function(){
return (
<button onClick={this.handleClick}>{this.props.buttonTitle}</button>
);
}
});
// 渲染dom
ReactDOM.render(
<BtnAction buttonTitle="React事件按钮"/>,
document.getElementById("container")
);
</script>
React状态操作
React状态示例
<script type="text/babel">
var CheckButton = React.createClass({
// 定义初始状态
getInitialState: function(){
return {
// 在这个对象中设置的属性值,将会存储在stage中,
isCheck: false
}
},
// 定义事件绑定方法
HandleChange: function(){
// 修改状态值,通过this.stage读取设置的状态
this.setState({
isCheck: !this.state.isCheck
});
},
render: function(){
// 根据状态设置显示的文字
// 在JSX语法中,不能直接使用if,需要使用三目运算符
var text = this.state.isCheck? "已选中": "未选中";
return (
<div>
<input type="checkbox" onChange={this.HandleChange} />
{text}
</div>
);
}
});
// 渲染dom
ReactDOM.render(
<CheckButton/>,
document.getElementById("container")
);
</script>
当state发生变化时,会调用组件内部的render方法。
ReactNative和React的关系
React用于web应用开发,ReactNative采用React方式进行移动应用开发.
ReactNative采用React预发,用于进行JavaScript跨终端应用开发,既拥有原生Native的交互体验,又能够保留React的开发效率.使用灵活的Html和Css布局,使用React语法构建组件,然后同时运行在Ios和Android平台上.
ReactNative安装前提
Mac下安装Homebrew(非必须)
安装操作
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
[yunxi@localhost ~ ]$ brew -v
Homebrew 0.9.5 (git revision a8d6; last commit 2016-03-15)
建议不定时的更新
[yunxi@localhost ~]$ brew update && brew upgrade
安装NodeJs
安装react前需要保证已经安装了nodeJs,下载地址:https://nodejs.org/en/
[yunxi@localhost ~]$ brew install node
ReactNative安装
mac系统安装react-native
[yunxi@localhost ~ ]$ node --version
v7.2.0
[yunxi@localhost ~ ]$ sudo npm install -g react-native-cli
安装Watchman和Flow,监控文件变化和类型检查的。
[yunxi@localhost ~ ]$ brew install watchman
[yunxi@localhost ~ ]$ brew install flow
ReactNative创建项目
初始化项目使用命令react-native init 工程名称
[yunxi@localhost wuyu-platform (master ✗)]$ react-native init wuyuApp
初始化完会看到如下提示:
To run your app on iOS:
react-native run-ios
- or -
Open ios/wuyuApp.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android
启动调试
[yunxi@localhost wuyu-platform (master ✗)]$ cd wuyuApp
[yunxi@localhost wuyuApp (master ✗)]$ ls
__tests__ android index.android.js index.ios.js ios node_modules package.json
[yunxi@localhost wuyuApp (master ✗)]$ react-native run-ios
[yunxi@localhost wuyuApp (master ✗)]$ react-native run-android
ReactNative开发工具
推荐开发工具Atom,下载地址:https://atom.io/; Atom常用插件推荐:
- open-in-browser: 浏览器浏览功能
- atom-html-preview: 分屏展示html页面效果
- autocomplete-path: 文件路径补全
React资料
- React教程: http://www.runoob.com/react/react-components.html
- React官网: https://facebook.github.io/react/
- ReactNative中文网: http://reactnative.cn/
网友评论