01.react最基本代码

//webpack-dev-server 打包好的main.js是托管到了内存中；所以在项目目录中看不到；
//但是我们可以认为，在项目目录中，有一个看不见的main.js

// 1.这两个导入时候，接收的成员名称，必须这么写
import React from 'react' // 创建组件/虚拟dom元素，生命周期
import ReactDOM from 'react-dom' // 把创建好的 组件 和 虚拟dom放到页面上展示的

// 2.创建 虚拟DOM 元素
// 参数1：创建的元素的类型，字符串，表示元素的名称
// 参数2：是一个对象或 null ,表示当前这个 DOM元素的属性
// 参数3：子节点（包括其他虚拟DOM 获取文本子节点）
// 参数n: 其他子节点
// const myh1 = React.createElement('h1', null, '这是一个大大的h1')
const myh1 = React.createElement('h1', {id:'mytitle',title:'this is a h1'}, '这是一个大大的h1')
const mydiv = React.createElement('div', {id:'mytitle',title:'this is a div'}, '这是一个大大的div',myh1)

// 渲染页面上的 DOM结构，最好的方式，就是写HTML代码


// 3.使用ReactDOM 把 虚拟DOM 渲染到页面上
// 参数1：要渲染的那个 虚拟DOM 元素
// 参数2：指定页面上一个容器
ReactDOM.render(mydiv, document.getElementById('app'))

// const vm = new Vue({
//   data:{},
//   el:'#app',
//   methods:{}
// })