标签：链接 声明 localhost 简单 map 使用 界面 http element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world!</title>
<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>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById(‘example‘)
);
</script>
ReactDOM.render(
<h1>Hello,World!</h1>,
document.getElementById(‘example‘)
);
var animals = [‘dog‘,‘cat‘,‘pig‘];
ReactDOM.render(
<div>
{
animals.map(function(animal) {
return <h1>{animal}</h1>
})
}
</div>,
document.getElementById(‘example‘)
);
Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>
var animals = [‘dog‘,‘cat‘,‘pig‘];
ReactDOM.render(
<div>
{
animals.map(function(animal,key) {
return <h1 key = {key}>{animal}</h1>
})
}
</div>,
document.getElementById(‘example‘)
);
browser.min.js:3 XMLHttpRequest cannot load file:///Users/**/***/React/MyReactDemo/helloworld/src/helloworld.js.
Cross origin requests are only supported for protocol schemes:
http, data, chrome, chrome-extension, https, chrome-extension-resource.
startup chrome with --disable-web-security On Windows: chrome.exe --disable-web-security On Mac: open /Applications/Google\ Chrome.app/ --args --disable-web-security
http://localhost:63342/MyReactDemo/helloworld/src/helloworld.html
file:///Users/zhanggui/zhanggui/React/MyReactDemo/helloworld/src/helloworld.html
3、组件化
React.createClass方法就是用于生成一个组件类，比如：
var ZGButton = React.createClass({
render:function() {
return <button>ZG{this.props.name}</button>
}
});
ReactDOM.render(
<ZGButton name = ‘Button1‘/>,
document.getElementById(‘example‘)
);
var zGButton = React.createClass({
render:function() {
return <button>ZG{this.props.name}</button>
}
});
ReactDOM.render(
<zGButton name="Button2">Button</zGButton>,
document.getElementById(‘example‘)
);
var Students = React.createClass({
render:function() {
return (
<ol>
{
React.Children.map(this.props.children,function(child) {
return <li>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<Students>
<span>zhangsan</span>
<span>lisi</span>
</Students>,
document.getElementById(‘example‘)
);
var Student = React.createClass({
propTypes: {
myName:React.PropTypes.string.isRequired,
},
render:function() {
return <h1>
{this.props.myName}
</h1>
}
});
var myNameStr = "React";
ReactDOM.render(
<Student myName = {myNameStr} />,
document.getElementById(‘example‘)
);
var Student = React.createClass({
getDefaultProps: function() {
return {
myName:"Default React"
}
},
propTypes: {
myName:React.PropTypes.string.isRequired,
},
render:function() {
return <h1>
{this.props.myName}
</h1>
}
});
var MyComponment = React.createClass({
render:function(){
return (
<div>
<input type = "text" ref = "myTextInput"/>
<input type = "button" value = "Focus the text input" onClick={this.handleClick}/>
</div>
);
},
handleClick:function() {
// alert(this.refs.myTextInput);
this.refs.myTextInput.focus();
}
});
ReactDOM.render(
<MyComponment/>,
document.getElementById(‘example‘)
);
var LinkButton = React.createClass({
getInitialState:function () {
return {linked:false};
},
handleClick:function() {
this.setState({linked:!this.state.linked});
},
render:function() {
var text = this.state.linked? ‘linked‘:‘not linked‘;
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle
</p>
);
}
});
ReactDOM.render(
<LinkButton/>,
document.getElementById(‘example‘)
);
var Form = React.createClass({
getInitialState:function() {
return {value:‘Hello‘};
},
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(
<Form/>,
document.getElementById(‘example‘)
);
var MyButton = React.createClass({
componentDidMount:function() {
alert("已经装载");
},
componentWillMount:function() {
alert("将要装载");
},
componentWillUpdate:function() {
alert("将要更新");
},
componentDidUpdate:function() {
alert("已经更新");
},
componentWillUnmount:function() {
alert("将要移除");
},
render:function(){
return (
<button>MyButton</button>
);
},
});
var LoadButton = React.createClass({
loadMyButton:function() {
ReactDOM.render(
<MyButton/>,
document.getElementById(‘myBTN‘)
);
},
removeMyButton:function() {
var result = ReactDOM.unmountComponentAtNode(document.getElementById(‘myBTN‘));
console.log(result);
},
render:function() {
return (
<div>
<button onClick={this.removeMyButton}>卸载MyButton</button>
<button onClick={this.loadMyButton}>装载MyButton</button>
<div id="myBTN">这里是mybuttonquyu</div>
</div>
);
}
});
ReactDOM.render(
<LoadButton/>,
document.getElementById(‘example‘)
);
var UserGist = React.createClass({
getInitialState:function() {
return {
username:‘‘,
lastGistUrl:‘‘
}
},
componentDidMount:function(){
$.get(this.props.source,function(result){
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username:lastGist.owner.login,
lastGistUrl:lastGist.html_url
}
);
}
}.bind(this));
},
render:function() {
return (
<div>
{this.state.username}‘s last gist is
<a href={this.state.lastGistUrl}>here</a>
</div>
);
}
});
ReactDOM.render(
<UserGist source = "https://api.github.com/users/octocat/gists"/>,
document.getElementById(‘example‘)
);
标签：链接 声明 localhost 简单 map 使用 界面 http element
原文地址：https://www.cnblogs.com/zz191308/p/12515348.html
