单页面直接使用 react.JS 文件很简单, 只需要像引入普通 JS 文件一样, 通过 script 标签引入即可.
- <script src="https://unpkg.com/react@16/umd/react.development.js">
- </script>
- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
- </script>
- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
- </script>
因为 react 使用 jsx 开发更方便, 所以我们也需要引入 babel 来转换 jsx 的代码.
下面介绍如何构建这样一个基于 React 的页面.
1, 首先我创建一个最基本的 html 文件, 然后引入 React 的库文件, 主要是 react 和 react-dom, 此外还要引入 babel 进行语法编译, 不然浏览器是无法识别你的 react.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8" />
- <title>
- Hello World
- </title>
- <script src="https://unpkg.com/react@16/umd/react.development.js">
- </script>
- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
- </script>
- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
- </script>
- </head>
- <body>
- <div id="app">
- </div>
- <script type="text/babel">
- // 我们的 react
- </script>
- </body>
- </HTML>
2, 这样, 我们就可以开始写 JS 内容了, 我们在 id 为 App 的 div 后面添加 script 标签, 按照 react 的语法可以写我们的内容啦, 还要注意 script 标签要加 type="text/babel", 不然无法识别 jsx 语法哦! 如下:
- <script type="text/babel">
- ReactDOM.render(
- <h1>Hello, world!</h1>,
- document.getElementById('root')
- );
- </script>
以上就是 React 的最简单的方式.
来源: http://www.css88.com/qa/react/14580.html