Suggested preliminary knowledge: HTML+CSS+JS basics, webpack, ajax, Promise, axios knowledge

React system study notes

Part Ⅰ: Getting Started with React

1 Introduction to React

JavaScript for dynamically building user interfaces (just focus on views)
Open sourced by Facebook

1.1 Features of React

declarative programming
Component programming
React Native to write native applications

React Native (referred to as RN) is a cross-platform mobile application development framework open sourced by Facebook in April 2015. It is a derivative of Facebook's earlier open source JS framework React on the native mobile application platform.

Efficient (excellent Diffing algorithm)

1.2 The reason why React is efficient

Use virtual (virtual) DOM, not always directly manipulate the real DON of the page
DOM Diffing algorithm to minimize page redrawing

Note: React does not increase rendering speed, but may increase rendering time. The reason it is really efficient is that it can effectively减少渲染次数

2 basic use of react

2.1 Effect

insert image description here

2.2 Related Libraries

react.js: React core library
react-dom.js: provides a react extension library for manipulating DOM
babel.min.js: A library that parses JSX syntax code into JS code

代码演示：
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel"> /* 第一个注意点：此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
		//2.渲染虚拟DOM到页面，参数1是虚拟DOM，参数2是容器
		ReactDOM.render(VDOM, document.getElementById('test'))
	</script>
</body>

</html>

A few notes:

Remember to prepare the container
The core library must be imported before the extension library
type="text/babel"Remember to write babelthe browser to know you wrotejsx
Be careful not to write single quotes when creating virtual dom
When multiple created virtual nodes are placed in a container at the same time, overwriting will occur, that is to say, the last one is the main one.

3 Two ways to create virtual DOM

3.1 js creates virtual DOM ( `不推荐`)

用js不需要引入babel文件了，其他的两个照常
//1.创建虚拟DOM，创建嵌套格式的doms--繁琐
const VDOM=React.createElement('h1',{
    
    id:'title'},React.createElement('span',{
    
    },'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,docoment.getElementById('test'))

3.2 jsx creates virtual DOM

//1.创建虚拟DOM
const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
   	<h1 id="title">
		<span>Hello,React</span>
	</h1>
)
//2.渲染虚拟DOM到页面，参数1是虚拟DOM，参数2是容器
ReactDOM.render(VDOM,document.getElementById('test'))

When multiple nesting occurs, the js creation method is quite cumbersome to write:

const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))

The significance of JSX: it is more convenient to create virtual DOm

JSX creates virtual DOM is the grammatical sugar of JS. When we finish writing JSX code, our code will eventually be compiled into JS writing method

3.3 About virtual DOM

Essentially an object of type Object (general object)
The virtual DOM is relatively 'light', while the real DOM is relatively 'heavy', because the virtual DOM is used internally by React, and there is no need for so many attributes on the real DOM (only the attributes required by React)
Virtual DOM will eventually be transformed into real DOM by React and presented on the page

4 jsx syntax rules

JSX is a syntax extension of JavaScript, an embedded XML-like syntax, often used in the React architecture, but not limited to it. It should be said that
JSX is popular because of the React framework, but there are other implementations. As long as you are good enough, you can even implement it on a single-chip microcomputer (of course you have to write its own implementation method)

4.1 Rules

When defining virtual DOM, do not write quotes
Use {} when mixing JS expressions in tags, pay attention to expressions (that is, values)
The class name of the style specifies not to use class, but to use className
The inline style should be written in the form of style={{key:'value'}}. The first {} means that you want to write a JS expression, and the first {} means that you are writing an object. A word similar to fontSize in small camel case
There is only one heel tag (the entire virtual DOM has only one container package in the outer layer)
label must be closed
label initial

If 小写字母开头so, convert the tag to an element with the same name in html, if there is no element with the same name corresponding to the tag in html, an error will be reported

If so 大写字母开头, react will render the corresponding component, if the component is not defined, an error will be reported

<script type="text/babel">
	const myId = 'aTgUiGu'
	const myData = 'HeLlo,rEaCt'

	//1.创建虚拟DOM
	const VDOM = (
		<div>
			<h2 className="title" id={
    
    myId.toLowerCase()}>
				<span style={
    
    {
    
     color: 'white', fontSize: '29px' }}>{
    
    myData.toLowerCase()}</span>
			</h2>
			<h2 className="title" id={
    
    myId.toUpperCase()}>
				<span style={
    
    {
    
     color: 'white', fontSize: '29px' }}>{
    
    myData.toLowerCase()}</span>
			</h2>
			<input type="text" />
		</div>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM, document.getElementById('test'))
</script>

4.2 Distinguish between [js statement (code)] and [js expression]

Expression: An expression produces a value and can be placed anywhere a value is required

a
a+b
demo(1)
arr.map()
function test(){}

Statement: cannot be placed in the create virtual dom statement

if(){}
for(){}
switch(){}

5 Component and module understanding

5.1 Modules and modularization

module

Understanding: A js program that provides specific functions to the outside is generally a js file
Why split into modules: With the increase of business logic, the code becomes more and more complex
Role: reuse js, simplify the writing of js, improve the efficiency of js operation

Modular

When the js of the application is written in modules, the application is a modular application

5.2 Components and componentization

components

Understanding: A collection of codes and resources (html/css/js/img, etc.) used to achieve local functional effects
Why use components: the function of an interface is complex
Function: Reuse coding, simplify project coding, and improve operating efficiency

Componentization

When an application is implemented in a multi-component manner, the application is a componentized application