First acquaintance with React, basic understanding and use

<!-- 引入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>

3. Coding

(1) Create a virtual DOM

(2) Render the virtual DOM to the page

    <script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
	//2.渲染虚拟DOM到页面 React没有提供选择器，所以只能用原生的方法
	ReactDOM.render(VDOM,document.getElementById('root'))

3. Two ways to create virtual DOM

1. Use js to create virtual DOM ( createElement )

<!-- 准备好一个“容器” -->
	<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>

	<script type="text/javascript" > 
		//1.创建虚拟DOM
		const VDOM = React.createElement('h1',{id:'title'},
        React.createElement('span',{},'Hello,React'))
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>

2. Use jsx to create virtual DOM

<!-- 准备好一个“容器” -->
	<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" >
		//1.创建虚拟DOM
		const VDOM = (  
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

Summary: Creating virtual DOM with jsx is grammatical sugar for js to create virtual DOM. Using native js will be very troublesome when nesting tags, but using jsx will be very easy, similar to our html, with jsx we can create virtual DOM It is more convenient. By introducing babel, it is used to convert jsx to js, which is actually to convert jsx to the js form in the above picture.

3. About virtual DOM:

1. The essence is an object of Object type (general object)

2. The virtual DOM is relatively "light", while the real DOM is relatively "heavy", because the virtual DOM is used internally by React.

There is no need for so many attributes on the real DOM.

3. The virtual DOM will eventually be transformed into a real DOM by React and presented on the page.

Fourth, the grammar rules of jsx

1. What is jsx

(1) Full name: JavaScript XML

(2) A JS extension syntax similar to XML defined by react : JS + XML

(3) Function: used to simplify the creation of virtual DOM

2. jsx syntax rules:

1. When defining virtual DOM, do not write quotation marks.

2. Use {} when mixing JS expressions in tags.

3. The class name of the style should not use class , but className .

4. Inline styles should be written in the form of style={ {key:value}} .

5. Only one root tag

6. Tabs must be closed

7. Label initials

(1). If it starts with a lowercase letter, the tag will be converted to an element with the same name in html, if in html

If there is no element with the same name corresponding to the tag, an error will be reported.

(2). If the capital letter starts, react will render the corresponding component, if the component does not

definition, an error is reported.

5. Understanding of modules and components, modularization and componentization

1. Module

(1) Understanding: A js program that provides specific functions to the outside is generally a js file

(2) Why split it into modules: With the increase of business logic, the code becomes more and more complex.

(3) Function: Reuse code, simplify project code , improve operation efficiency

2. Modularization

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

3. Components

(1) Understanding: a collection of codes and resources (html/css/js/image , etc. ) used to achieve local functional effects

(2) Why use components: the function of an interface is more complex

(3) Function: Reuse code , simplify project code , improve operation efficiency

4. Componentization

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