第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> ~~~