美文网首页
30秒体验React和JSX

30秒体验React和JSX

作者: JohnYuCN | 来源:发表于2020-03-08 13:34 被阅读0次

    初心,官网一分钟太繁琐

    一个index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Add React in One Minute</title>
      </head>
      <body>
    
        <h2>Add React in One Minute</h2>
        <!-- We will put our React component inside this div. -->
        <div id="app"></div>
    
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <!-- Load our React component. -->
        <script type="text/babel">
          class App extends React.Component {
            constructor(props) {
              super(props);
              this.state = { name: 'world' };
            }
    
            render() {
               return (
                  <div>
                    <h2>{this.state.name}</h2>
                    <button onClick={()=>this.setState({name:'john'})}>
                      change name
                    </button>
                  </div>
                )
            }
          }
          ReactDOM.render(<App/>, document.querySelector('#app'));
        </script>
      </body>
    </html>
    

    相关文章

      网友评论

          本文标题:30秒体验React和JSX

          本文链接:https://www.haomeiwen.com/subject/nsuddhtx.html