React学习(二) React学习之demo分析(项目是怎么运行的？页面是怎么出来的？)

首先，React项目都不会创建的朋友们可以查看一下我React系列笔记一的文章：React学习(一) React开发环境搭建。接下来这篇文章是在一的基础上写的。
现在，我们已经有能力创建一个React项目了，那么React项目的运行原理是什么呢？代码在哪里？我是谁？我在哪儿？
上篇文章提到，React项目中我们主要编码区域就在src/ 路径下，这次我们展开项目目录详细学习一下：
回顾一下项目运行后的结果：

我们所看到的这个页面是怎么出来的呢？首先浏览器所能识别的只有html,css和JavaScript。既然有页面展示出来，必有html文件，记着页面上的这几个元素，我们接下来从代码中一一找出来，看看React是怎么渲染这个页面的。
①index.html

我们看到pubic文件夹下有一个名为index.html的文件。在这个文件的body标签中有一个id为root的div标签。先记着，后面我们再看看有什么用处。
②App.js

再看src文件夹下这个App.js文件，发现是不是找到了浏览器页面上的这几个元素了呢？页面上的logo和下面的两行文字都在这里找到了。但是这些元素是怎么被放到页面上的呢？
别急，往下看！
③index.js

看到这里你能联想到什么了吗？
渲染过程：

第一步：

首先在index.html文件中定义了一个页面，在这个页面上定义了一个容器：

<div id="root"></div>

第二步：

在App.js文件的App()方法中声明了一堆标签：

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

稍微扩展一下，在React中可以使用函数形式声明一个组件，这个App()方法就声明了一个组件，新手可能对这个组件不太理解是什么意思，别急，我们慢慢学习，后续我们会做出解释。

第三步：

在index.js文件中告诉我们第二步声明的标签在哪儿渲染？

为了讲清楚我把页面展示在一屏了，希望各位看官别吐！！！
其实过程就是，在index.html定义了一个id为root的div容器，在App.js文件中定义了一个名为App()的函数（其实应该叫组件），函数中写了一些标签，最后在index.js文件中，通过ReactDOM的render方法把在App()方法中定义的标签渲染在了index.html文件的div容器中，这样浏览器就能展示出来了。

稍微扩展点，看一下index.js(上图)的这行代码其实做了两件事：第一件事是把App.js中声明的App()组件实例化了；第二件事是把实例化后的组件放到了index.html的div容器中。
这里有提到了一个新词“组件实例化”，不懂没关系，先有个印象，后续文章我们再搞清楚 组件 组件实例化 都是什么东西

以上权当推测吧，我们来验证一下：
初始页面和代码：

①我们把index.html文件中的id为root的div上面再放一个div，内容为“做个小测试吧”，如图：

修改完Ctrl+s会发现页面已经刷新了。看内容已经变化了。
由此可见页面中展示的确实是index.html
②我们把App.js文件中的内容修改一下，然后保存：

由此可见页面的div容器中展示的确实是App.js文件中App()方法中声明的标签。
③我们再来修改一下index.js文件中的内容：

由此可见index.html的id为root的div中的内容确实是在这个地方渲染的。
其实ReactDOM.render的这个方法名render就是渲染的意思。

笔者目前也是个初学者，正在慢慢摸索，待有新的收获会继续更新，有兴趣的小伙伴一起探索吧，新手上路，内容若有错误之处期待指正，大佬轻拍。