React source code explanation section 1-preparations
-
Hold down shift and right-click to select [Open PowerShell window here].
-
Execute in the opened window
create-react-app react-demo
.
create-react-app
It is a command to create React scaffolding.
react-demo
Is the project name (you can pick it up).
If you execute the command error, you need to install the overallcreate-react-app
package.
The execution command isnpm install create-react-app -g
. -
Wait for the project to execute.
-
After the execution is complete, open package.json to view the package version.
-
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.
-
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();
- React.StrictMode means that this project follows React's strict mode (for example, its packaged subcomponents initiate additional checks and warnings).
- At this point, the preparatory work is over, and the source code analysis will be officially entered from the next section.