React进阶

前端之家收集整理的这篇文章主要介绍了React进阶前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

首先来配置一下React的环境,在网上下载react.js和react-dom.js和browser.min.js,其中react.js是react的核心库,react-dom.js是提供与Dom相关的功能,browser.min.js是负责将JSX转换为javascript。

JSX:javascript XML,看起来就像是在javascript中直接写了XML,直接使用javascript可以吗?是可以的,那为什么要用JSX语法呢?举个例子,对比一下你就会发现了:

//使用JSX
React.render(
    <div>
        <div>
            <div>content</div>
        </div>
    </div>,document.getElementById('example')
);
 
//不使用JSX
React.render(
    React.createElement('div',null,React.createElement('div','content')
        )
    ),document.getElementById('example')
);
1.Hello World(入门必备啊)

<!DOCTYPE html>
<html>
<head>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../build/browser.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相关文章