-
Notifications
You must be signed in to change notification settings - Fork 0
/
01-React.html
135 lines (134 loc) · 73.8 KB
/
01-React.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>课程安排 | My Awesome Project</title>
<meta name="description" content="A VitePress Site">
<link rel="preload stylesheet" href="/assets/style.7b8b1841.css" as="style">
<script type="module" src="/assets/app.60434ab3.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.e514d232.js">
<link rel="modulepreload" href="/assets/chunks/theme.144a8380.js">
<link rel="modulepreload" href="/assets/01-React.md.6d10ace8.lean.js">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-b2cf3e0b><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8616af1></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8616af1> Skip to content </a><!--]--><!----><header class="VPNav" data-v-b2cf3e0b data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-94c81dcc><div class="container" data-v-94c81dcc><div class="title" data-v-94c81dcc><div class="VPNavBarTitle has-sidebar" data-v-94c81dcc data-v-f4ef19a3><a class="title" href="/" data-v-f4ef19a3><!--[--><!--]--><!----><!--[-->My Awesome Project<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-94c81dcc><div class="curtain" data-v-94c81dcc></div><div class="content-body" data-v-94c81dcc><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:'Meta';" data-v-94c81dcc><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-94c81dcc data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->Home<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/markdown-examples.html" tabindex="0" data-v-7f418b0f data-v-37adc828 data-v-8f4dc553><!--[-->Examples<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-94c81dcc data-v-f6a63727><label title="toggle dark mode" data-v-f6a63727 data-v-a9c8afb8><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-a9c8afb8 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-a9c8afb8><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-a9c8afb8><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-94c81dcc data-v-0394ad82 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-94c81dcc data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><label title="toggle dark mode" data-v-40855f84 data-v-a9c8afb8><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-a9c8afb8 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-a9c8afb8><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-a9c8afb8><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/vuejs/vitepress" aria-label="github" target="_blank" rel="noopener" data-v-f6988cfb data-v-c530cc0a><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-94c81dcc data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-b2cf3e0b data-v-392e1bf8><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-392e1bf8><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-392e1bf8><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-392e1bf8>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-392e1bf8 data-v-079b16a8><button data-v-079b16a8>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-b2cf3e0b data-v-af16598e><div class="curtain" data-v-af16598e></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af16598e><span class="visually-hidden" id="sidebar-aria-label" data-v-af16598e> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-af16598e><section class="VPSidebarItem level-0" data-v-af16598e data-v-c4656e6d><div class="item" role="button" tabindex="0" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><h2 class="text" data-v-c4656e6d>Examples</h2><!----></div><div class="items" data-v-c4656e6d><!--[--><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/markdown-examples.html" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Markdown Examples</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-c4656e6d data-v-c4656e6d><div class="item" data-v-c4656e6d><div class="indicator" data-v-c4656e6d></div><a class="VPLink link link" href="/api-examples.html" data-v-c4656e6d data-v-8f4dc553><!--[--><p class="text" data-v-c4656e6d>Runtime API Examples</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-b2cf3e0b data-v-a494bd1d><div class="VPDoc has-sidebar has-aside" data-v-a494bd1d data-v-c4b0d3cf><!--[--><!--]--><div class="container" data-v-c4b0d3cf><div class="aside" data-v-c4b0d3cf><div class="aside-curtain" data-v-c4b0d3cf></div><div class="aside-container" data-v-c4b0d3cf><div class="aside-content" data-v-c4b0d3cf><div class="VPDocAside" data-v-c4b0d3cf data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-9a431c33><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-c4b0d3cf><div class="content-container" data-v-c4b0d3cf><!--[--><!--]--><!----><main class="main" data-v-c4b0d3cf><div style="position:relative;" class="vp-doc _01-React" data-v-c4b0d3cf><div><h1 id="课程安排" tabindex="-1">课程安排 <a class="header-anchor" href="#课程安排" aria-label="Permalink to "课程安排""></a></h1><p><img src="/assets/image-20210816173421106.d2296faf.png" alt="image-20210816173421106"></p><h1 id="react-概述" tabindex="-1">React 概述 <a class="header-anchor" href="#react-概述" aria-label="Permalink to "React 概述""></a></h1><h2 id="学习目标" tabindex="-1">学习目标 <a class="header-anchor" href="#学习目标" aria-label="Permalink to "学习目标""></a></h2><ul><li>能够说出react是什么</li><li>能够说出react的特点</li><li>能够掌握react的基本用法</li><li>能够使用react脚手架</li></ul><h2 id="react-介绍" tabindex="-1">React 介绍 <a class="header-anchor" href="#react-介绍" aria-label="Permalink to "React 介绍""></a></h2><p><img src="/assets/react_logo.ebb52b84.jpeg" alt="React Logo"></p><blockquote><p>react是一个用于构建用户<strong>界面</strong>的 JavaScript 库</p><p>react官网(<a href="https://reactjs.org/" target="_blank" rel="noreferrer">https://reactjs.org/</a>)</p><p>react中文网(<a href="https://zh-hans.reactjs.org/" target="_blank" rel="noreferrer">https://zh-hans.reactjs.org/</a>)</p></blockquote><ul><li><p>React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库</p></li><li><p>如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能</p></li><li><p>react/react-dom/react-router/redux: 框架</p></li><li><p>React 起源于 Facebook 内部项目（News Feed，2011），后又用来架设 Instagram 的网站（2012），并于 2013 年 5 月开源<a href="https://baike.baidu.com/item/react/18077599?fr=aladdin" target="_blank" rel="noreferrer">react介绍</a></p></li><li><p>React 是最流行的前端开发框架之一，其他：Vue、Angular 等等<a href="https://www.npmtrends.com/" target="_blank" rel="noreferrer">框架对比</a></p></li></ul><h2 id="react特点" tabindex="-1">react特点 <a class="header-anchor" href="#react特点" aria-label="Permalink to "react特点""></a></h2><h3 id="声明式ui" tabindex="-1">声明式UI <a class="header-anchor" href="#声明式ui" aria-label="Permalink to "声明式UI""></a></h3><p>你只需要描述UI（HTML）看起来是什么样的，就跟写HTML一样</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> jsx </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">app</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">Hello React! 动态数据变化:</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">count</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>声明式对应的是命令式，声明式关注的是what，命令式关注的是how</p><h3 id="组件化" tabindex="-1">组件化 <a class="header-anchor" href="#组件化" aria-label="Permalink to "组件化""></a></h3><ul><li>组件是react中<strong>最重要</strong>的内容</li><li>组件用于表示页面中的部分内容</li><li>组合、复用多个组件，就可以实现完整的页面功能</li></ul><p><img src="/assets/组件-1629115179921.0d0f367b.png" alt=""></p><h3 id="学习一次-随处使用" tabindex="-1">学习一次，随处使用 <a class="header-anchor" href="#学习一次-随处使用" aria-label="Permalink to "学习一次，随处使用""></a></h3><ul><li>使用react/rect-dom可以开发Web应用</li><li>使用react/react-native可以开发移动端原生应用（react-native） RN 安卓 和 ios应用 flutter</li><li>使用react可以开发VR（虚拟现实）应用（react360）</li></ul><p><img src="/assets/react-use-1629115179922.75b22b74.png" alt=""></p><p>从你的角度看 React 特点：</p><ul><li>工资高、大厂必备（阿里在用）</li><li>工资高、大厂必备（字节跳动在用）</li><li>工资高、大厂必备（百度、腾讯、京东、蚂蚁金服、拼多多、美团、外企、银行等都在用）</li></ul><h2 id="react-脚手架-cli" tabindex="-1">React 脚手架（CLI） <a class="header-anchor" href="#react-脚手架-cli" aria-label="Permalink to "React 脚手架（CLI）""></a></h2><ul><li>React 脚手架的介绍</li><li>使用 React 脚手架创建项目</li><li>项目目录结构调整</li></ul><h3 id="react-脚手架的介绍" tabindex="-1">React 脚手架的介绍 <a class="header-anchor" href="#react-脚手架的介绍" aria-label="Permalink to "React 脚手架的介绍""></a></h3><ul><li>脚手架：为了保证各施工过程顺利进行而搭设的工作平台</li><li>对于前端项目开发来说，脚手架是为了保证前端项目开发过程顺利进行而搭设的开发平台</li><li>脚手架的意义： <ul><li>现代的前端开发日趋成熟，需要依赖于各种工具，比如，webpack、babel、eslint、sass/less/postcss等</li><li>工具配置繁琐、重复，各项目之间的配置大同小异</li><li>开发阶段、项目发布，配置不同 <ul><li>项目开始前，帮你搭好架子，省去繁琐的 webpack 配置</li><li>项目开发时，热更新、格式化代码、git 提交时自动校验代码格式等</li><li>项目发布时，一键自动打包，包括：代码压缩、优化、按需加载等</li></ul></li></ul></li></ul><h3 id="使用-react-脚手架创建项目" tabindex="-1">使用 React 脚手架创建项目 <a class="header-anchor" href="#使用-react-脚手架创建项目" aria-label="Permalink to "使用 React 脚手架创建项目""></a></h3><ul><li>命令：<code>npx create-react-app react-basic</code><ul><li>npx create-react-app 是固定命令，<code>create-react-app</code> 是 React 脚手架的名称</li><li>react-basic 表示项目名称，可以修改</li></ul></li><li>启动项目：<code>yarn start</code> or <code>npm start</code></li><li><code>npx</code> 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用 <ul><li>原始：1 全局安装<code>npm i -g create-react-app</code> 2 在通过脚手架的命令来创建 React 项目</li><li>现在：npx 调用最新的 create-react-app 直接创建 React 项目</li></ul></li></ul><h3 id="项目目录结构说明和调整" tabindex="-1">项目目录结构说明和调整 <a class="header-anchor" href="#项目目录结构说明和调整" aria-label="Permalink to "项目目录结构说明和调整""></a></h3><ul><li>说明： <ul><li><code>src</code> 目录是我们写代码进行项目开发的目录</li><li>查看 <code>package.json</code> 两个核心库：<code>react</code>、<code>react-dom</code>（脚手架已经帮我们安装好，我们直接用即可）</li></ul></li><li>调整： <ol><li>删除 src 目录下的所有文件</li><li>创建 index.js 文件作为项目的入口文件，在这个文件中写 React 代码即可</li></ol></li></ul><h2 id="react-的基本使用" tabindex="-1">React 的基本使用 <a class="header-anchor" href="#react-的基本使用" aria-label="Permalink to "React 的基本使用""></a></h2><h3 id="基本步骤" tabindex="-1">基本步骤 <a class="header-anchor" href="#基本步骤" aria-label="Permalink to "基本步骤""></a></h3><ul><li>使用步骤</li></ul><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">- 导入react和react-dom </span></span>
<span class="line"><span style="color:#A6ACCD;">- 创建react元素(虚拟DOM)</span></span>
<span class="line"><span style="color:#A6ACCD;">- 渲染react元素到页面中</span></span></code></pre></div><ul><li>导入react和react-dom</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 导入react和react-dom</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ReactDOM </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react-dom</span><span style="color:#89DDFF;">'</span></span></code></pre></div><ul><li>创建react元素</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 创建元素</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> React</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">h1</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">hello react</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><ul><li>渲染react元素到页面</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 渲染react元素</span></span>
<span class="line"><span style="color:#A6ACCD;">ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(title</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">))</span></span></code></pre></div><h3 id="练习" tabindex="-1">练习 <a class="header-anchor" href="#练习" aria-label="Permalink to "练习""></a></h3><ol><li>使用react，生成以下结构</li></ol><div class="language-jsx"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">box</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">demo</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">这是一个react案例</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span></code></pre></div><ol start="2"><li>生成结构2</li></ol><div class="language-jsx"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">list</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">香蕉</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">橘子</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">苹果</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="小结" tabindex="-1">小结 <a class="header-anchor" href="#小结" aria-label="Permalink to "小结""></a></h2><ul><li>能够说出react是什么 <ul><li>是用于构建用户界面的javascript库</li></ul></li><li>能够说出react的特点 <ul><li>声明式ui</li><li>组件化</li><li>一处学习，多次使用 react-dom react-native</li></ul></li><li>能够掌握react的基本用法</li><li>能够使用react脚手架 <ul><li><code>yarn global add create-react-app</code></li></ul></li></ul><h1 id="jsx" tabindex="-1">JSX <a class="header-anchor" href="#jsx" aria-label="Permalink to "JSX""></a></h1><h2 id="学习目标-1" tabindex="-1">学习目标 <a class="header-anchor" href="#学习目标-1" aria-label="Permalink to "学习目标""></a></h2><ul><li>能够知道什么是jsx</li><li>能够使用jsx创建react元素</li><li>能够在jsx中使用javascript表达式 <code>{}</code></li><li>能够使用jsx的条件渲染和列表渲染</li><li>能够给jsx添加样式</li></ul><h2 id="jsx的基本使用" tabindex="-1">JSX的基本使用 <a class="header-anchor" href="#jsx的基本使用" aria-label="Permalink to "JSX的基本使用""></a></h2><h3 id="createelement的问题" tabindex="-1">createElement的问题 <a class="header-anchor" href="#createelement的问题" aria-label="Permalink to "createElement的问题""></a></h3><ul><li>繁琐不简洁</li><li>不直观，无法一眼看出所描述的结构</li><li>不优雅，开发体验不好</li></ul><p><img src="/assets/jsx的优点.f6c4b1f2.png" alt=""></p><h3 id="jsx简介" tabindex="-1">JSX简介 <a class="header-anchor" href="#jsx简介" aria-label="Permalink to "JSX简介""></a></h3><p><code>JSX</code>是<code>JavaScript XML</code>的简写，表示了在Javascript代码中写XML(HTML)格式的代码</p><p>优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。</p><p><strong>JSX是react的核心内容</strong></p><p>注意：<em>JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 <a href="https://babeljs.io/docs/babel-plugin-transform-react-jsx" target="_blank" rel="noreferrer">@babel/plugin-transform-react-jsx</a> 包，用来解析该语法。</em></p><p></p><h3 id="使用步骤" tabindex="-1">使用步骤 <a class="header-anchor" href="#使用步骤" aria-label="Permalink to "使用步骤""></a></h3><div class="language-"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">- 导入react和reactDOM包</span></span>
<span class="line"><span style="color:#A6ACCD;">- 使用jsx语法创建react元素</span></span>
<span class="line"><span style="color:#A6ACCD;">- 把react元素渲染到页面中</span></span></code></pre></div><ul><li>导入react和reactDOM</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 导入react和react-dom</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> React </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react</span><span style="color:#89DDFF;">'</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ReactDOM </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">react-dom</span><span style="color:#89DDFF;">'</span></span></code></pre></div><ul><li>创建react元素</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 创建元素</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">哈哈</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span></code></pre></div><ul><li>渲染元素</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 渲染元素</span></span>
<span class="line"><span style="color:#A6ACCD;">ReactDOM</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">render</span><span style="color:#A6ACCD;">(title</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">))</span></span></code></pre></div><h3 id="jsx注意点" tabindex="-1">JSX注意点 <a class="header-anchor" href="#jsx注意点" aria-label="Permalink to "JSX注意点""></a></h3><ul><li><p>只有在脚手架中才能使用jsx语法</p><ul><li>因为JSX需要经过babel的编译处理，才能在浏览器中使用。脚手架中已经默认有了这个配置。</li></ul></li><li><p>JSX必须要有一个根节点， <code><></></code> <code><React.Fragment></React.Fragment></code></p></li><li><p>没有子节点的元素可以使用<code>/></code>结束</p></li><li><p>JSX中语法更接近与JavaScript</p><ul><li><code>class</code> =====> <code>className</code></li><li><code>for</code>========> <code>htmlFor</code></li></ul></li><li><p>JSX可以换行，如果JSX有多行，推荐使用<code>()</code>包裹JSX，防止自动插入分号的bug</p></li></ul><h2 id="使用prettier插件格式化react代码" tabindex="-1">使用prettier插件格式化react代码 <a class="header-anchor" href="#使用prettier插件格式化react代码" aria-label="Permalink to "使用prettier插件格式化react代码""></a></h2><ul><li>安装插件</li></ul><p><img src="/assets/image-20200907165515629-1629115818044.094017b4.png" alt="image-20200907165515629"></p><ul><li>添加prettier的配置</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 保存到额时候用使用prettier进行格式化</span></span>
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.formatOnSave</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 不要有分号</span></span>
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prettier.semi</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 使用单引号</span></span>
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prettier.singleQuote</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 默认使用prittier作为格式化工具</span></span>
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span></code></pre></div><h2 id="jsx中嵌入javascript表达式" tabindex="-1">JSX中嵌入JavaScript表达式 <a class="header-anchor" href="#jsx中嵌入javascript表达式" aria-label="Permalink to "JSX中嵌入JavaScript表达式""></a></h2><blockquote><p>在jsx中可以在<code>{}</code>来使用js表达式</p></blockquote><ul><li>基本使用</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">zs</span><span style="color:#89DDFF;">'</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> age </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> 姓名：</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">, 年龄：</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">age</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><ul><li>可以访问对象的属性</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> car </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">brand</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">玛莎拉蒂</span><span style="color:#89DDFF;">'</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> 汽车：</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">car</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">brand</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><ul><li>可以访问数组的下标</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> friends </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">张三</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">李四</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> 汽车：</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">friends[</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><ul><li>可以使用三元运算符</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> gender </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> 性别：</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">age </span><span style="color:#89DDFF;">>=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">18</span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">是</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">否</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><ul><li>可以调用方法</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">sayHi</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">你好</span><span style="color:#89DDFF;">'</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">姓名：</span><span style="color:#89DDFF;">{</span><span style="color:#82AAFF;">sayHi</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span></code></pre></div><ul><li>JSX本身</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> span </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">我是一个span</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">span</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">盒子</span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">span</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">h1</span><span style="color:#89DDFF;">></span></span></code></pre></div><ul><li>JSX中的注释</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 这是jsx中的注释 */</span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> 推荐快键键 ctrl </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">/</span></span></code></pre></div><ul><li>不要出现语句，比如<code>if</code> <code>for</code></li></ul><h2 id="条件渲染" tabindex="-1">条件渲染 <a class="header-anchor" href="#条件渲染" aria-label="Permalink to "条件渲染""></a></h2><blockquote><p>在react中，一切都是javascript，所以条件渲染完全是通过js来控制的</p></blockquote><ul><li>通过判断<code>if/else</code>控制</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> isLoding </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> loadData </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">isLoding</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">数据加载中.....</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">数据加载完成，此处显示加载后的数据</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">条件渲染：</span><span style="color:#89DDFF;">{</span><span style="color:#82AAFF;">loadData</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span></code></pre></div><ul><li>通过三元运算符控制</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> isLoding </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> loadData </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isLoding</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">数据加载中.....</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#F07178;"> ) </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">数据加载完成，此处显示加载后的数据</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><ul><li>逻辑运算符</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> isLoding </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> loadData </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isLoding</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">加载中...</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> title </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">条件渲染：</span><span style="color:#89DDFF;">{</span><span style="color:#82AAFF;">loadData</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span></code></pre></div><h2 id="vscode配置自动补全" tabindex="-1">vscode配置自动补全 <a class="header-anchor" href="#vscode配置自动补全" aria-label="Permalink to "vscode配置自动补全""></a></h2><div class="language-jsx"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 当按tab键的时候，会自动提示</span></span>
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">emmet.triggerExpansionOnTab</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">emmet.showAbbreviationSuggestions</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// jsx的提示</span></span>
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">emmet.includeLanguages</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">javascript</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">javascriptreact</span><span style="color:#89DDFF;">"</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="列表渲染" tabindex="-1">列表渲染 <a class="header-anchor" href="#列表渲染" aria-label="Permalink to "列表渲染""></a></h2><blockquote><p>我们经常需要遍历一个数组来重复渲染一段结构</p><p>在react中，通过map方法进行列表的渲染</p></blockquote><ul><li>列表的渲染</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> songs </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">温柔</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">倔强</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">私奔到月球</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> list </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> songs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">song</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">>{</span><span style="color:#A6ACCD;">song</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> dv </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">>{</span><span style="color:#A6ACCD;">list</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><ul><li>直接在JSX中渲染</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> songs </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">温柔</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">倔强</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">私奔到月球</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> dv </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">>{</span><span style="color:#A6ACCD;">songs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">song</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">>{</span><span style="color:#A6ACCD;">song</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><ul><li>key属性的使用</li></ul><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> dv </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">songs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">song</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">song</span><span style="color:#89DDFF;">}>{</span><span style="color:#A6ACCD;">song</span><span style="color:#89DDFF;">}</</span><span style="color:#F07178;">li</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> ))</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">ul</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><p><strong>注意：列表渲染时应该给重复渲染的元素添加key属性，key属性的值要保证唯一</strong></p><p><strong>注意：key值避免使用index下标，因为下标会发生改变</strong></p><h2 id="样式处理" tabindex="-1">样式处理 <a class="header-anchor" href="#样式处理" aria-label="Permalink to "样式处理""></a></h2><h3 id="行内样式-style" tabindex="-1">行内样式-style <a class="header-anchor" href="#行内样式-style" aria-label="Permalink to "行内样式-style""></a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> dv </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">={{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">red</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">backgroundColor</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">pink</span><span style="color:#89DDFF;">'</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}}></span><span style="color:#A6ACCD;">style样式</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
<span class="line"><span style="color:#A6ACCD;">)</span></span></code></pre></div><h3 id="类名-classname" tabindex="-1">类名-className <a class="header-anchor" href="#类名-classname" aria-label="Permalink to "类名-className""></a></h3><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 导入样式</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./base.css</span><span style="color:#89DDFF;">'</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> dv </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">title</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">style样式</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>base.css样式文件</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">title</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">text-align</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> center</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> red</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="练习-1" tabindex="-1">练习 <a class="header-anchor" href="#练习-1" aria-label="Permalink to "练习""></a></h2><div class="language-jsx"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> list </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">刘德华</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">给我一杯忘情水</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">五月天</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">不打扰，是我的温柔</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">id</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">毛不易</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">content</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">像我这样优秀的人</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p><img src="/assets/image-20210816202854520.5637b214.png" alt="image-20210816202854520"></p><p><img src="/assets/image-20210816203947396.aabc8ec7.png" alt="image-20210816203947396"></p><h2 id="总结" tabindex="-1">总结 <a class="header-anchor" href="#总结" aria-label="Permalink to "总结""></a></h2><ul><li><p>JSX是React的核心内容</p></li><li><p>JSX表示在JS代码中书写HTML结构，是React声明式的体现</p></li><li><p>使用JSX配合嵌入的JS表达式，条件渲染，列表渲染，可以渲染任意的UI结构</p></li><li><p>结果使用className和style的方式给JSX添加样式</p></li><li><p>React完全利用JS的语言自身的能力来编写UI，而不是造轮子增强HTML的功能。（对比VUE）</p></li></ul></div></div></main><footer class="VPDocFooter" data-v-c4b0d3cf data-v-face870a><!--[--><!--]--><!----><div class="prev-next" data-v-face870a><div class="pager" data-v-face870a><!----></div><div class="pager" data-v-face870a><a class="pager-link next" href="/markdown-examples.html" data-v-face870a><span class="desc" data-v-face870a>Next page</span><span class="title" data-v-face870a>Markdown Examples</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"markdown-examples.md\":\"49dc7187\",\"index.md\":\"c4897c98\",\"api-examples.md\":\"beecd8fd\",\"01-react.md\":\"6d10ace8\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"My Awesome Project\",\"description\":\"A VitePress Site\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Examples\",\"link\":\"/markdown-examples\"}],\"sidebar\":[{\"text\":\"Examples\",\"items\":[{\"text\":\"Markdown Examples\",\"link\":\"/markdown-examples\"},{\"text\":\"Runtime API Examples\",\"link\":\"/api-examples\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/vuejs/vitepress\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
</body>
</html>