<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React练习</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<!-- 官方CDN-->
<!-- <script src="https://unpkg.com/react@16/umd/react.development.js"></script>-->
<!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>-->
<!-- <!– 生产环境中不建议使用 –>-->
<!-- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>-->
</head>
<body>
<div id="example"></div>
<div id="helloworld"></div>
<div id="app"></div>
<div id="state"></div>
<div id="clickButton"></div>
<div id="toggle"></div>
<div id="condition"></div>
<div id="confirm_login"></div>
<div id="expression"></div>
<div id="list"></div>
<div id="ajax"></div>
<div id="input"></div>
<div id="select"></div>
</body>
<script type="text/babel">
//封装函数
function tick() {
const element = (<div>
<h2>你好啊</h2>
<h2>现在是{new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('example')
);
}
setInterval(tick,1000);
</script>
<script type="text/babel">
//自定义组件
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const helloworld = <HelloMessage name="World" />
ReactDOM.render(
helloworld,
document.getElementById("helloworld")
);
</script>
<script type="text/babel">
//组合组件方式
function Name(props) {
return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
return (
<div>
<Name name="百度" />
<Url url="www.baidu.com" />
<Nickname nickname="小度" />
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById("app")
);
</script>
<script type="text/babel">
//react state(状态) 这是用来减少DOM操作
class Clock extends React.Component{
//构造函数
constructor(props) {
super(props);
this.state = {date:new Date()};
}
//生命周期钩子--渲染完界面后调用
componentDidMount(){
this.jsq = setInterval(
() => this.tick(),
);
}
//卸载组件后调用
componentWillUnmount(){
clearInterval(this.jsq);
}
//主动调用方法 setState代表状态改变调用
tick(){
this.setState({
date:new Date(),
});
}
render(){
return(
<div>
<h3>时间计时器</h3>
<h3>现在是{this.state.date.toLocaleTimeString()}.</h3>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById("state")
);
</script>
<script type="text/babel">
//事件
//不能用return false来终止默认行为，要使用preventDefault
function ActionLink() {
function handleClick(e){
e.preventDefault();
console.log('链接被点击');
}
return (
<a href="#" onClick={handleClick}>点我</a>
);
}
ReactDOM.render(
<ActionLink />,
document.getElementById("clickButton")
);
</script>
<script type="text/babel">
//定义一个组件--切换开关的按钮
class Toggle extends React.Component{
constructor(props) {
super(props);
this.state = {isOpen:true};
//(绑定之后才能在回调函数中调用，我第一次写就漏掉了，会报错)
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
this.setState(prevState => ({
isOpen: !prevState.isOpen
}));
}
//还有一种写法确保this绑定
// handleClick = () => {
// console.log('this is:',this);
// }
render(){
return (
<div>
<button onClick={this.handleClick}>
{this.state.isOpen?'ON':'OFF'}
</button>
</div>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById("toggle")
);
</script>
<script type="text/babel">
//条件渲染
function Register(props) {
return <h3>请先注册!</h3>
}
function Greet(props) {
return <h3>欢迎回来!</h3>
}
function Condition(props) {
const isLoginIn = props.isLoginIn;
if(isLoginIn){
return <Greet />;
}else{
return <Register />;
}
}
ReactDOM.render(
<Condition isLoginIn={false} />,
document.getElementById("condition")
);
</script>
<script type="text/babel">
//元素
class LoginConfirm extends React.Component{
constructor(props) {
super(props);
this.state = {isLoginedIn: false};
}
handleLogin = () => {
this.setState({isLoginedIn: true});
}
handleLoginOut = () => {
this.setState({isLoginedIn: false});
}
render(){
const isLoginedIn = this.state.isLoginedIn;
let button =null;
if(isLoginedIn){
//这里使用了this.handleLoginOut是因为方法中绑定了this,注意方法的写法
button = <LogoutButton onClick={this.handleLoginOut} />;
}else{
button = <LoginButton onClick={this.handleLogin} />;
}
return (
<div>
<Greeting isLoginedIn={isLoginedIn} />
{button}
</div>
);
}
}
function UserGreet(props) {
return <h3>欢迎回来！</h3>;
}
function UserRegister(props) {
return <h3>请先注册！</h3>;
}
function Greeting(props) {
const isLoginedIn = props.isLoginedIn;
if(isLoginedIn){
return <UserGreet />;
}else{
return <UserRegister />;
}
}
function LogoutButton(props){
return(
<div>
<button onClick={props.onClick}>退出</button>
</div>
);
}
function LoginButton(props){
return(
<div>
<button onClick={props.onClick}>登陆</button>
</div>
);
}
ReactDOM.render(
<LoginConfirm />,
document.getElementById("confirm_login")
);
</script>
<script type="text/babel">
//运算符
function Email(props) {
const unreadMessage = props.unreadMessage;
return(
<div>
<h3>测试加入运算符计算</h3>
<p>true&&表达式 为真输出后面表达式 为假不会输出</p>
{
unreadMessage.length > 0 &&
<h3>您有{unreadMessage.length}条未读消息</h3>
}
</div>
);
}
const message = ['1','2','3','4'];
ReactDOM.render(
<Email unreadMessage = {message} />,
document.getElementById("expression")
);
</script>
<script type="text/babel">
//列表
function NumberList(props) {
const number = props.number;
const listItem = number.map((v)=>
<li key={v.toString()}>
{v}
</li>
);
return (
<ul>{listItem}</ul>
);
}
const number = [1,2,3,4,5];
ReactDOM.render(
<NumberList number={number} />,
document.getElementById("list")
);
</script>
<script type="text/babel">
//react ajax
class HttpAjax extends React.Component{
constructor(props) {
super(props);
this.state = {username:'',lastUrl:''};
}
componentDidMount(){
this.request = $.get(this.props.source,function (res) {
var result = res[0];
this.setState({
username:result.owner.login,
lastUrl: result.html_url
});
}.bind(this));
}
componentWillUnmount(){
this.request.abort();
}
render(){
return (
<div>
{this.state.username}用户最新的gist共享地址:
<a href={this.state.lastUrl}>{this.state.lastUrl}</a>
</div>
);
}
}
ReactDOM.render(
<HttpAjax source="https://api.github.com/users/octocat/gists" />,
document.getElementById("ajax")
);
</script>
<script type="text/babel">
//表单元素
class InputChange extends React.Component{
constructor(props) {
super(props);
this.state = {value:'Hello Tom!'};
this.handleChage = this.handleChage.bind(this);
}
handleChage(event){
this.setState({value:event.target.value});
}
render(){
var value = this.state.value;
return (
<Content myData = {value} upData = {this.handleChage} />
);
}
}
function Content(props){
return (
<div>
<input type="text" value={props.myData} onChange={props.upData} />
<h3>{props.myData}</h3>
</div>
);
}
ReactDOM.render(
<InputChange />,
document.getElementById("input")
);
</script>
<script type="text/babel">
//下拉框
class Forms extends React.Component{
constructor(props) {
super(props);
this.state = {value:'0'};
this.changeSelect = this.changeSelect.bind(this);
this.formSubmit = this.formSubmit.bind(this);
}
changeSelect(event){
this.setState({value:event.target.value});
}
formSubmit(event){
alert('您的选择是：'+ this.state.value);
event.preventDefault();
}
render(){
return(
<form onSubmit={this.formSubmit}>
<lable>选择您最喜欢的网站</lable>
<select value={this.state.value} onChange={this.changeSelect} >
<option value="0">--请选择--</option>
<option value="gg">谷歌</option>
<option value="jd">京东</option>
<option value="tb">淘宝</option>
<option value="dw">得物</option>
</select>
<input type="submit" value="提交" />
</form>
);
}
}
ReactDOM.render(
<Forms />,
document.getElementById("select")
);
</script>
</html>