React source code explanation section 1-preparations

React source code explanation section 1-preparations

  1. Hold down shift and right-click to select [Open PowerShell window here].

  2. Execute in the opened window create-react-app react-demo.
    create-react-appIt is a command to create React scaffolding.
    react-demoIs the project name (you can pick it up).
    If you execute the command error, you need to install the overall create-react-apppackage.
    The execution command is npm install create-react-app -g.

  3. Wait for the project to execute.
    Insert picture description here

  4. After the execution is complete, open package.json to view the package version.
    Insert picture description here

  5. The source code explained this time is React v16.13.1 version. It should be noted that this source code explanation only involves the core content, and a large number of judgments and some unimportant content in the source code are roughly covered or not expanded.

  6. Open src/index.js. We found that the first entry API is called 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 means that this project follows React's strict mode (for example, its packaged subcomponents initiate additional checks and warnings).
  2. At this point, the preparatory work is over, and the source code analysis will be officially entered from the next section.

Guess you like

Origin blog.csdn.net/weixin_44135121/article/details/108571723
Recommended