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 请加油

推荐阅读更多精彩内容

  • 现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一...
    sakura_L阅读 186评论 0 0
  • 现在最热门的前端框架,毫无疑问是React。在基于React的React Native发布一天之内,就获得了 50...
    Mycro阅读 693评论 3 6
  • JSX 知识准备 JSX 并不是一门全新的语言,仅仅是一个语法糖,允许开发者在javascript中编写XML语言...
    艾伦先生阅读 3,832评论 4 20
  • JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS...
    可乐爱上咖啡阅读 66,747评论 1 62
  • 小黄人一枚,从书上看到的,没有解析步骤,一点一点画的,纯彩铅绘制,只想赶紧把这几百张的A4纸画完,打印纸画出来的没...
    拾乐者阅读 175评论 0 2