主题教育网站建立,青海网站建设公司多少钱,做网站预算,o2o网站建设最好公司包含的包一共有4个#xff0c;分别的作用如下#xff1a;
babel.min.js#xff1a;可以进行ES6到ES5的语法转换#xff1b;可以用于import#xff1b;可以用于将jsx转换为js。注意#xff0c;在开发的时候#xff0c;这个转换#xff08;jsx转换js#xff09;不在线上…包含的包一共有4个分别的作用如下
babel.min.js可以进行ES6到ES5的语法转换可以用于import可以用于将jsx转换为js。注意在开发的时候这个转换jsx转换js不在线上使用因为转换需要时间页面可能会出现白屏。react.development.jsreact的核心代码库引入以后全局多了一个React对象react-dom.development.jsreact操作dom的扩展库引入以后全局多了一个ReactDOM对象 注意react-dom.development.js必须要在react.development.js之后引入。 还有一个是prop-types.js这个包在7. 组件实例三大属性-props中才会用到是用于对标签属性添加限制的是react16版本以后才需要单独引入的。引入以后全局多了一个Prop-Types对象。
引入包以后简单的写一些代码则会出现一下几个问题
第一个是因为没有下载react的开发者工具第二个是确保不要在线上使用babel因为jsx-js耗时可能会产生白屏之类的。使用脚手架之后这个问题就没了。最后一个是页面的偏爱图标页面刷新以后最后一个错误会消失因为他找不到偏爱图标就不找了。这里可以将任意一个图标放在根目录下即可作为偏爱图标但是要求名字必须为favicon.ico。放在根目录以后页面强制刷新shiftF5一下即可。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!-- 这是进行移动端适配的 --meta nameviewport contentwidthdevice-width, initial-scale1.0titlehello react/title
/headbody!-- 准备一个“容器” --div idtest/divscript src../js/react.development.js/scriptscript src../js/react-dom.development.js/script!-- 引入babel但是线上的时候不这样用因为这个转换需要时间页面会产生白屏 --script src../js/babel.min.js/script!-- 注意这里面写的是jsx的语法所以这里type需要是babel。上面不写默认就是text/javascript --script typetext/babel/*** 步骤* 1、创建虚拟dom* 2、渲染虚拟dom到页面*/// 1、创建虚拟dom注意这里不需要引号因为这里的代码是jsxlet VDOM h1hello,react!/h1// 2、渲染虚拟dom使用render方法此方法有两个参数一个是虚拟dom第二个是容器并且此方法是一个追加的过程ReactDOM.render(VDOM, document.getElementById(test))/*** 注意只有这里需要document因为react不需要自己操作dom这里只是一个demo*//script
/body/html
