react 学习与使用记录
相关技术：webpack+react+react-router+redux+immutable
郭永峰react学习指南
1.git bash--windows命令行工具 --教程 下载地址
2. immutable immutable的基础操作 中文基础操作文章
2.1 es6运行编译环境搭建
3. js创建对象的几种方法
4.阮一峰全栈开发教程
疑问点：
关于react-router中props传递的问题
-----1.className 有多个的时候
（1）用拼接字符串的方法
<div className={value.class + " " + value.class2}>{value.value}</div> （2）用字符串模板也行
<div className={`${value.class} ${value.class2}`}>{value.value}</div>花括号里面就是可以运算的部分啊
（3）如果是数组的话直接join也行啊
<div className={classnames.join(" ")}>{value.value}</div>
举例：<div className={`header ${className || ''}`}>------------------------------------------------------------
1.demo1---3 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<!-- 不能少逗号，render里不能加分号 -->
<!-- ReactDOM.render（）用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 -->
<div id="example"></div>
<div id="aa"></div>
<div id="bb">
<!-- 如果这个变量是一个数组，则会展开这个数组的所有成员 注意：字符串要加'',数字不用-->
</div>
<script type="text/babel">
var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
); var ages=['12','45','67','90'];
ReactDOM.render(
<div>
{
ages.map(function (age){
return <div>age:,{age}!</div>
})
}
</div>,
document.getElementById('aa')
); var myArray= [
'12222ggg',
'3455555ggg',
'455444ggg'
];
var myArrayNum= [
12222,
3455555,
455444
];
var myArrayHtml= [
<h1>1245444</h1>,
<h2>2222222</h2>,
<h3>56898</h3>
];
ReactDOM.render(
<div>
{myArray}
{myArrayNum}
{myArrayHtml}
</div>,
document.getElementById('bb')
);
</script>
</body>
</html>
2.demo4--5 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example">
<!-- React.createClass 方法就用于生成一个组件类.
组件类只能包含一个顶层标签，否则也会报错。
-->
</div>
<div id="bb">
<!-- this.props.children 属性。它表示组件的所有子节点 -->
<!-- React.Children.map() 注意大小写 -->
<!-- ReactDOM.render() 必须分情况写，不能都写到一个render里 -->
</div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function(){
return <h3>hello {this.props.name} <a>age:{this.props.age}</a></h3>
}
}); var MoreChilds = React.createClass({
render:function(){
return (
<ul>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>
})
}
</ul>
);
}
}) ReactDOM.render(
<HelloMessage name="20161206test" age="13"></HelloMessage>,
document.getElementById('example')
);
ReactDOM.render(
<MoreChilds>
<span>morechild1</span>,
<span>morechild2</span>
</MoreChilds>,
document.getElementById('bb')
); </script>
</body>
</html>
3.demo6 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example">
<!-- 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求 -->
</div>
<div id="aa">
<!-- data_12变量直接输出 -->
</div>
<div id="bb">
<!-- 虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 -->
</div>
<script type="text/babel">
var data = 123; var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
}, render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
); var data_11 = 12456;
var MyTitle_11 = React.createClass({
propTypes:{
title: React.PropTypes.string.isRequired,
},
handleClick:function(){
this.refs.myTextInput.focus();
},
render:function(){
return (
<div>
<h3>{this.props.title}</h3>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
)
}
});
ReactDOM.render(
<MyTitle_11 title={data_11} />,
document.getElementById('bb')
) var data_12 = 'test123';
ReactDOM.render(
<h2>{data_12}</h2>,
document.getElementById('aa')
) </script>
</body>
</html>
4.demo8 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="bb">
<!-- getInitialState 获得初始默认状态；this.setState 方法就修改状态值 -->
<!-- onClick={this.handleClick} 点击调用操作函数handleClick -->
<!-- 区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 -->
</div>
<script type="text/babel">
var LikeButton11 = React.createClass({
getInitialState: function(){
return {liked:false};
},
handleClick:function(){
this.setState({liked: !this.state.liked});
console.log("yyyyyy");
},
render: function(){
var text= this.state.liked ? 'like' : 'nononononno';
return (
<p onClick={this.handleClick}>
你 {text} 点击了切换
</p>
);
}
}); ReactDOM.render(
<LikeButton11 />,
document.getElementById('bb')
);
</script>
</body>
</html>
5.demo9 练习
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="aa">
<!-- ，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况 -->
<!-- function(event) { //event 不能忘加
this.setState({value: event.target.value}); //设置值
var value = this.state.value; //勿忘定义
} -->
</div>
<script type="text/babel">
var Input11 = React.createClass({
getInitialState:function(){
return {value:'hello111!'};
},
handleChange:function(event) {
this.setState({value: event.target.value});
},
render:function(){
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input11/>,document.getElementById('aa')); </script>
</body>
</html>
react 学习与使用记录的更多相关文章
- 业余学习react 学习记录
http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...
- React学习笔记。
有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...
- 【JAVASCRIPT】React学习- 杂七杂八
摘要 记录 React 学习中的小细节 setState setState 有一定的时间延迟,如果需要保证 setState 之后执行某些动作,可以采用以下方法 this.setState({ vis ...
- React学习（4）——向服务器请求数据并显示
本文中涉及到的技术包括:node.js/express服务器的搭建.fetch发送数据请求. 在之前的几篇文章中,介绍了如何搭建基础的React项目,以及一些简单知识,现在,我们还需要掌握如何用Rea ...
- React 学习笔记：1-react 入门
接下来的项目里有用到react,最近一段时间主要关注于react 的学习.大部门都是网上的资料,学习整理并记录,加深记忆. React 是Facebook推出的用来构建用户界面的JavaScript库 ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
- React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...
随机推荐
- 学习Linux（一）环境搭建
零基础学习Linux(一)环境搭建 从本文开始我会为大家介绍一下linux环境下详细的集群环境安装.配置.部署到实例演示的整个过程.在此过程中会给大家详细介绍一下Linux的操作技巧和一些工具的使用. ...
- 【NET】WebBrowser执行脚本以及一般操作代码
public class WebBrowserAssistant { System.Windows.Forms.WebBrowser wb; public WebBrowserAssistant(Sy ...
- zTree应用实例详讲(3)
zTree应用实例详讲(3) 上一讲中,已经讲到了重命名与删除.那么这一讲,我们来做新建文件夹. 其实新建是非常简单的,想一下我们想要的效果:点击新建,然后在一个节点下面出现一个新建的文件夹,并且与此 ...
- Android While 循环导致的资源占用过高进而导致程序崩溃问题
Timeline: Activity_launch_request time:6562004-14 15:31:25.347: I/dalvikvm(3483): Total arena pages ...
- SSD Buffer Pool Extension
SSD Buffer Pool Extension 简介 SQL Server 2014中另一个非常好的功能是,可以将SSD虚拟成内存的一部分,来供SQL Server数据页缓冲区使用.通过使用SSD ...
- Linux设备驱动开发详解-Note(5)---Linux 内核及内核编程(1)
Linux 内核及内核编程(1) 成于坚持,败于止步 Linux 2.6 内核的特点 Linux 2.6 相对于 Linux 2.4 有相当大的改进,主要体现在如下几个方面. 1．新的调度器 2.6 ...
- Android开发(24)---安卓中实现多线程下载（带进度条和百分比）
当我们学完java中多线程的下载后,可以将它移植到我们的安卓中来,下面是具体实现源码: DownActivity.java package com.example.downloads; import ...
- Java 在本地文件中查找固定字符串
适用范围:只适用于在文本文档中查找(如,txt.java.c等等,并不适用与doc.xls等等这些文件),可嵌套文件夹.但是对中文不支持. 例如:文件夹:F:/demo 子文件夹:F:/demo/er ...
- Servlet的ClassLoader
摘自深入java web技术内幕修订版
- OGG学习笔记01-基础概述
OGG学习笔记01-基础概述 OGG(Oracle Golden Gate),最近几年在数据同步.容灾领域特别火,甚至比Oracle自己的原生产品DataGuard还要风光,主要是因为其跨平台.跨数据 ...