一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    在h5中引入react调试

    技术 148 2020-12-04 11:01

    直接上代码:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
      </head>
      <body>
        <div id="root"></div>
      </body>
    
      <script type="text/babel">
        class App extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              testVal: "123",
            };
          }
    
          render() {
            console.log(this);
            return <h1> {this.state.testVal} !</h1>;
          }
        }
        ReactDOM.render(<App />, document.getElementById("root"));
      </script>
    </html>
    

    注意:script标签里面写react代码了,但是这里有个重点,那就是script标签的类型type,正常的script标签类型是type="text/javascript",而一般写模板语法时,写的类型是type="text/html",但是react的script标签的类型是type="text/babel"**记住一定要写成这个类型,否则会报错,解读不了react代码


    文章评论

    评论列表(0