分析执行流程就是:导库 -> 页面节点 -> 组件 -> 组件挂载页面
这里面核心就是 页面节点index.html 、 组件挂载页面 index.js 、 组件render App.js
index.css 是对页面的渲染(通用型样式) 、App.css 是对组件的渲染
首先就是执行入口文件 index.js -- 核心功能就是将组件挂载到页面index.html中的页面节上
此文件引入React、react-dom核心库,(还有周边index.css)同时引入App.js
进入App.js 组件执行render,在App.js 中使用ES6模块语法将此组件 默认暴露 使得index.js 可以找到,(还有周边App.css),最后挂载到页面上。
如今都是SPA(single page application)单一页面应用 只有一个主页面,且只有一个节点!!!!
不然你组件没法放页面啊 并且由于ReactDOM.render()是覆盖渲染不是追加 所以App的div只有一个
其余的组件分别在唯一div指定位置渲染即可
页面的节点:可看做DOM树的一个个元素;又可以看做一个个容器,组件在指定容器内渲染
但只能有一个根节点!!!
其余文件只是某些场景使用。