因項目某些頁面需要重構, 使用了ReactJs, 所以做了一些小demo
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 很方便
令文字漸變效果, 使用了props, 計時器等, 源碼參考開始時給出的源代碼地址
———————SiteStart————————-
www.panshang.xyz
www.panshang.xyz
www.panshang.xyz
———————-SiteEnd————————
by: 潘尚
time: 2016.1.30