包含的包一共有4个,分别的作用如下:
- babel.min.js:可以进行ES6到ES5的语法转换;可以用于import;可以用于将jsx转换为js。注意,在开发的时候,这个转换(jsx转换js)不在线上使用,因为转换需要时间,页面可能会出现白屏。
- react.development.js:react的核心代码库,引入以后,全局多了一个React对象
- react-dom.development.js:react操作dom的扩展库,引入以后,全局多了一个ReactDOM对象
- 注意:react-dom.development.js必须要在react.development.js之后引入。
- 还有一个是prop-types.js:这个包在7. 组件实例三大属性-props中才会用到,是用于对标签属性添加限制的,是react16版本以后才需要单独引入的。引入以后全局多了一个Prop-Types对象。
引入包以后简单的写一些代码,则会出现一下几个问题
- 第一个是因为没有下载react的开发者工具
- 第二个是确保不要在线上使用babel,因为jsx->js耗时,可能会产生白屏之类的。使用脚手架之后,这个问题就没了。
- 最后一个是页面的偏爱图标,页面刷新以后,最后一个错误会消失,因为他找不到偏爱图标就不找了。这里可以将任意一个图标放在根目录下,即可作为偏爱图标,但是要求名字必须为"favicon.ico"。放在根目录以后,页面强制刷新(shift+F5)一下即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 这是进行移动端适配的 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello react</title>
</head>
<body>
<!-- 准备一个“容器” -->
<div id="test"></div>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel,但是线上的时候,不这样用,因为这个转换需要时间,页面会产生白屏 -->
<script src="../js/babel.min.js"></script>
<!-- 注意,这里面写的是jsx的语法,所以这里type需要是babel。上面不写,默认就是text/javascript -->
<script type="text/babel">
/**
* 步骤:
* 1、创建虚拟dom
* 2、渲染虚拟dom到页面
*/
// 1、创建虚拟dom,注意这里不需要引号,因为这里的代码是jsx
let VDOM = <h1>hello,react!</h1>
// 2、渲染虚拟dom,使用render方法,此方法有两个参数,一个是虚拟dom,第二个是容器,并且此方法是一个追加的过程
ReactDOM.render(VDOM, document.getElementById("test"))
/**
* 注意,只有这里需要document,因为react不需要自己操作dom,这里只是一个demo
*/
</script>
</body>
</html>