```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="never">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
<style>
*{margin:0;padding:0}
.app{
display: flex;
max-width: 740px;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content:space-evenly;
}
.app img{
width:150px;
height:220px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {
msg:"hello world",
movies:[]
}
}
render(){
return (
<div className="app">
{this.state.movies.map((item,index)=>{
return (
<div className="item" key={item.id}>
<img src={item.images.small}/>
<p >{item.title.slice(0,6)+"..."}</p>
</div>
)
})}
</div>
)
}
handleClick=()=>{
this.setState({
msg:"change",
movies:[]
})
}
componentDidMount(){
$.ajax({
url:"https://douban.uieee.com/v2/movie/in_theaters",
dataType:"jsonp",
type:"get",
success:res=>{
this.setState({
movies:res.subjects
})
}
})
}
}
ReactDOM.render(
<Hello/>,
document.getElementById("app")
)
</script>
</body>
</html>
```
