React基础教程 - HTML中使用React - findtp插件网

findtp插件网

您现在的位置是:首页> 前端教程 -> React基础教程 - HTML中使用React

Article

React基础教程 - HTML中使用React

findtp插件网2021-04-17 前端教程222

在html用使用react

<!DOCTYPE html>
<html>
<head>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>

  </head>
  <body>
    <div id="mydiv"></div>
   <script type="text/babel">
   ReactDOM.render(
      <p>Hello, world! findtp.com</p>,
      document.getElementById('mydiv')
    );
</script>
  </body>
  
</html>

这是一个最简单的HTML的模板,首先我们看一下我们在这个代码中引入了3个库:

react.js

react-dom.js

browser.min.js

其中react.js是React的核心库,react-dom.js提供了个DOM相关的功能,browser.min.js的作用是将JSX的语法转换为JavaScript的语法。

因为React框架有独属于自己的JSX语法,这个语法通常是和JavaScript不兼容的,所以凡是JSX语法的地方都要加上script type="text/babel"标签。


ReactDOM.render()

ReactDOM.render()方法是React框架中最最最基础的方法,这个方法的作用是将模板转化为HTML的语法,然后插入到指定的DOM节点中。

<script type="text/babel">

   ReactDOM.render(

      <p>Hello, world! findtp.com</p>,

      document.getElementById('mydiv')

    );

</script>

代码将一个<p>插入到mydiv的div中,其中document.getElementById('mydiv')指定被插入的节点。这里只能用原生js获取DOM方法,不支持jQuery,和jQuery也没有一点关系。


文章评论

共有0条评论来说两句吧...