美文网首页
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