React – Introduction, virtual DOM, JSX syntax rules
Introduction to the
React – a JavaScript library for building user interfaces.
The characteristics of
- Componentized mode and declarative coding are adopted to improve development efficiency and component reuse rate
- React Native allows you to use the React syntax for mobile development
- Use virtual DOM + excellent Diffing algorithm to minimize interaction with real DOM
The React case
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_react</title>
</head>
<body>
<! -- Prepare a "container" -->
<div id="test"></div>
<! React core library -->
<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>
<! -- Introduce Babel to convert JSX to JS -->
<script type="text/javascript" src=".. /js/babel.min.js"></script>
<script type="text/babel" > /* Be sure to write Babel */
Create a virtual DOM
const VDOM = <h1>Hello,React</h1> /* Do not write quotes here, because it is not a string */
//2. Render the virtual DOM to the page
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
Copy the code- React.development. js was introduced with a global object react
<script type="text/javascript" src=".. /js/react.development.js"></script>
Copy the code- React-dom.development. js was introduced with a global object called ReactDOM
<script type="text/javascript" src=".. /js/react-dom.development.js"></script>
Copy the code- Note that when using JSX syntax, the script tag selects Babel and compiles JSX
<script type="text/babel" > /* Be sure to write Babel */
</script>
Copy the codeVirtual DOM
Two ways to create a virtual DOM
1. Create a virtual DOM using JS
<script type="text/javascript" >
Create a virtual DOM
const VDOM = React.createElement('h1', {id:'title'},React.createElement('span', {},'Hello,React'))
//2. Render the virtual DOM to the page
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
Copy the code2. Create a virtual DOM using JSX
<script type="text/babel" > /* Be sure to write Babel */
Create a virtual DOM
const VDOM = ( /* Do not write quotes here, because it is not a string */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2. Render the virtual DOM to the page
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
Copy the codeVirtual DOM and real DOM
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_ Virtual DOM and real DOM</title>
</head>
<body>
<! -- Prepare a "container" -->
<div id="test"></div>
<div id="demo"></div>
<! React core library -->
<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>
<! -- Introduce Babel to convert JSX to JS -->
<script type="text/javascript" src=".. /js/babel.min.js"></script>
<script type="text/babel" > /* Be sure to write Babel */
Create a virtual DOM
const VDOM = ( /* Do not write quotes here, because it is not a string */
<h1 id="title">
<span>Hello,React</span>
</h1>
)
//2. Render the virtual DOM to the page
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
console.log('virtual DOM',VDOM);
console.log('real DOM',TDOM);
console.log(typeof VDOM);
console.log(VDOM instanceof Object);
debugger;
/* About the virtual DOM: 1. Essentially objects of type Object (general objects) 2. The virtual DOM is "light" while the real DOM is "heavy" because the virtual DOM is used internally by React and does not require as many properties as the real DOM. 3. The Virtual DOM will eventually be converted into the real DOM by React and displayed on the page. * /
</script>
</body>
</html>
Copy the code
About the Virtual DOM
2. Only one element is allowed in the outermost layer of the virtual DOM (see VUE) 3. You can use () to enclose the virtual DOM as a whole. 4. The virtual DOM is essentially an Object. The virtual DOM is "light" while the real DOM is "heavy" because the virtual DOM is used internally by React and does not require as many properties as the real DOM. 6. The Virtual DOM will eventually be converted into the real DOM by React and displayed on the page.Copy the code
JSX syntax rules
<script type="text/babel" ></script>
Copy the code
JSX syntax rules
1. Do not use quotation marks when defining the virtual DOM. 2. Use {} when mixing JS expressions with tags. 3. The class name of the style specifies not class, but className. Style ={{key:value}} 5. Only one root label 6. The label must be closed 7. If the tag starts with a lowercase letter, the tag is converted to an element with the same name in HTML. If the tag does not have the same name in HTML, an error is reported. (2). React renders the component if it starts with a capital letter.Copy the code
JSX small practice
<script type="text/babel" >
// Simulate some data
const data = ['Angular'.'React'.'Vue']
Create a virtual DOM
const VDOM = (
<div>
<h1>List of front-end JS frameworks</h1>
<ul>
{
data.map((item,index)=>{
return <li key={index}>{item}</li>}), /* for(let i = 0; i<=data.length; I++){} if(){} for loop and if statement will return an error */}</ul>
</div>
)
//2. Render the virtual DOM to the page
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
Copy the code- {} can only write JS expressions, not js statements
- Be sure to distinguish between [JS statements] and [JS expressions].
-
A +b (3).demo (1) (4).arr.map () (5).function test () {} 2. Statement (code) : these are all of the following statements (code) : (1). The if () {} (2). For () {} (3). The switch () {} case: XXXXCopy the code