React基础语法学习
React主要有如下3个特点：
- 作为UI（Just the UI）
- 虚拟DOM（Virtual DOM）:这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法
- 数据流（Date Flow）单向数据流
学习React需要掌握哪些知识？
- JSX语法 类似XML
- ES6相关知识
- 前端基础 CSS+DIV JS
例子一
（简单组件和数据传递） 使用this.props 指向自己的属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第一个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage=React.createClass(
{
render:function(){
return <h1 style={{color:'#ff0000',fontSize:'24px'}} >Hello {this.props.name}!我是东方耀</h1>;
//这是注释 React.createElement
}
}
);
ReactDOM.render(<HelloMessage name="React 语法基础8" /> ,document.getElementById('example'));
</script>
</body>
</html>例子二（通过this.state更新视图）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第二个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Timer=React.createClass(
{
/*初始状态*/
getInitialState:function(){
return {secondsElapsed:0};
},
tick:function(){
this.setState({secondsElapsed:this.state.secondsElapsed+1});
},
/*组件完成装载*/
componentDidMount:function(){
this.interval=setInterval(this.tick,1000);
},
/*组件将被卸载 清除定时器*/
componentWillUnmount:function(){
clearInterval(this.interval);
},
/*渲染视图*/
render:function(){
return(
<div> Seconds Elapsed:{this.state.secondsElapsed} </div>
);
}
}
);
React.render( <Timer /> ,document.getElementById('example'));
</script>
</body>
</html>例子三（简单应用）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第三个例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ShowEditor=React.createClass(
{
getInitialState:function(){
return {value:'你可以在这里输入文字'};
},
handleChange:function(){
this.setState({value:React.findDOMNode(this.refs.textarea).value});
},
render:function(){
return (
<div>
<h3>输入</h3>
<textarea style={{width:300,height:150,outline:'none'}}
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value}
/>
<h3>输出</h3>
<div> {this.state.value} </div>
</div>
);
}
}
);
React.render(<ShowEditor />,document.getElementById('example'));
</script>
</body>
</html>flexbox布局
伸缩项目的属性
1.order
定义项目的排列顺序，数值越小，排列越靠前，默认值为0，语法为：order：整数值
2.flex-grow
定义伸缩项目的放大比例，默认值为0，即表示如果存在剩余空间，也不放大，语法为：flex-grow：整
数值
3.flex-shrink
定义伸缩项目的收缩能力，默认值为1 ，其语法为：flex-shrink:整数值
4.flex-basis
用来设置伸缩项目的基准值，剩余的空间按比率进行伸缩，其语法为：flex-basis:length | auto，默认
值为auto
5.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
6.align-self
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：align-self:auto
| flex-start | flex-end | center | baseline | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为
垂直方向的话，只有在不设置高度的情况下才能看到效果)
在React Native中使用flexbox
RN目前主要支持flexbox的如下6个属性：
1.alignItems
用来定义伸缩项目在交叉轴上的对齐方式，语法为： alignItems:flex-start（默认值） | flex-end |
center | stretch
2.alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式，其语法为：alignSelf:auto |
flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器，如果交叉轴为垂直方向的
话，只有在不设置高度的情况下才能看到效果)
3.flex
是flex-grow flex-shrink flex-basis这三个属性的缩写，其语法为：flex:none | flex-grow flex-shrink flexbasis，
其中第二个和第三个参数为可选参数，默认值为：0 1 auto
4.flexDirection
指定主轴的方向 flex-direction:row| row-reverse | column（默认值） | column-reverse
5.flexWrap
6.justifyContent
BOX实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.height50 {
height: 50px;
}
.height400 {
height: 400px;
}
.height300 {
height: 300px;
}
.height200 {
height: 200px;
}
.height100 {
height: 100px;
}
.width400 {
width: 400px;
}
.bgred {
background-color: #6AC5AC;
}
.bggreen {
background-color: #414142;
}
.bgyellow {
background-color: #D64078;
}
.box {
display: flex;
flex-direction: column;
flex: 1;
position: relative;
color: #FDC72F;
line-height: 1em;
}
.label {
top: 0;
left: 0;
padding: 0 3px 3px 0;
position: absolute;
background-color: #FDC72F;
color: white;
line-height: 1em;
}
.top {
width: 100%;
justify-content: center;
display: flex;
align-items: center;
}
.bottom {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.right {
width: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.left {
width: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.heightdashed {
position: absolute;
right: 20px;
height: 100%;
border-left: 1px solid #FDC72F;
}
.widthdashed {
position: absolute;
left: 0px;
width: 100%;
bottom: 24px;
border-top: 1px solid #FDC72F;
}
.margginBox {
position:absolute;
top: 100px;
padding-left:7px;
padding-right:7px;
}
.borderBox {
flex: 1;
display: flex;
justify-content: space-between;
}
.paddingBox {
flex: 1;
display: flex;
justify-content: space-between;
}
.elementBox{
flex: 1;
display: flex;
justify-content: space-between;
}
.measureBox {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
</style>
</head>
<body>
<span class="margginBox">
<span class="box height400 width400">
<span class="label">
margin
</span>
<span class="top height50 bgred">
top
</span>
<span class="borderBox">
<span class="left bgred">
left
</span>
<span class="box height300 ">
<span class="label">
border
</span>
<span class="top height50 bggreen">
top
</span>
<span class="paddingBox">
<span class="left bggreen">
left
</span>
<span class="box height200 ">
<span class="label">
padding
</span>
<span class="top height50 bgyellow">
top
</span>
<span class="elementBox">
<span class="left bgyellow">
left
</span>
<span class="box height100 ">
<span class="label">
element
</span>
<span class="widthdashed">
</span>
<span class="heightdashed">
</span>
<span class="measureBox">
<span class="right">
height
</span>
</span>
<span class="bottom height50">
width
</span>
</span>
<span class="right bgyellow">
right
</span>
</span>
<span class="bottom height50 bgyellow">
bottom
</span>
</span>
<span class="right bggreen">
right
</span>
</span>
<span class="bottom height50 bggreen">
bottom
</span>
</span>
<span class="right bgred">
right
</span>
</span>
<span class="bottom height50 bgred">
bottom
</span>
</span>
</span>
</body>
</html>效果如下
ReactNative版实现
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class DongFang extends Component {
render() {
return (
<View style={[BoxStyles.margginBox]} ref="lab1">
<View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}>
<View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>
<Text style={BoxStyles.yellow}>top</Text></View>
<View style={[BoxStyles.borderBox]}>
<View style={[BoxStyles.left,BoxStyles.bgred]} >
<Text style={BoxStyles.yellow}>left</Text></View>
<View style={[BoxStyles.box,BoxStyles.height300]}>
<View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}>
<Text style={BoxStyles.yellow}>top</Text></View>
<View style={[BoxStyles.paddingBox]}>
<View style={[BoxStyles.left,BoxStyles.bggreen]} >
<Text style={BoxStyles.yellow}>left</Text></View>
<View style={[BoxStyles.box,BoxStyles.height200]}>
<View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}>
<Text style={BoxStyles.yellow}>top</Text></View>
<View style={[BoxStyles.elementBox]}>
<View style={[BoxStyles.left,BoxStyles.bgyellow]} >
<Text style={BoxStyles.yellow}>left</Text></View>
<View style={[BoxStyles.box,BoxStyles.height100]}>
<View style={[BoxStyles.label]}>
<Text style={BoxStyles.white}>element</Text></View>
<View style={[BoxStyles.widthdashed]} ></View>
<View style={[BoxStyles.heightdashed]} ></View>
<View style={[BoxStyles.measureBox]} >
<View style={[BoxStyles.right]}>
<Text style={[BoxStyles.yellow]}>height</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50]}>
<Text style={BoxStyles.yellow}>width</Text></View>
</View>
<View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}>
<Text style={BoxStyles.yellow}>bottom</Text></View>
<View style={[BoxStyles.label]}>
<Text style={BoxStyles.white}>padding</Text></View>
</View>
<View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}>
<Text style={BoxStyles.yellow}>bottom</Text></View>
<View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>
</View>
<View style={[BoxStyles.right,BoxStyles.bgred]}>
<Text style={BoxStyles.yellow}>right</Text></View>
</View>
<View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}>
<Text style={BoxStyles.yellow}>bottom</Text></View>
<View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View>
</View>
</View>
);
}
}
const BoxStyles = StyleSheet.create({
height50:{
height: 50,
},
height400:{
height: 400,
},
height300:{
height: 300,
},
height200:{
height: 200,
},
height100:{
height: 100,
},
width400:{
width: 400,
},
width300:{
width: 300,
},
width200:{
width: 200,
},
width100:{
width: 100,
},
bgred: {
backgroundColor:'#6AC5AC',
},
bggreen: {
backgroundColor: '#414142',
},
bgyellow: {
backgroundColor: '#D64078',
},
box: {
flexDirection: 'column',
flex: 1,
position: 'relative',
},
label: {
top: 0,
left: 0,
paddingTop: 0,
paddingRight: 3,
paddingBottom: 3,
paddingLeft: 0,
position: 'absolute',
backgroundColor: '#FDC72F',
},
top: {
justifyContent: 'center',
alignItems: 'center',
},
bottom: {
justifyContent: 'center',
alignItems: 'center',
},
right: {
width: 50,
justifyContent: 'space-around',
alignItems: 'center',
},
left: {
width: 50,
justifyContent: 'space-around',
alignItems: 'center',
},
heightdashed: {
bottom: 0,
top: 0,
right: 20,
borderLeftWidth: 1,
position: 'absolute',
borderLeftColor: '#FDC72F',
},
widthdashed: {
bottom: 25,
left: 0,
right: 0,
borderTopWidth: 1,
position: 'absolute',
borderTopColor: '#FDC72F',
},
yellow: {
color: '#FDC72F',
fontWeight:'900',
},
white: {
color: 'white',
fontWeight:'900',
},
margginBox:{
position: 'absolute',
top: 100,
paddingLeft:7,
paddingRight:7,
},
borderBox:{
flex: 1,
justifyContent: 'space-between',
flexDirection: 'row',
},
paddingBox:{
flex: 1,
justifyContent: 'space-between',
flexDirection: 'row',
},
elementBox:{
flex: 1,
justifyContent: 'space-between',
flexDirection: 'row',
},
measureBox:{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems:'flex-end',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('DongFang', () => DongFang);
React基础语法学习的更多相关文章
- Swift基础语法学习总结(转)
Swift基础语法学习总结 1.基础 1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...
- Swift基础语法学习总结
Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础 1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...
- react基础语法（五） state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Python 基础语法学习（第一讲）---类的使用
[写在前面]:其实自学python有一段时间了,但是一直没想起来要写博客来记录自己的学习,今天才感觉要写点什么让自己学的更扎实一点,所以从今天开始更新python自学系列,希望看见文章的大佬们可以指点 ...
- Java基础语法学习
Java基础语法学习 1. 注释 单行注释: //单行注释 多行注释: /*多行注释 多行注释 多行注释 多行注释 */ 2. 关键字与标识符 关键字: Java所有的组成部分都需要名字.类名.变量名 ...
- java 基础语法学习01
Java基础语法 注释 初次使用idea时相关配置 new project ->Empty project->进入页面 再选择file->project structure-> ...
- react基础语法（四） state学习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Go基础语法学习
Go语言基础 Go是一门类似C的编译型语言,但是它的编译速度非常快.这门语言的关键字总共也就二十五个,比英文字母还少一个,这对于我们的学习来说就简单了很多.先让我们看一眼这些关键字都长什么样: 下面列 ...
- react 基础语法使用
刚开始不久react,在菜鸟上及其他前辈网站上学习,下面开始我的自学笔记. 包括: 渲染元素 组件(函数方法定义.es6 class定义) 事件处理 条件渲染 列表 下面代码部分将不会再写html部分 ...
随机推荐
- HDU 5384 字典树、AC自动机
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5384 用字典树.AC自动机两种做法都可以做 #include<stdio.h> #includ ...
- Mac OS X 11以上系统的Rootless机制问题
由于项目紧,系统一直停留在10版本,最近清闲之后,第一件事就是升级了系统,到11El Capitan版本. 本来想着随便升级了,可能有好玩的东东,结果好玩的木有看见,项目开发环境崩溃了,何其衰耶? 废 ...
- iOS开发——UI基础-提示框
提示框的种类有很多,废话不多说,直接上代码 一.文本提示框 运行结果如下: 代码实现如下: @interface ViewController () // 添加方法 - (IBAction)add; ...
- Tomcat7优化配置
导读 Tomcat在使用的过程中会遇到很多报错,有些是程序的报错,但还有一部分是tomcat本身的报错,我们可以通过优化tomcat的初始配置来提高tomcat的性能.Tomcat的优化主要体现在两方 ...
- [POJ1765]November Rain
[POJ1765]November Rain 试题描述 Contemporary buildings can have very complicated roofs. If we take a ver ...
- cacti错误
cacti 错误:CMDPHP: Poller[0] ERROR 解决方案: 找到错误表 desc 表名: 修复此表 mysqlcheck -A -o -r -p -u用户名
- django 的文件上传
template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...
- centos 设置永久dns
最近在折腾一个问题. 由于服务器的带宽是联通5M, 不稳定.而且所处的网络的dns解析貌似老出问题,每隔一定周期解析时间特别长. 于是乎,想在本地做一个dns,这样可以减少dns解析时间,并做些静态配 ...
- Bootstrap 3学习笔记 -栅格
这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗? (1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块 ...
- mysql允许其他电脑访问权限开通
首先进入mysql: mysql -u root 如果有密码会提示输入密码 然后输入如下授权代码, 如下即授权用户root使用密码admin123从任何主机连接到mysql服务器 GRANT ALL ...