react入门基础

现在还没有打算深入学习react,只是为了了解,免得被人问到什么都说不上来,所以初略的做一下笔记

  1. react推荐使用jsx来写js,所以我们会多链接一个库来支持jsx编译,现在想使用jsx是需要引用cdn babel下的browser库
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"
<script type="text/babel">
//这里就可以使用jsx语法了
</script>
  1. jsx语法最特别的地方就是可以将html结构直接写在js中,不用加什么引号什么的,他别方便
  2. 然后要引入react
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js></script>"
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js</script>"
  1. 然后就是官网上一个最简单的例子
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<body>
  <div id="container"></div>
  <script type="text/babel">
    var Hello=React.createClass({
      render:function(){
        return <div>Hello {this.props.name}</div> 
      }
    });
    React.render(
      <Hello name="请加油">,
      document.getElementById("container")
    )
  </script>
</body>

然后就会在页面中渲染出一个react组件,显示为 Hello 请加油

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,848评论 1 18
  • 现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一...
    sakura_L阅读 3,184评论 0 0
  • 现在最热门的前端框架,毫无疑问是React。在基于React的React Native发布一天之内,就获得了 50...
    Mycro阅读 4,657评论 3 6
  • JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS...
    可乐爱上咖啡阅读 72,211评论 1 63
  • 第一枚 冬至 [A.D.2014=幻想乡.太阳花田=] 冬至,这是一年中日照时间最短的一天。 幻想乡入冬的第一...
    逆雨阅读 3,790评论 0 1

友情链接更多精彩内容