react可以使用npm方式或者引入js方式开发(就像引入juqery那样)。这里就讲引入react库的方式来开发hello world。
官方给出了如何引入react js的方式:https://reactjs.org/docs/cdn-links.html
1.引入react js
开发环境需要引入的js:
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
生产环境需要引入的js:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
当然你可以手动把上面的js下载到本地来再引入,需要其他版本号直接改其中的16就可以了
react.min.js - React 的核心库
react-dom.min.js - 很显然操作dom的,提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
2.开发输出hello word的代码
<div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script>
代码解释
2.1 example "根" DOM 节点
用过jquery 的都知道,最终都是javascript来操作dom。所以我们需要定义一个div,此 div 中的所有内容都将由 React DOM 来管理.当然也可以直接用body。
2.2 type="text/babel"
这个是必须的,浏览器不支持es6要转啊,顺便多扯一句 es6就是ECMAScript 6。是javascript标准,javascript 就是这个标准下的一个实现。当然有很多个实现。
2.3 ReactDOM.render
要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上
2.4 js中写html标签
这就是react的特性,这就是jsx语法,特点:JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的,在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6/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>