第5章使用html写react · react

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello 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.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> class App extends React.Component { //动态显示时数据构造器 constructor(props) { super(props); this.state = { title: "hell", imgUrl:"" } } // 固定格式返回一个html render() { return ( <div> <p>{this.state.title}</p> <img src={this.state.imgUrl}/> </div> ) } componentDidMount() { console.log(1); var url = "https://douban.uieee.com/v2/movie/top250"; $.get(url,(data)=>{ //获取的data是一个JS对象 var title=data.subjects[0].title; var imgUrl=data.subjects[0].images.small; console.log(title); this.setState({ title, imgUrl }) },"jsonp"); }; }; //向HTML返回的内容 ReactDOM.render( <App />, document.getElementById('example') ); </script> </body> </html> ~~~