<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，路由链接和非路由链接主要是指通过React Router这个库来进行页面的跳转和切换。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">非路由链接：<br/>非路由链接指的是在页面内部进行跳转，不涉及到页面的刷新或重新加载。这通常是通过在组件内部使用state来控制页面的显示和切换。当用户点击一个按钮或链接时，会触发一个事件，改变state中的值，从而更新页面的显示内容。非路由链接适用于在同一页面内的不同组件之间的切换，或者是在同一页面内的不同部分之间的跳转。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">路由链接：<br/>路由链接指的是在不同页面之间的跳转，需要进行页面的刷新或重新加载。在React中，使用React Router库来实现路由功能。React Router提供了一个路由组件（如<BrowserRouter>、<HashRouter>），以及一系列的路由路径（如<Route path="/home">、<Route path="/about">等）。当用户点击一个路由链接时，React Router会根据路由路径找到对应的组件，并渲染该组件。与非路由链接不同，路由链接涉及到页面的刷新或重新加载，适用于在不同页面之间的切换。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React Router中，每个路由路径都对应一个组件或一个子组件。当用户点击一个路由链接时，React Router会根据路由路径找到对应的组件或子组件，并渲染该组件或子组件。同时，React Router还提供了许多其他的特性，如参数化路由、嵌套路由、编程式导航等，使得页面的跳转和切换更加灵活和方便。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">总之，在React中，非路由链接和路由链接是两种不同的页面跳转方式。非路由链接适用于在同一页面内的不同组件之间的切换，而路由链接则适用于在不同页面之间的切换。使用React Router库可以更加方便地实现页面的跳转和切换。</p><p><br/></p>
文章列表
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，可以通过props向路由组件传递数据。当使用路由链接时，可以在链接中携带参数，然后在组件中通过props获取这些参数。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">例如，假设有一个路由路径为"/demo/test/:name/:age"，其中":name"和":age"是参数占位符。可以在链接中通过参数的形式传递这些值，如<Link to="/demo/test/tom/18">。在组件中，可以通过this.props.match.params获取这些参数的值。例如，可以这样声明接收参数的组件：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">const</span> <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Detail</span> = (<span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">{ match }</span>) => {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">const</span> { name, age } = match.<span class="hljs-property" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">params</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 根据name和age渲染组件的内容 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">};</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在上面的代码中，通过props中的match属性获取到路由的参数，然后通过解构赋值的方式将参数的值分别赋给name和age变量。这样就可以在组件中使用这些值进行渲染了。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">除了通过路由链接传递参数外，还可以通过编程式导航的方式传递数据。例如，使用this.props.history.push('/demo/test/tom/18')进行导航时，可以通过nextState属性获取导航后的状态，然后在组件中进行渲染。这种方式更适合于在组件内部进行导航时传递数据。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">总之，在React中，向路由组件传递数据可以通过多种方式实现，如通过路由链接携带参数、使用编程式导航等。根据具体的应用场景选择合适的方式进行数据的传递。</p><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React中的嵌套路由是指在一个路由组件内部嵌套另一个路由组件，实现更复杂的页面结构和页面逻辑。通过嵌套路由，可以将一个复杂的页面拆分成多个简单的组件，提高代码的可维护性和可读性。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React Router中，可以使用<Route>组件来实现嵌套路由。一个<Route>组件表示一个路由路径，当用户点击一个路由链接或访问一个匹配的URL时，React Router会渲染该<Route>组件对应的组件。同时，如果该<Route>组件有子路由（即内部嵌套了其他<Route>组件），那么当该<Route>组件被渲染时，其子路由也会被递归地渲染。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">下面是一个简单的示例，展示了如何使用嵌套路由：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> { <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">BrowserRouter</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">as</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Router</span>, <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Route</span>, <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Switch</span> } <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react-router-dom'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Home</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./components/Home'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">About</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./components/About'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Contact</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./components/Contact'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Team</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./components/Team'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">TeamDetail</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./components/TeamDetail'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">const</span> <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">App</span> = (<span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;"></span>) => (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Router</span>></span> </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Switch</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Route</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">exact</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">path</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">"/"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">component</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">{Home}</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Route</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">path</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">"/about"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">component</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">{About}</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Route</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">path</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">"/contact"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">component</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">{Contact}</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Route</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">path</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">"/team/:id"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">component</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">{Team}</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Route</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">exact</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">path</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">"/team/:id/detail"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">component</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">{TeamDetail}</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Route</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Switch</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Router</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">export</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">default</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">App</span>;</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在上面的代码中，定义了一个嵌套路由：当用户访问"/team/:id/detail"路径时，会渲染TeamDetail组件。这个嵌套路由被定义在Team组件对应的路由路径内部，因此当用户访问"/team/:id"路径时，Team组件会被渲染，并且根据匹配的路径，其子路由TeamDetail也会被递归地渲染。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在TeamDetail组件中，可以通过this.props.match获取到当前路径的参数，如id和detail等。这样就可以根据不同的路径参数展示不同的数据和内容。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，使用嵌套路由可以构建更复杂的页面结构和页面逻辑，将一个复杂的页面拆分成多个简单的组件，提高代码的可维护性和可读性。</p><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">NavLink</code>是<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">react-router-dom</code>库中的一个组件，用于创建具有明确<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">activeClassName</code>和<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">activeStyle</code>的导航链接。使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">NavLink</code>组件可以使页面的导航更加清晰和易于维护。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">然而，当在大型应用程序中使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">NavLink</code>组件时，可能会遇到性能问题。每个导航链接都是一个单独的组件，这可能会导致大量的组件渲染和内存占用。为了解决这个问题，可以使用“包装优化”技术来减少不必要的组件渲染和内存占用。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">包装优化是指在需要的时候才渲染组件，而不是在每次状态变化时都重新渲染整个组件树。通过这种方式，可以避免不必要的组件渲染和内存占用，提高应用程序的性能。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，可以使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">React.memo</code>函数来进行包装优化。<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">React.memo</code>函数接受一个组件作为参数，并返回一个新的组件，该新组件会在状态发生变化时重新渲染，而在其他情况下使用缓存的结果。通过将<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">NavLink</code>组件包装在<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">React.memo</code>中，可以避免不必要的重新渲染。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">下面是一个示例代码，展示了如何使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">React.memo</code>进行包装优化：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> { <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">NavLink</span> } <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react-router-dom'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> { memo } <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">const</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">OptimizedNavLink</span> = <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">memo</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">props</span> =></span> {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">return</span> <span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">NavLink</span> {<span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">...props</span>} /></span></span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">export</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">default</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">OptimizedNavLink</span>;</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在上面的代码中，我们使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">React.memo</code>将<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">NavLink</code>组件进行了包装。这样，只有当<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">props</code>发生变化时，才会重新渲染<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">OptimizedNavLink</code>组件。如果<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">props</code>没有发生变化，则使用缓存的结果，避免了不必要的重新渲染。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">使用包装优化技术可以提高应用程序的性能，减少不必要的组件渲染和内存占用。但是需要注意的是，包装优化技术并不是在所有情况下都是必需的，应该根据具体的应用场景和性能需求来决定是否使用。</p><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React Router是React应用程序中常用的路由库，它可以帮助开发者实现页面之间的跳转和切换。在React Router中，主要有以下几个重要的概念：</p><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><p>Router：一个应用中只有一个Router实例，所有路由配置组件Route都定义为Router的子组件。在Web应用中，我们一般会使用对Router进行包装的BrowserRouter或HashRouter两个组件。BrowserRouter使用HTML5的history API(pushState、replaceState等)实现应用的UI和URL的同步。HashRouter使用URL的hash实现应用的UI和URL同步。</p></li><li><p>Route：React Router中用于配置路由信息的组件，也是使用频率最高的组件。Route可以嵌套使用，path属性指定路由的匹配规则。</p></li><li><p>Link：用于在页面中创建导航链接的组件，它的props属性中有一个to属性，指定链接的目标地址。当点击Link组件时，会触发一个路由切换。</p></li><li><p>Switch：Switch组件用于在多个路由组件中选择渲染其中的一个。当匹配到多个路由时，Switch组件只会渲染第一个匹配到的Route组件。</p></li><li><p>Route with SubRoutes：在一些复杂的页面结构中，我们需要将一个页面拆分成多个子组件，每个子组件对应一个子路由。通过使用Route with SubRoutes，我们可以实现嵌套路由的功能。</p></li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React Router中，主要有以下几个重要的API：</p><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">history</code>：history是React Router提供的一个对象，它提供了对浏览器历史记录的操作方法，如pushState、replaceState等。通过使用history对象，我们可以实现页面的导航和URL的同步。</p></li><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">match</code>：在组件中可以通过this.props.match获取到当前路由的信息，如路径、参数等。通过match对象，我们可以根据不同的路由路径渲染不同的组件。</p></li><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">location</code>：location是React Router提供的一个对象，它包含了当前URL的信息，如路径、查询参数等。通过使用location对象，我们可以获取到当前页面的路径和查询参数。</p></li><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">staticContext</code>：staticContext是React Router提供的一个对象，它用于在组件中传递静态上下文信息。通过使用staticContext对象，我们可以将一些不经常变动的数据传递给子组件，避免重复渲染。</p></li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在使用React Router时，需要注意以下几点：</p><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><p>在使用Link组件时，必须给定to属性，否则会抛出错误。</p></li><li><p>在使用Switch组件时，必须给定path属性，否则会渲染所有的Route组件。</p></li><li><p>在使用Route with SubRoutes时，必须给定子路由的path属性，否则会渲染所有的子组件。</p></li><li><p>在使用history对象时，必须给定basename属性，否则会导致路由路径不正确。</p></li><li><p>在使用location对象时，必须给定pathname属性，否则会导致获取不到当前页面的路径和查询参数。</p></li></ol><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，组件间的通信主要有两种方式：</p><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><p>通过props传递：这是父子组件之间通信的主要方式。在父组件中定义props属性，将数据或方法作为props的值传递给子组件。子组件可以通过props属性接收父组件传递的数据或方法。这种方式适用于将一般数据和函数数据传递给子组件，但只能一层一层传递，即单向单层传递。如果子组件需要向父组件传递数据，只能通过回调函数的方式进行。</p></li><li><p>消息订阅（subscribe）-发布（publish）机制：这种方式可以跨层级进行通信，使得任意两个组件通信成为可能。接收数据方为消息订阅（subscribe）者，数据发布（产生）方为消息发布（publish）者。订阅者通过监听发布者的消息，获取需要的数据。这种方式适用于需要跨层级通信或需要在任意两个组件之间传递数据的场景。</p></li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">以上是React中组件间通信的两种方式，根据具体的应用场景和需求选择合适的方式进行组件间的通信。</p><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，可以使用Fetch API进行Ajax请求。Fetch API是现代浏览器内置的基于Promise的网络请求API，可以用于发起HTTP请求并获取响应。下面是一个使用Fetch API进行Ajax请求的示例：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span>, { useState, useEffect } <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">function</span> <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Example</span>(<span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;"></span>) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">const</span> [data, setData] = <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">useState</span>(<span class="hljs-literal" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">null</span>);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">useEffect</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">() =></span> {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">fetch</span>(<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'https://api.example.com/data'</span>) <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 发起Ajax请求 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">then</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">response</span> =></span> response.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">json</span>()) <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 将响应解析为JSON格式 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">then</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">data</span> =></span> <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">setData</span>(data)) <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 将获取到的数据赋值给state变量 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">catch</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">error</span> =></span> <span class="hljs-variable language_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;">console</span>.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">error</span>(<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'Error:'</span>, error)); <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 捕获错误信息 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}, []); <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 只在组件挂载时执行一次 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">return</span> (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">div</span>></span> </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">{data ? (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">ul</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">{data.map(item => (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">li</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">key</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">{item.id}</span>></span>{item.name}<span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">li</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">))}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">ul</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">) : (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">p</span>></span>Loading...<span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">p</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">)}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">div</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在上面的示例中，我们使用了<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useState</code>和<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useEffect</code>两个React Hook。<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useState</code>用于声明一个名为<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>的state变量，初始值为<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">null</code>。<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useEffect</code>用于在组件挂载时执行Ajax请求，并将获取到的数据赋值给<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>变量。在组件中，我们通过判断<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>的值来决定展示什么内容：如果<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>不为空，则展示数据列表；如果<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>为空，则展示加载中的提示信息。通过Fetch API，我们可以很方便地进行Ajax请求并获取响应数据。</p><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，可以使用Axios库进行Ajax请求。Axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js。它提供了一个简单、可扩展的API，使得发送HTTP请求变得非常容易。下面是一个使用Axios进行Ajax请求的示例：</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">首先，需要安装Axios库。可以使用npm或yarn进行安装：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-bash" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">npm install axios</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">或者</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-bash" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">yarn add axios</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">然后，可以在React组件中使用Axios发送HTTP请求。以下是一个使用Axios发送GET请求的示例：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span>, { useState, useEffect } <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> axios <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'axios'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">function</span> <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Example</span>(<span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;"></span>) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">const</span> [data, setData] = <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">useState</span>(<span class="hljs-literal" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">null</span>);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">useEffect</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">() =></span> {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">axios.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">get</span>(<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'https://api.example.com/data'</span>) <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 发送GET请求 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">then</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">response</span> =></span> {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">setData</span>(response.<span class="hljs-property" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">data</span>); <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 将响应数据赋值给state变量 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">})</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">catch</span>(<span class="hljs-function" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">error</span> =></span> {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-variable language_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;">console</span>.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">error</span>(<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'Error:'</span>, error); <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 捕获错误信息 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">});</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}, []); <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(105, 105, 105); line-height: 24px;">// 只在组件挂载时执行一次 </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">return</span> (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">div</span>></span> </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">{data ? (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">ul</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">{data.map(item => (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">li</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">key</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">{item.id}</span>></span>{item.name}<span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">li</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">))}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">ul</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">) : (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">p</span>></span>Loading...<span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">p</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">)}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">div</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在上面的示例中，我们使用了<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useState</code>和<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useEffect</code>两个React Hook。<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useState</code>用于声明一个名为<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>的state变量，初始值为<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">null</code>。<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">useEffect</code>用于在组件挂载时发送GET请求，并将响应数据赋值给<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>变量。在组件中，我们通过判断<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>的值来决定展示什么内容：如果<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>不为空，则展示数据列表；如果<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">data</code>为空，则展示加载中的提示信息。使用Axios库，我们可以很方便地进行Ajax请求并获取响应数据。</p><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React脚手架项目是一个预先配置好的项目模板，包含了开发React应用程序所需的基本文件和目录结构。通过使用脚手架项目，可以更快地创建React应用程序，并避免一些常见的配置问题。下面是一个基于React脚手架项目编写应用程序的详细步骤：</p><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">安装Node.js和npm（Node.js的包管理器）。</p></li><li><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">使用npm安装React脚手架命令行工具（react-scripts）。</p></li></ol><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-bash" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">npm install -g create-react-app</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">3.使用create-react-app命令创建新的React脚手架项目。</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-lua" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-built_in" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">create</span>-react-app my-app</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">此命令将创建一个名为“my-app”的新项目，并在当前目录下创建一个名为“my-app”的文件夹，其中包含了一个预先配置好的React应用程序。<br/>4. 进入项目文件夹。</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-bash" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-built_in" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">cd</span> my-app</td></tr></tbody></table></code></pre><p>5.启动开发服务器。</p><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在项目文件夹中，运行以下命令启动开发服务器：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-arduino" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">npm start</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">此命令将启动一个开发服务器，并在浏览器中打开应用程序的主页。每当修改代码时，页面将自动重新加载。<br/>6. 编写应用程序代码。<br/>在项目文件夹中，可以看到以下几个文件夹和文件：</p><ul style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">src</code> 文件夹：用于存放应用程序的源代码。其中包含了 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">index.js</code> 文件（应用程序的入口点），以及一个名为 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">App.js</code> 的示例组件。</p></li><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">public</code> 文件夹：用于存放公共文件，如应用程序的外部样式表和图片等。其中包含了 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">index.html</code> 文件（应用程序的主页面）。</p></li><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">package.json</code> 文件：包含了项目的依赖项和脚本命令。</p></li><li><p><code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">package-lock.json</code> 文件：包含了项目的依赖项版本信息。</p></li></ul><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">7.在 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">src</code> 文件夹中编写应用程序的组件代码。可以使用React组件来构建用户界面，并将组件导出为 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">index.js</code> 文件中的入口点。例如，创建一个名为 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">Welcome.js</code> 的组件：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">function</span> <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Welcome</span>(<span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">props</span>) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">return</span> <span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">h1</span>></span>Hello, {props.name}<span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">h1</span>></span></span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">export</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">default</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Welcome</span>;</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">8.在 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">index.js</code> 文件中导入组件并渲染应用程序：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">ReactDOM</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react-dom'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">App</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./App'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Welcome</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./Welcome'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">ReactDOM</span>.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">render</span>(</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">React.StrictMode</span>></span> </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">App</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Welcome</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">name</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">"Sara"</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">React.StrictMode</span>></span>,</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-variable language_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;">document</span>.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">getElementById</span>(<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'root'</span>)</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">);</td></tr></tbody></table></code></pre><p><br/></p>
<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">使用React脚手架创建React应用是一个相对直接的过程，下面是一个详细的步骤：</p><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">安装Node.js和npm（Node.js的包管理器）。确保你的机器上已经安装了Node.js和npm。你可以从Node.js的官方网站上下载并安装。</p></li><li><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">安装React脚手架。你可以通过npm来全局安装React脚手架，命令如下：</p></li></ol><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-bash" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">npm install -g create-react-app</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">3使用React脚手架创建新的React应用。运行以下命令：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-lua" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-built_in" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">create</span>-react-app my-app</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">这将在当前目录下创建一个名为“my-app”的新文件夹，其中包含了一个预先配置好的React应用程序。<br/>4. 进入项目文件夹。在命令行中，转到新的项目文件夹：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-bash" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-built_in" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">cd</span> my-app</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">5启动开发服务器。在项目文件夹中，你可以运行以下命令来启动开发服务器：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-arduino" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">npm start</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">这会启动一个开发服务器，并在浏览器中打开应用程序的主页。每当修改代码时，页面将自动重新加载。<br/>6. 编写应用程序代码。在项目文件夹中，你会看到以下几个文件夹和文件：<br/>* <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">src</code> 文件夹：这是你的代码所在的地方，你可以在这里创建你的React组件和其他代码。<br/>* <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">public</code> 文件夹：这个文件夹包含应用程序的公共文件，比如你的HTML文件和CSS文件。<br/>* <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">package.json</code>：这个文件包含了项目的依赖项和脚本命令。<br/>* <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">package-lock.json</code>：这个文件包含了项目的依赖项版本信息。<br/>7. 在 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">src</code> 文件夹中编写你的React组件和其他代码。你可以使用React组件来构建用户界面，并将组件导出为 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">index.js</code> 文件中的入口点。例如，创建一个名为 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">Welcome.js</code> 的组件：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">function</span> <span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Welcome</span>(<span class="hljs-params" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(170, 93, 0); line-height: 24px;">props</span>) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">return</span> <span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">h1</span>></span>Hello, {props.name}<span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">h1</span>></span></span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">export</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">default</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Welcome</span>;</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 0px; margin-bottom: 0px; line-height: 1.75;">8在 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">index.js</code> 文件中导入你的组件并渲染应用程序：</p><pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">React</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">ReactDOM</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'react-dom'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">App</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./App'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">import</span> <span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">Welcome</span> <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(121, 40, 161); line-height: 24px;">from</span> <span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'./Welcome'</span>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><br/></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-title class_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">ReactDOM</span>.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">render</span>(</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="language-xml" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">React.StrictMode</span>></span> </span></td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">App</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">Welcome</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">name</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">"Sara"</span> /></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">React.StrictMode</span>></span>,</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-variable language_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(217, 30, 24); line-height: 24px;">document</span>.<span class="hljs-title function_" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(0, 127, 170); line-height: 24px;">getElementById</span>(<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: green; line-height: 24px;">'root'</span>)</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"><br/></td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">);</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">以上就是使用React脚手架创建React应用的基本步骤。当然，你还可以根据项目的需要安装其他的依赖项或进行其他的配置。</p><p><br/></p>