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验证等, ...
随机推荐
- CLR_Via_C#学习笔记之枚举
CLR_Via_C#学习笔记之枚举 枚举类型(Enum)定义的一组"符号名称/值"配对:因为枚举类型使用程序更容易编写.阅读和维护,而且它是强类型: 枚举是值类型:由System. ...
- VMware NAT方式 CentOS 6.8配置静态IP
一.打开虚拟机设置,配置网络连接,如下图 二.编辑 /etc/sysconfig/network,以配置网关 vim /etc/sysconfig/network NETWORKING=yes HOS ...
- linux 之 popen函数
描述 popen() 函数 用 创建管道 的 方式启动一个 进程, 并调用 shell. 因为 管道是被定义成单向的, 所以 type 参数 只能定义成 只读或者 只写, 不能是 两者同时, 结果流也 ...
- java的抽象类和抽象方法（注意查看如何调用抽象类中的非抽象方法）
抽象类就是不能使用new方法进行实例化的类,即没有具体实例对象的类.抽象类有点类似“模板”的作用,目的是根据其格式来创建和修改新的类.对象不能由抽象类直接创建,只可以通过抽象类派生出新的子类,再由其子 ...
- Visual Studio 2012设置Jquery/Javascript智能提示
Visual Studio 2012设置Jquery/Javascript智能提示 在Visual Studio 2008 Visual Studio 2010中微软已经开始支持jquery/java ...
- 一步一步深入spring(5)--使用基于注解的spring实现 AOP
1.要利用spring aop,至少需要添加以下jar包 使用spring需要的jarspring.jar .commons-logging.jar 使用切面编程(AOP)需要的jar aspectj ...
- javascript ajax 脚本跨域调用全解析
javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...
- Internet Liberity -- a specific anonymous internet guide
Here we see. Please leave your comments if you have some views. Happy hacking! Free the internet!
- mysql数据类型简介
MySQL的数据表类型很多,其中比较重要的是MyISAM,InnoDB这两种. 这两种类型各有优缺点,需要根据实际情况选择适合的,MySQL支持对不同的表设置不同的类型.下面做个对比: MyISAM表 ...
- 那天有个小孩教我WCF[一][1/3]
那天有个小孩教我WCF[一][1/3] 既然是小孩系列,当然要有一点基础才能快速掌握,归纳,总结的一个系列,哈哈 前言: 第一篇嘛,不细讲,步步教你创建一个简单SOA案例,对WCF有个基本的认识,我不 ...