包含的包一共有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,注意这里不需要引号,因为这里的代码是jsxlet VDOM = <h1>hello,react!</h1>// 2、渲染虚拟dom,使用render方法,此方法有两个参数,一个是虚拟dom,第二个是容器,并且此方法是一个追加的过程ReactDOM.render(VDOM, document.getElementById("test"))/*** 注意,只有这里需要document,因为react不需要自己操作dom,这里只是一个demo*/</script>
</body></html>