相关技术:webpack+react+react-router+redux+immutable

郭永峰react学习指南

1.git bash--windows命令行工具 --教程 下载地址

2. immutable immutable的基础操作    中文基础操作文章

2.1 es6运行编译环境搭建

3. js创建对象的几种方法

4.阮一峰全栈开发教程

5.react--api

6.redux-ruanyifeng  redux文档

疑问点:

关于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 || ''}`}>

------------------------------------------------------------

阮一峰  react教程

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 学习与使用记录的更多相关文章

  1. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  2. React学习笔记。

    有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...

  3. 【JAVASCRIPT】React学习- 杂七杂八

    摘要 记录 React 学习中的小细节 setState setState 有一定的时间延迟,如果需要保证 setState 之后执行某些动作,可以采用以下方法 this.setState({ vis ...

  4. React学习(4)——向服务器请求数据并显示

    本文中涉及到的技术包括:node.js/express服务器的搭建.fetch发送数据请求. 在之前的几篇文章中,介绍了如何搭建基础的React项目,以及一些简单知识,现在,我们还需要掌握如何用Rea ...

  5. React 学习笔记:1-react 入门

    接下来的项目里有用到react,最近一段时间主要关注于react 的学习.大部门都是网上的资料,学习整理并记录,加深记忆. React 是Facebook推出的用来构建用户界面的JavaScript库 ...

  6. AntDesign(React)学习-1 创建环境

    目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...

  7. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  8. react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

    react学习小结   本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...

  9. React学习资料

    以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

随机推荐

  1. c语言,求字符数组的长度

    练手代码,适用初级码农: #include<stdlib.h> #include<stdio.h> #include<assert.h> int count(con ...

  2. IOS学习之路(二十五)UIView动画,弹出后移动然后消失

    首先在viewdidload中添加UIlable并且把其设为隐藏 然后在点击按钮后,让其弹出移动后消失 //点击按钮后: #pragma mark 点击关注按钮 - (IBAction)guanzhu ...

  3. MyEclipse修改默认的workspace路径

    在此只提供一个自己认为可行的办法(已验证可行) 已MyEclipse8.5为例 打开安装路径C:\Program Files\Genuitec\MyEclipse 8.5\configuration下 ...

  4. 基于easyui的webform扩展

    基于easyui的webform扩展 回顾 <前端基于easyui的mvc扩展>.<前端基于easyui的mvc扩展(续)>前两篇介绍了mvc内如何基于easyui进行扩展,在 ...

  5. node包管理器

    NPM小结   nodejs的出现,可以算是前端里程碑式的一个事件,它让前端攻城狮们摆脱了浏览器的束缚,踏上了一个更加宽广的舞台.前端的可能性,从此更加具有想象空间. 随着一系列基于nodes的应用/ ...

  6. 使用 Python 开始游戏开发

    使用 Python 开始游戏开发 这是一篇由教程团队成员Julian Meyer发表的文章,一个12岁的python开发人员.你可以在Google+和Twitter上找到他. 你可曾想过如何创建视频游 ...

  7. Docker ( Is docker really better than VM ?)

    Docker is so popular. Arha? Let's try! Docker needs the linux kernel shoud be upper than 3.10.x Let' ...

  8. win7 安装 sql2000

    win7 安装:http://wenku.baidu.com/link?url=xNcfrMaMzX0KgBcjpMaySRaKITM2Op73ZI8sOX49zgl-GWPGB3vqye9gZA_c ...

  9. http概览

    http概览 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它可以使浏览器更加高效,使网络传输减少.它不仅 ...

  10. C#新功能--命名参数与可选参数

    C#新功能--命名参数与可选参数 可能是篇幅太短了,又被打入冷宫了.先重发一篇加上可选参数.本来不想加这个呢,因为可选参数可能大家用的会多点.其实这 两个在VB中早就有了,在C#中,只有在.net4以 ...