A brief introduction to React

1. CDN introduction

Like ordinary JS libraries or frameworks, React can also be imported from CDN.

Before using CDN to import, you need to understand two types of JS files, one is cjs and the other is umd.

cjs: The full name is CommonJS, which is the module specification supported by Node.js

umd: The full name is Universal Module Definition, which is a unified module definition that includes cjs used by Node.js and is compatible with module specifications including browsers and Node.js.

New module convention: The latest module convention is to use import and export keywords.

Therefore, when introducing React, the umd version is generally used first, which can support both Node.js and browsers.

React's CDN introduction requires the introduction of two JS library files, react and react-dom. Here we take BootCDN introduction as an example.

In the following imports, the umd version is also introduced, and the import order must be to introduce react first and then react-dom.

1.1 react (import first)

There are development and production versions here. One is the developer version and the other is the product version. Both are fine. The product version may have more complete functions than the developer version, but it takes up more memory. Here we take the introduction of the production version as an example:

<script src="https://cdn.bootcss.com/react/16.13.1/umd/react.production.min.js"></script>

1.2 react-dom (introduced later)

The introduction method of react and react-dom is similar to the above. The production version should be the umd version. It is best if the version number is the same as that of react.

<script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

1.3 Check whether react is successfully introduced

<script>
  console.log(React);
  console.log(ReactDOM);
</script>

If you can successfully import the two objects React and ReactDOM, the introduction is successful!

2. Webpack introduction

Use import ... from in the Webpack configuration environment. The command is as follows:

//Install react react-dom
yarn add react react-dom

//Introduce react react-dom
import React from "react"
import ReactDOM from "react-dom"

In addition to Webpack, rollup and parcel also support the above-mentioned import method.

3. create-react-app

Webpcak is more flexible for veterans to introduce React, but for novices, the configuration of Webpack is very complicated. In order to introduce React, it is necessary to configure the complex Webpack, which makes it more difficult. Therefore, just like Vue is equipped with Vue cli, React is also equipped with a standard tool for React development, namely the create-react-app tool, which is similar to Vue cli. Both have built-in Webpack, which helps us configure the React development environment and can be used directly.

For beginners, the create-react-app tool is easier to use.

//Globally install create-react-app
yarn global add create-react-app

// Check the version number create-react-app --version

//Create a React file, enter the directory to be created, and execute the create command create-react-app project name

The above is a brief introduction to the details of the introduction of React. For more information about the introduction of React, please pay attention to other related articles on 123WORDPRESS.COM!