react学习笔记——1. hello react

包含的包一共有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学习笔记——1. hello react_第1张图片

  • 第一个是因为没有下载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 reacttitle>
head>

<body>
    
    <div id="test">div>

    <script src="../js/react.development.js">script>
    <script src="../js/react-dom.development.js">script>
    
    <script src="../js/babel.min.js">script>
    
    <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>

你可能感兴趣的:(react,react)