1, React library description
The react library consists of two parts: 1. React contains all basic functions; 2. ReactDOM only contains the function of operating DOM.
1. Load React Library
# 1. Load with < script >
Development version:<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
Release:<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
# 2. require in ES5 and npm environments
var React = require('react')
# 3. import in ES6 and npm environments
import React from 'react'2. Load ReactDOM Library
# 1. Load with < script >
Development version: <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
Release:<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
# 2. require in ES5 and npm environments
var ReactDOM = require('react-dom')
# 3. import in ES6 and npm environments
import ReactDOM from 'react-dom'2, Use React in HTML
Only browser native support features are used to load and use React, which is suitable for project demonstration and learning.
1. Configuring the React environment with HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- Step 1: set the parent container -->
<div id="like_button_container"></div>
<!-- Step 2: load the development version React -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- When deploying, please replace the above link with the following link -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- Step 3: write React Component code -->
<script src="like_button.js"></script>
</body>
</html>2. Writing React components
// like_button.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);3. View effect
Put the above html file and js file in the same folder. You can open the html file with a browser to view the effect.
3, Use React and JSX in HTML
JSX is the extension syntax of js. It writes UI elements in a tag style, which cannot be directly supported by the browser. It needs a preprocessor to convert JSX into html tags supported by the browser. This preprocessor is babel. React does not force the use of JSX, but writing UI with JSX does bring a lot of convenience.
Method 1: script loading babel
Store the following code as an html file and open it to see the effect. This method is suitable for project demonstration and learning, not for publishing projects.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<!-- Step 1: load the development version React -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- When deploying publishing, replace the above link with the following link -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- Step 2: load the development version babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Step 3: write UI using JSX
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>Method 2: install babel into the project
- New project folder: test;
- Create and copy the following code to the test/index.html file;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- Step 1: set the parent container -->
<div id="like_button_container"></div>
<!-- Step 2: load the development version React -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- When deploying publishing, replace the above link with the following link -->
<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->
<!-- Step 3: load React assembly -->
<script src="like_button.js"></script>
</body>
</html>- Under the test folder, create a new src folder;
- Under the src file, create and copy the following JS code to like_button.js
'use strict';
// Step 3: write components
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<button onClick={() => this.setState({ liked: true })}>
Like-babel
</button>
);
}
}
let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);- Install Node.js
- Open terminal, go to the project root directory test, and execute the following command to install babel
npm init -y npm install babel-cli@6 babel-preset-react-app@3
- Running jsx preprocessor babel
npx babel --watch src --out-dir . --presets react-app/prod
- Open index.html with a browser to see the running effect. Src / like can be modified_ Button.js content, babel will automatically convert src/like_button.js, generate a like supported by the browser in the project root directory test_ Button.js, the browser refreshes index.html to see the modified effect.
5, Create React project
1,Create React App
It can quickly create single page applications and automatically configure the React development environment to provide a good development experience. However, it must be installed Node > = 14.0.0 and NPM > = 5.6 . Recommended as a learning practice project or a single page project.
Single page application refers to loading a single page and downloading all necessary resources (JavaScript, CSS, etc.). For any interaction of subsequent pages, it is no longer necessary to request resources from the server, that is, the page will not be reloaded.
# After installing Node, create a single page application of React in terminal npx create-react-app my-app # Run this single page project cd my-app npm start # Compile the project and publish it as a production version npm run build
2,Next.js
Next.js It is a lightweight framework combining Node.js and React, which is suitable for the scenario: static front-end page + Nodejs server, combined application.
3,Gatsby
The best way to create a static website with React is suitable for content-based websites and provides the fastest access speed. When deploying and publishing a project, you only need to upload the compiled public folder to the Nginx server to complete the deployment and publishing.