React is a JavaScript library for building user interfaces

This article mainly introduces the use of create react app

Related resources

• React
• create-react-app

Quick start

1. Create project NPX create react app my app

2. Open project CD my app

3. Start project npm start

directory structure

There is no configuration or complex folder structure, just the files needed to build the application

├── README.md           file
├── node_modules        
├── package.json        npm rely on
├── .gitignore
├── public              Static resources
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js          Root component
    ├── App.test.js
    ├── index.css       Global style
    ├── index.js        Entry file
    ├── logo.svg
    └── serviceWorker.js    pwa support

Available Scripts

npm start

Running applications in development mode

npm test

Start the test runner in interactive monitoring mode

npm run build

Build the production application into the build folder. It can correctly package React into production mode and optimize the build for optimal performance.

npm run eject

By default, all configuration items are hidden. If you are not satisfied with the current configuration, you can use this command to expose the configuration items. This operation is irreversible.

After executing the change command, you can see one more config folder

Entry file definition

// webpack.config.js

entry:[
    //webpackDveServer client, which realizes hot update during development
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    //Application entry: src/index
    paths.appIndexJs
].filter(Boolean)

webpack.config.js is the configuration file of webpack. The constant life at the beginning shows that the scaffold can support modularization of ts, sass and css

// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

React and ReactDom

View Src / index JS code

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />, document.querySelector('#root'));

Very strange? Why is there no word React in the file and only the render method of ReactDom is called

If we import React from 'react'; Comment out this line

//import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />, document.querySelector('#root'));

You will see an error prompt

./src/index.js
  Line 8:5:  'React' must be in scope when using JSX  react/react-in-jsx-scope

In fact, when we use JSX, Babel loader compiles JSX into corresponding JS objects, React CreateElement then constructs the JS object into the virtual dom required by React

React is responsible for logic control, data - > vdom

ReactDom renders the actual DOM, vdom - > dom

React enables JSX to describe the UI