React 源码讲解第 1 节-准备工作

迈不过友情╰ 2022-12-06 15:16 156阅读 0赞

### React 源码讲解第 1 节-准备工作 ###

1.  先按住 shift ，同时右击选择【在此处打开PowerShell 窗口】。
2.  在打开的窗口中执行 `create-react-app react-demo` 。  
    `create-react-app` 是创建 React 脚手架命令。  
    `react-demo` 是项目名（可自取）。  
    如果执行该命令报错，则需要先安装全局的 `create-react-app` 包。  
    执行命令为 `npm install create-react-app -g`。
3.  等待项目执行。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]
4.  执行完成之后打开 package.json 查看包版本。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 1]
5.  本次源码讲解的是 React v16.13.1 版本。需要注意的是本次源码讲解只涉及到核心内容，源码中大量的判断和一些不是很重要的内容粗略带过或者不作展开。
6.  打开 src/index.js 。我们发现第一个入口API 就是调用的 ReactDOM.render。

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();

1.  React.StrictMode 指的是本项目遵循 React 的严格模式（比如其包裹的子组件启动额外的检查和警告）。
2.  到此准备工作完结，从下一节开始正式进入源码解析。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a92228c3a99648439c399f756cbfa902.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6c734ec22e7743f993d5ff45948960cc.png