学习前端框架React -begining

要求: 熟悉主流的开发框架(React,Augular,Vue至少一个)。
  
React可以直接下载使用,https://reactjs.org/


也可以直接使用 BootCDN的React CDN库,地址如下:
<script src = "https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>


React 实例:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>


实例解析:
我们引入了三个库: react.min.js, react-dom.min.js和babel.min.js;


react.min.js -React的核心库。
react-dom.min.js -提供与DOM相关的功能。
babel.min.js -Babel可以将ES6代码转为 ES5代码,这样我们就能在目前不支持ES6浏览器上执行 React代码。Babel内嵌了对JSX的支持。通过将Babel和 babel-sublime包一同使用可以让源码
的语法渲染上升到一个全新的水平。


ReactDom.render(
  <h1> Hello,world! </h1>,
  document.getElementById('example')
);
以上代码将换一个h1标题,插入id = "example"节点中。
  注意:
  如果我们需要使用JSX,则<script>标签的type属性需要设置为text/babel.
  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值