您的位置：首页 > Web前端 > React

ReactJs基础_1

2016-01-30 10:26 531 查看

因项目某些页面需要重构, 使用了ReactJs, 所以做了一些小demo

源码地址,含有wiki

1.JSX使得在模板插入js变量

<!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>
<script type="text/babel">
//JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
var arr = [
<h1> Hellow, Pan </h1>,
<h2> I like React very much! </h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
</script>
</body>
</html>

2.ReactDomTest

<!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>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

3.使用JSX支持JS与HTML混用

<!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>
<script type="text/babel">
var names = ['Shine', 'Pans', 'Panshang'];
//jsx可以让html和js混用, <>是html, {}是js
ReactDOM.render(
<div>
{
names.map(function (name){
return <div> Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
</script>
</body>
</html>

4.创建组件

<!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>
<script type="text/babel">
//HelloMessage 是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例
var HelloMessage = React.createClass({
render: function(){
return <h1>Hello, {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name = "Pan" />,
document.getElementById('example')
);
</script>
</body>
</html>

5.使用属性 props

<!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>
<script type="text/babel">
//NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});

ReactDOM.render(
<NotesList>
<span>hello</span>
<span>Pan! </span>
</NotesList>,
document.body
);
</script>
</body>
</html>

6.PropsType

<!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>
<script type="text/babel">
var MyTitle = React.createClass({
//要求title的属性的data类型是string,只能是string
propTypes: {
title: React.PropTypes.string.isRequired,
},

render: function() {
return <h1> {this.props.title} </h1>;
}
});

//测试部分, 将title属性设置成 int类型, 然后会报错
//将123用引号包起来标示为字符串类型将不在报错
var data = 123;

ReactDOM.render(
<MyTitle title = {data} />,
document.body
);
</script>
</body>
</html>

7.使用默认属性 GetDefaultProps

<!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>
<script type="text/babel">
//获取默认的属性
//获取的是title的值
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'shinepans'
};
},

render: function() {
return <h1> {this.props.title} </h1>;
}
});

ReactDOM.render(
<MyTitle />,
document.body
);
</script>
</body>
</html>

8.获取真实dom

<!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>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick: function() {
//监听点击事件, 聚焦输入框
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>

9.通过State改变状态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8")> </meta>
<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>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
//转换状态, 喜欢或不喜欢
render: function() {
var text = this.state.liked ? '喜欢了' : '还没喜欢';
return (
<p onClick={this.handleClick}>
你{text}这个.点击文本改变你的状态.
</p>
);
}
});

ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>

10.使用表单监听,更好的用户交互

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8")> </meta>
<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>
<script type="text/babel">
//监听textarea的变化, 变化了就更新p标签里的内容
//下面初始化了 输入框和p的初始值
var Input = React.createClass({
getInitialState: function() {
return {value: '请在文本框输入文本'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<textarea rows="10" cols="30" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});

ReactDOM.render(<Input/>, document.body);
</script>
</body>
</html>

11.使用JSBIn 直接在浏览器运行,调试JSX 很方便

JSBib网址

令文字渐变效果, 使用了props, 计时器等, 源码参考开始时给出的源代码地址

———————SiteStart————————-

www.panshang.xyz

www.panshang.xyz

www.panshang.xyz

———————-SiteEnd————————

by: 潘尚

time: 2016.1.30

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript ReactJs

相关文章推荐

新的分享

章节导航