react 引用js方式安装并开发入门"hello world"

react | 2019-09-13 10:02:39

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>


登录后即可回复 登录 | 注册
    
关注编程学问公众号