CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>React 入门 - 学习 Web 开发 | MDN</title><link rel="alternate" title="Einstieg in React" href="https://developer.mozilla.org/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="de"/><link rel="alternate" title="Getting started with React" href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="en"/><link rel="alternate" title="Primeros pasos en React" href="https://developer.mozilla.org/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="es"/><link rel="alternate" title="Démarrer avec React" href="https://developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="fr"/><link rel="alternate" title="React を始める" href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="ja"/><link rel="alternate" title="React 시작하기" href="https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="ko"/><link rel="alternate" title="Começando com React" href="https://developer.mozilla.org/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="pt"/><link rel="alternate" title="Начало работы с React" href="https://developer.mozilla.org/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="ru"/><link rel="alternate" title="React 新手入門" href="https://developer.mozilla.org/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="zh-Hant"/><link rel="alternate" title="React 入门" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" hrefLang="zh"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。"/><meta property="og:url" content="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started"/><meta property="og:title" content="React 入门 - 学习 Web 开发 | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="zh_CN"/><meta property="og:description" content="本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。"/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.5e889624.js"></script><link href="/static/css/main.26c64ea7.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-learn document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/zh-CN/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/zh-CN/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/zh-CN/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/zh-CN/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/zh-CN/docs/Learn" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/zh-CN/docs/Learn/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/zh-CN/docs/Learn/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/zh-CN/docs/Learn/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/zh-CN/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/zh-CN/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/zh-CN/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/zh-CN/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/zh-CN/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/zh-CN/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/zh-CN/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FClient-side_JavaScript_frameworks%2FReact_getting_started" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FClient-side_JavaScript_frameworks%2FReact_getting_started" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn" class="breadcrumb" property="item" typeof="WebPage"><span property="name">学习 Web 开发</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/Tools_and_testing" class="breadcrumb" property="item" typeof="WebPage"><span property="name">工具和测试</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks" class="breadcrumb" property="item" typeof="WebPage"><span property="name">理解客户端 JavaScript 框架</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">React 入门</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>中文 (简体)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-TW" href="/zh-TW/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" class="button submenu-item"><span>正體中文 (繁體)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard localized-content-note"><p><a href="/zh-CN/docs/MDN/Community/Contributing/Translated_content#活跃语言">此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="LearnSidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#你好_react">你好 React</a></li><li class="document-toc-item "><a class="document-toc-link" href="#用例">用例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#react_如何使用_javascript">React 如何使用 JavaScript?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#设置你的第一个_react_应用">设置你的第一个 React 应用</a></li><li class="document-toc-item "><a class="document-toc-link" href="#探索第一个_react_组件_—_app">探索第一个 React 组件 — <code><App/></code></a></li><li class="document-toc-item "><a class="document-toc-link" href="#interrogating_the_index">Interrogating the index</a></li><li class="document-toc-item "><a class="document-toc-link" href="#variables_and_props">Variables and props</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/zh-CN/docs/Learn/Getting_started_with_the_web">新手请从这开始！</a></li><li><details><summary>Web 入门</summary><ol><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web 入门</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software">安装基础软件</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的网站会是什么样子？</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files">处理文件</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基础</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website">发布你的网站</a></li><li><a href="/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works">万维网是如何工作的</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/HTML">HTML——构建 Web</a></li><li><details><summary>HTML 介绍</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 简介</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started">开始学习 HTML</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">“头”里有什么——HTML 元信息</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML 文本处理基础</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">文本格式进阶</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文档与网站架构</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML 调试</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">标记信件</a></li><li><a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">构建网页内容</a></li></ol></details></li><li><details><summary>多媒体与嵌入</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding">多媒体与嵌入</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML 中的图片</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">视频和音频内容</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">从 object 到 iframe——其他嵌入技术</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">向 web 中添加矢量图形</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a></li><li><a href="/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla 欢迎页面</a></li></ol></details></li><li><details><summary>HTML 表格</summary><ol><li><a href="/zh-CN/docs/Learn/HTML/Tables">HTML 表格</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Basics">HTML 表格基础</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Advanced">HTML 表格进阶特性和无障碍</a></li><li><a href="/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data">作业：构建行星数据</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/CSS">CSS——设计 Web</a></li><li><details><summary>CSS 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/First_steps">CSS 入门概述</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS">什么是 CSS?</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/Getting_started">让我们开始 CSS 的学习之旅</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 的组成</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works">CSS 如何运行</a></li><li><a href="/zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page">运用你的新知识</a></li></ol></details></li><li><details><summary>CSS 基础</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks">CSS 构建</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS 选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">类型、类和 ID 选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">伪类和伪元素</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators">关系选择器</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">层叠、优先级与继承</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_layers">层叠层</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model">盒模型</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">背景与边框</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">处理不同方向的文本</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content">溢出的内容</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units">CSS 值和单位</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">在 CSS 中调整大小</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements">图像、媒体和表单元素</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables">样式化表格</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">高级区块效果</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS">调试 CSS</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Organizing">组织 CSS</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">基本的 CSS 理解</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">创建精美的信纸</a></li><li><a href="/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box">一个漂亮的盒子</a></li></ol></details></li><li><details><summary>样式化文本</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/Styling_text">为文本添加样式（样式化文本）</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals">基本文本和字体样式</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists">为列表添加样式</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Styling_links">样式化链接</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts">Web 字体</a></li><li><a href="/zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">作业：排版社区大学首页</a></li></ol></details></li><li><details><summary>CSS 排版</summary><ol><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout">CSS 布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Introduction">介绍 CSS 布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow">常规流布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox">弹性盒子</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Grids">网格</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Floats">浮动</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Positioning">定位</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">多列布局</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design">响应式设计</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries">媒体查询入门指南</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">传统的布局方法</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">支持旧浏览器</a></li><li><a href="/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">作业：基本布局理解</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/JavaScript">JavaScript——用户端动态脚本</a></li><li><details><summary>JavaScript 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps">JavaScript 第一步</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript">什么是 JavaScript？</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash">JavaScript 初体验</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong">查找并解决 JavaScript 代码的错误</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">如何存储你需要的信息——变量</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Math">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Strings">文本处理——JavaScript 中的字符串</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods">有用的字符串方法</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Arrays">数组</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator">笑话生成器</a></li></ol></details></li><li><details><summary>JavaScript 基础</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks">创建 JavaScript 代码块</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals">在代码中做决定——条件语句</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code">循环吧，代码</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions">函数——可复用的代码块</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">创建你自己的函数</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Return_values">函数返回值</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Events">事件介绍</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling">事件冒泡</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery">图片库</a></li></ol></details></li><li><details><summary>JavaScript 对象介绍</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Objects">JavaScript 对象入门</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Basics">JavaScript 对象基础</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes">对象原型</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_programming">面向对象编程基本概念</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript">JavaScript 中的类</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/JSON">使用 JSON</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice">实践对象构造</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">为“弹球”示例添加新功能</a></li></ol></details></li><li><details><summary>异步 JavaScript</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous">异步 JavaScript</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">异步 JavaScript 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">如何使用 Promise</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API">如何实现基于 Promise 的 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing_workers">workers 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Sequencing_animations">序列动画</a></li></ol></details></li><li><details><summary>客户端 Web API</summary><ol><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs">客户端 Web API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API 简介</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">操作文档</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">从服务器获取数据</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">第三方 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">绘图</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">视频和音频 API</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">客户端存储</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Forms">Web 表单——与用户数据打交道</a></li><li><details><summary>Web 表单核心</summary><ol><li><a href="/zh-CN/docs/Learn/Forms">Web 表单构建块</a></li><li><a href="/zh-CN/docs/Learn/Forms/Your_first_form">创建我的第一个表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form">如何构建 HTML 表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Basic_native_form_controls">原生表单部件</a></li><li><a href="/zh-CN/docs/Learn/Forms/HTML5_input_types">HTML5 的输入（input）类型</a></li><li><a href="/zh-CN/docs/Learn/Forms/Other_form_controls">其他表单控件</a></li><li><a href="/zh-CN/docs/Learn/Forms/Styling_web_forms">样式化 Web 表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Advanced_form_styling">表单样式化进阶</a></li><li><a href="/zh-CN/docs/Learn/Forms/UI_pseudo-classes">UI 伪类</a></li><li><a href="/zh-CN/docs/Learn/Forms/Form_validation">表单数据校验</a></li><li><a href="/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data">发送表单数据</a></li></ol></details></li><li><details><summary>Web 表单进阶</summary><ol><li><a href="/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls">如何构建自定义表单控件</a></li><li><a href="/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript">使用 JavaScript 发送表单</a></li><li><a href="/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls">表单控件兼容性列表</a></li><li><a href="/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers">旧式浏览器中的 HTML 表单</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Accessibility">无障碍——使每个人都能使用 Web</a></li><li><details><summary>无障碍指南</summary><ol><li><a href="/zh-CN/docs/Learn/Accessibility">无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/What_is_accessibility">什么是无障碍？</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/HTML">HTML：无障碍的良好基础</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Multimedia">多媒体无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Mobile">移动端无障碍</a></li><li><a href="/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting">测验：无障碍疑难解答</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Performance">性能——使网站快速响应</a></li><li><details><summary>性能指南</summary><ol><li><a href="/zh-CN/docs/Learn/Performance">Web 性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/why_web_performance">Web 性能的重要性</a></li><li><a href="/zh-CN/docs/Learn/Performance/What_is_web_performance">什么是 web 性能？</a></li><li><a href="/zh-CN/docs/Learn/Performance/Perceived_performance">感知性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/Measuring_performance">测量性能</a></li><li><a href="/zh-CN/docs/Learn/Performance/Multimedia">多媒体：图片</a></li><li><a href="/zh-CN/docs/Learn/Performance/video">多媒体：视频</a></li><li><a href="/zh-CN/docs/Learn/Performance/JavaScript">JavaScript 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/HTML">HTML 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/CSS">CSS 性能优化</a></li><li><a href="/zh-CN/docs/Learn/Performance/business_case_for_performance">web 性能的商业案例</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/MathML">MathML——使用 MathML 语言撰写数学表达式</a></li><li><details><summary>MathML 第一步</summary><ol><li><a href="/zh-CN/docs/Learn/MathML/First_steps">MathML 入门概述</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Getting_started">MathML 使用入门</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Text_containers">MathML 文本容器</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots">MathML 分数和根号</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Scripts">MathML 附加符号</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Tables">MathML 表格</a></li><li><a href="/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas">三个著名的数学公式</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/../Games">游戏——开发 Web 游戏</a></li><li><details><summary>指南和基础教程</summary><ol><li><a href="/zh-CN/docs/Games/Introduction">Web 游戏开发简介</a></li><li><a href="/zh-CN/docs/Games/Techniques">游戏开发技术</a></li><li><a href="/zh-CN/docs/Games/Tutorials">教程</a></li><li><a href="/zh-CN/docs/Games/Publishing_games">发布游戏</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Tools_and_testing">工具与测试</a></li><li><details><summary>客户端 web 开发工具</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools">理解客户端 web 开发工具</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">客户端工具概述</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">命令行速成课</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">软件包管理基础</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">介绍完整的工具链</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">部署我们的应用</a></li></ol></details></li><li><details><summary>客户端框架介绍</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">客户端框架介绍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">框架的主要特性</a></li></ol></details></li><li><details open=""><summary>React</summary><ol><li><em><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" aria-current="page">React 入门</a></em></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">开始我们的 React 待办清单</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">组件化我们的 React App</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">开始使用 Vue</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">创建第一个 Vue 组件</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">渲染 Vue 组件列表</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">使用 Vue event、method 和 model 添加一个新的 todo 表单</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">使用 CSS 为 Vue 组件添加样式</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Vue 中的计算属性</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue 中的条件渲染：编辑现有的待办事项</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">使用 Vue 模板引用进行焦点管理</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue 资源</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Svelte 入门</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">开始编写我们的 Svelte 待办事项列表应用程序</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Svelte 中的动态行为：变量和属性</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">将我们的 Svelte 应用组件化</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Svelte 进阶：响应式、生命周期以及无障碍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">使用 Svelte store</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Svelte 对 TypeScript 的支持</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">部署以及下一步</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Angular 入门</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Beginning our Angular todo list app</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Styling our Angular app</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Creating an item component</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Filtering our to-do items</a></li><li><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git 和 GitHub</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/GitHub">Git 和 GitHub</a></li></ol></details></li><li><details><summary>跨浏览器测试</summary><ol><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing">跨浏览器测试</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">跨浏览器测试介绍</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">测试的策略</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">处理常见的 HTML 和 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">处理常见的 JavaScript 问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">解决常见的无障碍问题</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">实现特性检测</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">自动化测试简介</a></li><li><a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">搭建自己的自动化测试环境</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Server-side">服务端网页编程</a></li><li><details><summary>第一步</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/First_steps">服务端网站编程的第一步</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Introduction">服务端编程介绍</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview">客户端服务端交互概述</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Web_frameworks">服务端 web 框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/First_steps/Website_security">站点安全</a></li></ol></details></li><li><details><summary>Django Web 框架（Python）</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/Django">Django Web 框架 (python)</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Introduction">Django 介绍</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/development_environment">设置 Django 开发环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: 使用模型</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Home_page">Django 教程 5：主页构建</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Generic_views">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Sessions">Django 教程 7: 会话框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Authentication">Django 教程 8：用户授权与许可</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Forms">Django 教程 9: 使用表单</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Testing">Django 教程 10: 测试 Django 网页应用</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/Deployment">Django 教程 11：部署 Django 到生产环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/web_application_security">Django Web 应用安全</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Django/django_assessment_blog">评估：DIY Django 微博客</a></li></ol></details></li><li><details><summary>Express Web 框架（Node.js/JavaScript）</summary><ol><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs">Express Web 框架（Node.js/JavaScript）</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node 入门</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment">设置 Node 开发环境</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express 教程：本地图书馆网站</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express 教程 2：创建站点框架</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes">Express 教程 4：路由和控制器</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express 教程 5: 呈现图书馆数据</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms">Express 教程 6: 使用表单</a></li><li><a href="/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment">Express 教程 7: 部署到生产环境</a></li></ol></details></li><li class="section"><a href="/zh-CN/docs/Learn/Common_questions">更多资源</a></li><li><details><summary>常见问题</summary><ol><li><a href="/zh-CN/docs/Learn/Common_questions">常见问题</a></li><li><a href="/zh-CN/docs/Learn/HTML/Howto">使用 HTML 解决常见问题</a></li><li><a href="/zh-CN/docs/Learn/CSS/Howto">解决常见的 CSS 问题</a></li><li><a href="/zh-CN/docs/Learn/JavaScript/Howto">解决 JavaSctript 代码的常见问题</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Web_mechanics">Web 机制</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Tools_and_setup">工具和安装</a></li><li><a href="/zh-CN/docs/Learn/Common_questions/Design_and_accessibility">设计与无障碍</a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">在本文中</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#你好_react">你好 React</a></li><li class="document-toc-item "><a class="document-toc-link" href="#用例">用例</a></li><li class="document-toc-item "><a class="document-toc-link" href="#react_如何使用_javascript">React 如何使用 JavaScript?</a></li><li class="document-toc-item "><a class="document-toc-link" href="#设置你的第一个_react_应用">设置你的第一个 React 应用</a></li><li class="document-toc-item "><a class="document-toc-link" href="#探索第一个_react_组件_—_app">探索第一个 React 组件 — <code><App/></code></a></li><li class="document-toc-item "><a class="document-toc-link" href="#interrogating_the_index">Interrogating the index</a></li><li class="document-toc-item "><a class="document-toc-link" href="#variables_and_props">Variables and props</a></li><li class="document-toc-item "><a class="document-toc-link" href="#总结">总结</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="zh-CN"><header><h1>React 入门</h1></header><div class="section-content"><ul class="prev-next"> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features"><span class="button-wrap"> 上一页 </span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks"><span class="button-wrap"> 概述：理解客户端 JavaScript 框架</span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning"><span class="button-wrap"> 下一页 </span></a></li> </ul> <p>本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。</p> <figure class="table-container"><table class="learn-box standard-table"> <tbody> <tr> <th scope="row">前提：</th> <td> <p> 熟悉核心 <a href="/zh-CN/docs/Learn/HTML">HTML</a>，<a href="/zh-CN/docs/Learn/CSS">CSS</a> 和 <a href="/zh-CN/docs/Learn/JavaScript">JavaScript</a> 语言，了解<a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">终端/命令行</a>。 </p> <p> React 使用称为 JSX（JavaScript 和 XML）的 HTML-in-JavaScript 语法。熟悉 HTML 和 JavaScript 可以帮助你学习 JSX，并更好地确定应用程序中的错误是与 JavaScript 还是与 React 的更特定领域相关。 </p> </td> </tr> <tr> <th scope="row">目标：</th> <td>要设置本地 React 开发环境，创建一个启动应用程序，并了解其工作原理</td> </tr> </tbody> </table></figure></div><section aria-labelledby="你好_react"><h2 id="你好_react"><a href="#你好_react">你好 React</a></h2><div class="section-content"><p>如其官方口号所示，<a href="https://reactjs.org/" class="external" target="_blank">React</a> 是一个用于构建用户界面的库。React 不是一个框架——它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。例如，<a href="https://reactnative.dev/" class="external" target="_blank">React Native</a> 可用于构建移动应用程序；<a href="https://facebook.github.io/react-360/" class="external" target="_blank">React 360</a> 可用于构建虚拟现实应用程序……</p> <p>为了构建 Web 应用，开发人员将 React 与 <a href="https://reactjs.org/docs/react-dom.html" class="external" target="_blank">ReactDOM 结合使用</a>。React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论，并用于解决相同的问题。当我们将 React 称为“框架”时，就是在进行口语化的理解。</p> <p>React 的主要目标是最大程度地减少开发人员构建 UI 时发生的错误。它通过使用组件——描述部分用户界面的、自包含的逻辑代码段——来实现此目的。这些组件可以组合在一起以创建完整的 UI，React 将许多渲染工作进行抽象化，使你可以专注于 UI 设计 (译者注：显而易见，此设计不等于视觉稿的设计)。</p></div></section><section aria-labelledby="用例"><h2 id="用例"><a href="#用例">用例</a></h2><div class="section-content"><p>与本模块中涵盖的其他框架不同，React 不会对代码约定或文件组织实施严格的规则。这使团队可以设置最适合自己的约定，并以他们希望的任何方式采用 React。React 可以处理一个按钮，一个界面的几个部分或应用程序的整个用户界面。</p> <p>尽管 React 可以用于<a href="https://reactjs.org/docs/add-react-to-a-website.html" class="external" target="_blank">界面的小片段</a>中，但要和 jQuery 这样的库，甚至是像 Vue 这样的框架那样“引入”应用程序并不容易——当你使用 React 构建整个应用程序时更容易上手。</p> <p>另外，许多开发人员的经验对于 React 应用程序也是有用处的，例如使用 JSX 编写界面是需要编译过程的。在网站上添加类似于 Babel 的编译器会让网站上代码的运行速度变慢，因此开发人员通常会在构建项目的时候设置这样的工具。React 对于工具的要求可以说是很高的，但这是能够学习解决的。</p> <p>本文将重点介绍使用 React 通过 Facebook 的 <a href="https://create-react-app.dev/" class="external" target="_blank">create-react-app</a> 内的工具渲染应用程序中整个用户界面的用例。</p></div></section><section aria-labelledby="react_如何使用_javascript"><h2 id="react_如何使用_javascript"><a href="#react_如何使用_javascript">React 如何使用 JavaScript?</a></h2><div class="section-content"><p>React 中的许多模式都使用了现代 JavaScript 的功能。React 与 JavaScript 的最大区别在于 <a href="https://reactjs.org/docs/introducing-jsx.html" class="external" target="_blank">JSX</a> 语法的使用上。JSX 是在 JavaScript 语法上的拓展，因此类似于 HTML 的代码可以和 JSX 共存。例如：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const heading = <h1>Mozilla Developer Network</h1>; </code></pre></div> <p>该 heading 常量称为 <strong>JSX 表达式</strong>。React 可以使用它在我们的应用程序中渲染 <a href="/zh-CN/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a> 标签。</p> <p>假设出于语义原因，我们想将 heading 包装 <a href="/zh-CN/docs/Web/HTML/Element/header"><code><header></code></a> 在标记中？JSX 方法允许我们将元素彼此嵌套，就像使用 HTML 一样：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const header = ( <header> <h1>Mozilla Developer Network</h1> </header> ); </code></pre></div> <div class="notecard note"> <p><strong>备注：</strong>上一个代码段中的括号并非 JSX 的一部分，它对你的应用程序没有任何影响，括号只是用来向你（和你的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：</p> <div class="code-example"><div class="example-header"><span class="language-name">jsx</span></div><pre class="brush: jsx notranslate"><code>const header = <header> <h1>Mozilla Developer Network</h1> </header>; </code></pre></div> <p>这看起来多少有点不适感，因为表达式前面的 <a href="/zh-CN/docs/Web/HTML/Element/header"><code><header></code></a> 标记没有缩进与其对应的结束标记相同的位置。</p> </div> <p>浏览器是无法读取直接解析 JSX 的。我们的 header 表达式经过（ <a href="https://babeljs.io/" class="external" target="_blank">Babel</a> 或 <a href="https://parceljs.org/" class="external" target="_blank">Parcel</a> 之类的工具）编译之后是这样的：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const header = React.createElement( "header", null, React.createElement("h1", null, "Mozilla Developer Network"), ); </code></pre></div> <p><em>可以</em>跳过编译步骤，并使用 <a href="https://reactjs.org/docs/react-api.html#createelement" class="external" target="_blank"><code>React.createElement()</code></a> 自己编写 UI。但是，这样做会失去 JSX 的声明性优势，并且代码变得更难以阅读。编译是开发过程中的一个额外步骤，但是 React 社区中的许多开发人员都认为 JSX 的可读性值得。另外，流行的工具使 JSX-to-JavaScript 编译成为其设置过程的一部分。除非你愿意，否则不必自己配置编译。</p> <p>由于 JSX 是 HTML 和 JavaScript 的结合，因此一些开发人员认为它很直观。其他人则说它的混合特性使它变得混乱。但是，一旦熟悉了它，它将使你能够更快，更直观地构建用户界面，并使其他人一眼就能更好地理解你的代码库。</p> <p>要阅读有关 JSX 的更多信息，请查看 React 团队的 <a href="https://reactjs.org/docs/jsx-in-depth.html" class="external" target="_blank">JSX In Depth</a> 文章。</p></div></section><section aria-labelledby="设置你的第一个_react_应用"><h2 id="设置你的第一个_react_应用"><a href="#设置你的第一个_react_应用">设置你的第一个 React 应用</a></h2><div class="section-content"><p>有很多使用 React 的方法，但是我们将使用命令行界面（CLI）工具 create-react-app，如前所述，该方法通过安装一些软件包并创建一些软件包来加快开发 React 应用程序的过程。文件供你处理上述工具。</p> <p>通过将一些 <a href="/zh-CN/docs/Web/HTML/Element/script"><code><script></code></a> 元素复制到 HTML 文件中，可以在<a href="https://reactjs.org/docs/add-react-to-a-website.html" class="external" target="_blank">没有 create-react-app 的情况下将 React 添加到网站</a>，但是 create-react-app CLI 是 React 应用程序的常见起点。使用它可以让你花费更多的时间来构建应用，而花更少的时间进行设置。</p></div></section><section aria-labelledby="要求"><h3 id="要求"><a href="#要求">要求</a></h3><div class="section-content"><p>为了使用 create-react-app，你需要安装 <a href="https://nodejs.org/en/" class="external" target="_blank">Node.js</a>。建议你使用长期支持（LTS）版本。Node 包括 npm（Node 程序包管理器）和 npx（Node 程序包运行器）</p> <p>你也可以使用 Yarn 软件包管理器作为替代方案，但是我们假设在这套教程中使用 npm。有关 npm 和 yarn 的更多信息，请参见<a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">程序包管理基础</a>。</p> <p>如果你使用的是 Windows，则需要安装一些软件以与 Unix/macOS 终端保持同等地位，才能使用本教程中提到的终端命令。<strong>Gitbash</strong>（作为 <a href="https://gitforwindows.org/" class="external" target="_blank">git Windows 工具集</a>的一部分提供）或**<a href="https://docs.microsoft.com/en-us/windows/wsl/about" class="external" target="_blank">适用于 Linux 的 Windows 子系统</a>**（<strong>WSL</strong>）均适用。有关这些以及一般终端命令的更多信息，请参见<a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">命令行速成课程</a>。</p> <p>还请记住，React 和 ReactDOM 生成的应用程序只能在相当现代的一组浏览器上运行——通过某些 polyfill 可以使用 IE9+。在阅读这些教程时，建议你使用 Firefox，Safari 或 Chrome 等现代浏览器。</p> <p>另外，有关更多信息，请参见以下内容：</p> <ul> <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/" class="external" target="_blank">"What is npm" on nodejs.org</a></li> <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner" class="external" target="_blank">"Introducing npx" on the npm blog</a></li> <li><a href="https://create-react-app.dev/" class="external" target="_blank">The create-react-app documentation</a></li> </ul></div></section><section aria-labelledby="初始化你的应用"><h3 id="初始化你的应用"><a href="#初始化你的应用">初始化你的应用</a></h3><div class="section-content"><p><code>create-react-app</code> ，该命令接受一个参数：即你想给自己的应用所起的名字。<code>create-react-app</code> 将为此应用创建一个同名的文件夹，并在其中创建所需文件。在你打算放置你的应用程序的文件夹下打开你的命令终端，并键入命令：</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npx create-react-app moz-todo-react </code></pre></div> <p>这句命令创建了一个名为 <code>moz-todo-react</code> 的文件夹，并在此文件夹里做了如下工作：</p> <ul> <li>为你的应用程序安装了一些 npm 包；</li> <li>写入 react 应用启动所需要的脚本文件；</li> <li>创建一系列结构化的子文件夹和文件，奠定应用程序的基础架构；</li> <li>如果你的电脑上安装了 git 的话，顺便帮你把 git 仓库也建好。</li> </ul> <div class="notecard note"> <p><strong>备注：</strong>如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 <code>--use-npm</code> <strong>:</strong></p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npx create-react-app moz-todo-react --use-npm </code></pre></div> </div> <p><code>create-react-app</code> 运行的时候会在终端上显示一些与其状态相关的信息，通常情况下无需为此担心。运行需要一点时间，在此期间你可以适度放松一下。</p> <p>处理完成之后，你可以 <code>cd</code> 到 <code>moz-todo-react</code> 文件夹下，然后键入 <code>npm start</code> 命令并回车，先前由 create-react-app 创建的脚本会启动一个地服务 <a href="localhost:3000">localhost:3000</a>，并打开你的默认浏览器来访问这个服务。成功启动浏览器的话，你的浏览器上会显示如下画面：</p> <p> <img src="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started/default-create-react-app.png" alt="Firefox MacOS 的屏幕截图，打开到 localhost：3000，显示了默认的 create-react-app 应用程序" loading="lazy"> </p></div></section><section aria-labelledby="应用结构"><h3 id="应用结构"><a href="#应用结构">应用结构</a></h3><div class="section-content"><p>create-react-app 提供了开发 React 应用所需的工具。它的初始文件结构如下：</p> <pre class="brush: plain notranslate">moz-todo-react ├── README.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js </pre> <p>目录 <strong><code>src</code></strong> 是我们花费时间最多的地方，因为它是我们 React 应用源码存放的目录。</p> <p>目录 <strong><code>public</code></strong> 包含了开发应用时浏览器会读取的文件，其中最重要的就是 <code>index.html</code>。React 将目录 <strong><code>src</code></strong> 中的代码嵌入这个文件，从而浏览器才能运行此文件。 <code>index.html</code>中的有些内容关乎 create-react-app 的运作，因此除非你知道自己在做什么样的修改，否则不建议编辑这个文件。当然，你可以修改<code>index.html</code>中的 <a href="/zh-CN/docs/Web/HTML/Element/title"><code><title></code></a> 元素的内容来表现此应用程序通俗易懂的名称。</p> <p>目录 <code>public</code> 会在建立并部署此应用的时候更新。此教程不涉及部署，你可以参考 <a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a> 这一篇教程。</p> <p>文件 <code>package.json</code> 包含了 Node.js/npm 为了建立该应用程序所管理着的文件信息。这个文件不是 React 应用独有的。你无需理解这个文件也能看懂这篇教程。不过，如果你想了解更多，你可以阅读 <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/" class="external" target="_blank">What is the file <code>package.json</code>? on NodeJS.org</a> 和 <a href="/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a>。</p></div></section><section aria-labelledby="探索第一个_react_组件_—_app"><h2 id="探索第一个_react_组件_—_app"><a href="#探索第一个_react_组件_—_app">探索第一个 React 组件 — <code><App/></code></a></h2><div class="section-content"><p>在 React 中，组件是组成应用程序的可重复利用的模块。组件可大可小，但它们都只有单一的、明确的功能。</p> <p>打开 <code>src/App.js</code>，之前打开的页面也提示我们对这个文件进行编辑。这个文件包含了我们第一个组件 <code>App</code>，内容如下：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import React from "react"; import logo from "./logo.svg"; import "./App.css"; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer"> Learn React </a> </header> </div> ); } export default App; </code></pre></div> <p>文件 <code>App.js</code> 主要由三部分组成：顶部的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a> 语句，中间的 <code>App</code> 组件，以及底部的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a> 语句。大多数 React 组件都遵循这个模式。</p></div></section><section aria-labelledby="import_语句"><h3 id="import_语句"><a href="#import_语句">import 语句</a></h3><div class="section-content"><p>脚本开头的 <code>import</code> 语句允许在此脚本中使用其他文件中的代码，让我们更进一步地了解这些语句。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import React from "react"; import logo from "./logo.svg"; import "./App.css"; </code></pre></div> <p>第一句代码引入了 React 库，这是为了将代码中的 JSX 语句转为<code>React.createElement()</code>，所有的 React 模块都应该引入 React 模块，否则会抛错。</p> <p>第二句代码引入了 <code>'./logo.svg'</code>。注意文件路径以 <code>./</code> 开头、由 <code>.svg</code> 尾——表明这是一个本地文件，并且它不是 JavaScript 文件。</p> <div class="notecard note"> <p><strong>备注：</strong>我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 <code>package.json</code> 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。</p> </div> <p>第三行引入了我们的组件所需的 CSS 文件。与上面两句不同，这里没有将引入的内容赋给任何变量、也没有用到 <code>from</code> 指令。请注意这种特殊的语法并非原生 JS 的语法——它源自前端资源打包工具 webpack，而 create-react-app 正是基于 webpack 配置而来的。</p> <div class="notecard note"> <p><strong>备注：</strong>译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 <code>import</code> 语句来声明对非 JS 内容的引用。</p> <p>详情参见 webpack 官方和社区，截止目前 (2020 年下旬)，webpack 仍是现代前端工作中必不可少的技能之一。</p> </div></div></section><section aria-labelledby="app_组件"><h3 id="app_组件"><a href="#app_组件"><code>App</code> 组件</a></h3><div class="section-content"><p>在 import 所需资源之后，我们定义了一个名为 App 的函数，尽管大部分 JavaScript 社区推崇使用驼峰式命名法，如：“helloWorld”。但 React 组件使用帕斯卡命名法，如“HelloWorld”，来帮助用户辨认一个 JSX 元素是 React 组件而非普通的 HTML 标签。如果你将函数名“App”改为“app”，你的浏览器会显示错误。</p> <p>让我们进一步看下 App 方法。</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer"> Learn React </a> </header> </div> ); } </code></pre></div> <p>App 方法返回一个 JSX 表达式，这个表达式定义了浏览器最终要渲染的 DOM。</p> <p>表达式中的元素就像以前写的 HTML 一样，都拥有属性，并且遵循 <code>attribute="value"</code> 的模式。在第三行，开始标签 <a href="/zh-CN/docs/Web/HTML/Element/div"><code><div></code></a> 有着 <code>className</code> 属性。这个属性与在 HTML 中的 <a href="/zh-CN/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 属性相同，但是由于 JSX 就是 JavaScript, 我们不能使用 <code>class</code> 属性 - 这个是关键字，意味着 JavaScript 已经用它执行其他任务，使用 <code>class</code> 属性将会在我们的代码中产生冲突。由于同样的原因，一些其他的 HTML 属性在 JSX 中也有着不同的书写方式，当我们碰到它们时，我们将会详述。</p> <p>把第 6 行的 <a href="/zh-CN/docs/Web/HTML/Element/p"><code><p></code></a> 标签内容改为 "Hello, world!" 并保存文件。你会发现这个改变也会立即在浏览器的<code>http://localhost:3000</code> 中同步渲染。现在删掉 <a href="/zh-CN/docs/Web/HTML/Element/a"><code><a></code></a> 标签并保存，"Learn React"链接也会同样被删除。</p> <p>你的 <code>App</code> 组件应该如下所示：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Hello, World!</p> </header> </div> ); } </code></pre></div></div></section><section aria-labelledby="export_语句"><h3 id="export_语句"><a href="#export_语句">Export 语句</a></h3><div class="section-content"><p>在 <code>App.js</code> 文件的最底部， <code>export default App</code> 语句使得 <code>App</code> 组件能被其他模块使用。</p></div></section><section aria-labelledby="interrogating_the_index"><h2 id="interrogating_the_index"><a href="#interrogating_the_index">Interrogating the index</a></h2><div class="section-content"><p>现在让我们打开 <code>src/index.js</code>, 因为这也是 <code>App</code> 组件被用到的地方。这个文件是我们 app 的入口点，在一开始它如下所示</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; ReactDOM.render(<App />, document.getElementById("root")); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); </code></pre></div> <p>就像 <code>App.js</code> 一样，这个文件一开始 import 了所有的 JS 模块和其他运行所需要的资源。<code>src/index.css</code>定义了运用于整个 app 的 global style。我们可以看到我们的 <code>App</code> 组件也被 imported 了，这是在 <code>App.js</code> 底部的语句让 import <code>App</code> 变得可行。</p> <p>第七行调用 React 的 <code>ReactDOM.render()</code> 函数，并传入两个参数：</p> <ul> <li>我们想要渲染的组件，在这个例子中是 <code><App /></code> .</li> <li>我们想要渲染组件所在的 DOM 元素，在这个例子中是带着 <code>root</code> 标签的元素。让我们看一下 <code>public/index.html</code> 的代码，可以看到这有一个 <code><div></code> 元素在 <code><body></code> 里。</li> </ul> <p>上述所有都告诉 React 我们想把 <code>App</code> 组件作为 root 或者第一个组件来渲染我们的 React App。</p> <div class="notecard note"> <p><strong>备注：</strong>在 JSX 中，React 组件和 HTML 元素必须有关闭斜杠（<code>/</code>），如 <code><App /></code>，如果我们写 <code><App></code> 或者 <code><img></code> 将会报错。</p> </div> <p><a href="/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> 能让我们的 App 离线运行，但它不在本篇文章的范围中，你可以删除第 5 行和第 9 到 12 行。</p> <p>你最终的 <code>index.js</code> 文件应该如下所示：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; ReactDOM.render(<App />, document.getElementById("root")); </code></pre></div></div></section><section aria-labelledby="variables_and_props"><h2 id="variables_and_props"><a href="#variables_and_props">Variables and props</a></h2><div class="section-content"><p>接下来，我们将使用一些 JavaScript 的技巧来让我们在 React 中编辑组件以及处理数据更加顺手。我们将讨论如何在 JSX 中使用 variables，并且介绍 props，props 是我们用来往组件里传入数据的一种方法，传入之后我们可以用 variable 访问传入的变量。</p></div></section><section aria-labelledby="variables_in_jsx"><h3 id="variables_in_jsx"><a href="#variables_in_jsx">Variables in JSX</a></h3><div class="section-content"><p>回到 <code>App.js</code>, 让我们看一下第 9 行：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code><img src={logo} className="App-logo" alt="logo" /> </code></pre></div> <p>可以看到，<code><img /></code> 标签的 <code>src</code> 属性值是在大括号中的——<code>{logo}</code>。这是 JSX 识别变量的方式。React 将会识别 <code>{logo}</code>，知道你在我们 app 第二行引入的 logo，然后 React 会读取这个文件它并渲染。</p> <p>让我们试着设置一个我们自己的变量，在 <code>App</code> return 之前，添加 <code>const subject = 'React';</code>。你的代码现在应该如下所示：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function App() { const subject = "React"; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Hello, World!</p> </header> </div> ); } </code></pre></div> <p>把第 8 行的 "world" 替换成我们自己的变量 <code>subject</code> ，如下所示：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function App() { const subject = "React"; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Hello, {subject}!</p> </header> </div> ); } </code></pre></div> <p>当我们保存时，浏览器将会显示 "Hello, React!"，而不是 "Hello, world!"</p> <p>变量十分方便，但是我们没有利用到 React 的特性，接下来我们将介绍 Props。</p></div></section><section aria-labelledby="component_props"><h3 id="component_props"><a href="#component_props">Component props</a></h3><div class="section-content"><p><strong>prop</strong> 是任何传入 React 组件的数据。Props 写在组件中，并且像 HTML 属性一样写成 <code>prop="value"</code>。让我们打开 <code>index.js</code> 并且为我们的 <code><App/></code> 添加第一个 prop。</p> <p>为 <code><App/></code> 组件添加一个叫 <code>subject</code> 并有着 <code>Clarice</code> 值的 prop。当完成之后，你的代码应如下所示：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>ReactDOM.render(<App subject="Clarice" />, document.getElementById("root")); </code></pre></div> <p>回到 <code>App.js</code>，代码应该如下所示（return 中的内容省略了）</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function App() { const subject = "React"; return ( // return statement ); } </code></pre></div> <p>改变 <code>App</code> 的函数签名，让它接收 <code>props</code> 作为一个参数。就像其他参数一样，你可以把 <code>props</code> 放在 <code>console.log()</code> 中，让其在浏览器打印出来。把它放在你的 <code>subject</code> 之后，以及 <code>return</code> 之前，你的代码应如下所示：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function App(props) { const subject = "React"; console.log(props); return ( // return statement ); } </code></pre></div> <p>保存你的文件并检查你浏览器中的 JavaScript Console，你将会发现如下所示的语句：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>Object { subject: "Clarice" } </code></pre></div> <p>对象的 <code>subject</code> 属性与我们放入 <code>App</code> 函数签名的 prop 相对应，并且 <code>Clarice</code> 字符串与它的值相对应，在 React 中的组件 props 总是用这种方式传入 object 中。</p> <p>现在 <code>subject</code> 是我们的 props 之一了，让我们在 <code>App.js</code> 中使用它。用 <code>props.subject</code> 替代原本的 <code>React</code> 字符串，如果你想的话，也可以删除 <code>console.log()</code>，你的代码将如下所示：</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>function App(props) { const subject = props.subject; return ( // return statement ); } </code></pre></div> <p>当你保存之后，app 应该会输出 "Hello, Clarice!"。如果你回到 <code>index.js</code>，并且修改 <code>subject</code> 的值并保存，你输出的字也会随之改变。</p></div></section><section aria-labelledby="总结"><h2 id="总结"><a href="#总结">总结</a></h2><div class="section-content"><p>以上就是我们对 React 的初步认识，包括如何在本地下载它，创建一个初始 app，以及一些基本的操作。在下篇文章，我们将会开始创建我们的第一个 app——一个任务清单。在我们开始下篇文章之前，让我们先复习下我们现在所学的。</p> <p>在 React 中：</p> <ul> <li>组件可以 import 它们需要的模块，并且在文件底部将自身 export，以让其他组件使用。</li> <li>组件是用 <code>PascalCase</code> 也就是帕斯卡命名法命名的。</li> <li>通过把变量放在大括号中，你可以读取 JSX 的变量，如<code>{so}</code></li> <li>一些 JSX 属性与 HTML 属性不相同，这样就不会与 JavaScript 的保留字相冲突，比如说，在 HTML 中的 <code>class</code> 会在 JSX 中转译为 <code>className</code>。注意这些属性都是驼峰式命名的。</li> <li>Props 就像属性一样写在组件里，并且传入组件。</li> </ul><ul class="prev-next"> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features"><span class="button-wrap"> 上一页 </span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks"><span class="button-wrap"> 概述：理解客户端 JavaScript 框架</span></a></li> <li><a class="button secondary" href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning"><span class="button-wrap"> 下一页 </span></a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/translated-content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2024-08-27T09:31:07.000Z">2024年8月27日</time> by <a href="/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md?plain=1" title="Folder: zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/translated-content/issues/new?template=page-report-zh-cn.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FClient-side_JavaScript_frameworks%2FReact_getting_started&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60zh-cn%2Flearn%2Ftools_and_testing%2Fclient-side_javascript_frameworks%2Freact_getting_started%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FLearn%2FTools_and_testing%2FClient-side_JavaScript_frameworks%2FReact_getting_started%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fblob%2Fmain%2Ffiles%2Fzh-cn%2Flearn%2Ftools_and_testing%2Fclient-side_javascript_frameworks%2Freact_getting_started%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content%2Fcommit%2F4b048e302a8324ed40470e17b602ccbefc3c58c5%0A*+Document+last+modified%3A+2024-08-27T09%3A31%3A07.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mozilla.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/zh-CN/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="/zh-CN/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","doc":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"React 入门","mdn_url":"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","locale":"zh-CN","native":"中文 (简体)","sidebarHTML":"<ol><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web\">新手请从这开始！</a></li><li><details><summary>Web 入门</summary><ol><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web\">Web 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">安装基础软件</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">你的网站会是什么样子？</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">处理文件</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">发布你的网站</a></li><li><a href=\"/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">万维网是如何工作的</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/HTML\">HTML——构建 Web</a></li><li><details><summary>HTML 介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML\">HTML 简介</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">开始学习 HTML</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">“头”里有什么——HTML 元信息</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML 文本处理基础</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">创建超链接</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">文本格式进阶</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">文档与网站架构</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">HTML 调试</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">标记信件</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">构建网页内容</a></li></ol></details></li><li><details><summary>多媒体与嵌入</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding\">多媒体与嵌入</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">HTML 中的图片</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">视频和音频内容</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">从 object 到 iframe——其他嵌入技术</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">向 web 中添加矢量图形</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">响应式图片</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla 欢迎页面</a></li></ol></details></li><li><details><summary>HTML 表格</summary><ol><li><a href=\"/zh-CN/docs/Learn/HTML/Tables\">HTML 表格</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Basics\">HTML 表格基础</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Advanced\">HTML 表格进阶特性和无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data\">作业：构建行星数据</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/CSS\">CSS——设计 Web</a></li><li><details><summary>CSS 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps\">CSS 入门概述</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS\">什么是 CSS?</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/Getting_started\">让我们开始 CSS 的学习之旅</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured\">CSS 的组成</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works\">CSS 如何运行</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/First_steps/Styling_a_biography_page\">运用你的新知识</a></li></ol></details></li><li><details><summary>CSS 基础</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks\">CSS 构建</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors\">CSS 选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">类型、类和 ID 选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">属性选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">伪类和伪元素</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">关系选择器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">层叠、优先级与继承</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_layers\">层叠层</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model\">盒模型</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">背景与边框</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">处理不同方向的文本</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Overflowing_content\">溢出的内容</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS 值和单位</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">在 CSS 中调整大小</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">图像、媒体和表单元素</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables\">样式化表格</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">高级区块效果</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS\">调试 CSS</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Organizing\">组织 CSS</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">基本的 CSS 理解</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">创建精美的信纸</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">一个漂亮的盒子</a></li></ol></details></li><li><details><summary>样式化文本</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text\">为文本添加样式（样式化文本）</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Fundamentals\">基本文本和字体样式</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Styling_lists\">为列表添加样式</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Styling_links\">样式化链接</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts\">Web 字体</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">作业：排版社区大学首页</a></li></ol></details></li><li><details><summary>CSS 排版</summary><ol><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout\">CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Introduction\">介绍 CSS 布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow\">常规流布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox\">弹性盒子</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Grids\">网格</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Floats\">浮动</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Positioning\">定位</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">多列布局</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design\">响应式设计</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries\">媒体查询入门指南</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">传统的布局方法</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">支持旧浏览器</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">作业：基本布局理解</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/JavaScript\">JavaScript——用户端动态脚本</a></li><li><details><summary>JavaScript 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps\">JavaScript 第一步</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">什么是 JavaScript？</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash\">JavaScript 初体验</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/What_went_wrong\">查找并解决 JavaScript 代码的错误</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Variables\">如何存储你需要的信息——变量</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Math\">JavaScript 中的基础数学 — 数字和操作符</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Strings\">文本处理——JavaScript 中的字符串</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Useful_string_methods\">有用的字符串方法</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Arrays\">数组</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/First_steps/Silly_story_generator\">笑话生成器</a></li></ol></details></li><li><details><summary>JavaScript 基础</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks\">创建 JavaScript 代码块</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/conditionals\">在代码中做决定——条件语句</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Looping_code\">循环吧，代码</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Functions\">函数——可复用的代码块</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">创建你自己的函数</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Return_values\">函数返回值</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Events\">事件介绍</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">事件冒泡</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery\">图片库</a></li></ol></details></li><li><details><summary>JavaScript 对象介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects\">JavaScript 对象入门</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Basics\">JavaScript 对象基础</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes\">对象原型</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_programming\">面向对象编程基本概念</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">JavaScript 中的类</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/JSON\">使用 JSON</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Object_building_practice\">实践对象构造</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">为“弹球”示例添加新功能</a></li></ol></details></li><li><details><summary>异步 JavaScript</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous\">异步 JavaScript</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing\">异步 JavaScript 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises\">如何使用 Promise</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">如何实现基于 Promise 的 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">workers 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">序列动画</a></li></ol></details></li><li><details><summary>客户端 Web API</summary><ol><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs\">客户端 Web API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Web API 简介</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">操作文档</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">从服务器获取数据</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">第三方 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">绘图</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">视频和音频 API</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">客户端存储</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Forms\">Web 表单——与用户数据打交道</a></li><li><details><summary>Web 表单核心</summary><ol><li><a href=\"/zh-CN/docs/Learn/Forms\">Web 表单构建块</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Your_first_form\">创建我的第一个表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/How_to_structure_a_web_form\">如何构建 HTML 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Basic_native_form_controls\">原生表单部件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/HTML5_input_types\">HTML5 的输入（input）类型</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Other_form_controls\">其他表单控件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Styling_web_forms\">样式化 Web 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Advanced_form_styling\">表单样式化进阶</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/UI_pseudo-classes\">UI 伪类</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Form_validation\">表单数据校验</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data\">发送表单数据</a></li></ol></details></li><li><details><summary>Web 表单进阶</summary><ol><li><a href=\"/zh-CN/docs/Learn/Forms/How_to_build_custom_form_controls\">如何构建自定义表单控件</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Sending_forms_through_JavaScript\">使用 JavaScript 发送表单</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">表单控件兼容性列表</a></li><li><a href=\"/zh-CN/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">旧式浏览器中的 HTML 表单</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Accessibility\">无障碍——使每个人都能使用 Web</a></li><li><details><summary>无障碍指南</summary><ol><li><a href=\"/zh-CN/docs/Learn/Accessibility\">无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/What_is_accessibility\">什么是无障碍？</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/HTML\">HTML：无障碍的良好基础</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS 和 JavaScript 无障碍最佳实践</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA 基础</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Multimedia\">多媒体无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Mobile\">移动端无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Accessibility/Accessibility_troubleshooting\">测验：无障碍疑难解答</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Performance\">性能——使网站快速响应</a></li><li><details><summary>性能指南</summary><ol><li><a href=\"/zh-CN/docs/Learn/Performance\">Web 性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/why_web_performance\">Web 性能的重要性</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/What_is_web_performance\">什么是 web 性能？</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Perceived_performance\">感知性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Measuring_performance\">测量性能</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/Multimedia\">多媒体：图片</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/video\">多媒体：视频</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/JavaScript\">JavaScript 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/HTML\">HTML 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/CSS\">CSS 性能优化</a></li><li><a href=\"/zh-CN/docs/Learn/Performance/business_case_for_performance\">web 性能的商业案例</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/MathML\">MathML——使用 MathML 语言撰写数学表达式</a></li><li><details><summary>MathML 第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps\">MathML 入门概述</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Getting_started\">MathML 使用入门</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Text_containers\">MathML 文本容器</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML 分数和根号</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Scripts\">MathML 附加符号</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Tables\">MathML 表格</a></li><li><a href=\"/zh-CN/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">三个著名的数学公式</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/../Games\">游戏——开发 Web 游戏</a></li><li><details><summary>指南和基础教程</summary><ol><li><a href=\"/zh-CN/docs/Games/Introduction\">Web 游戏开发简介</a></li><li><a href=\"/zh-CN/docs/Games/Techniques\">游戏开发技术</a></li><li><a href=\"/zh-CN/docs/Games/Tutorials\">教程</a></li><li><a href=\"/zh-CN/docs/Games/Publishing_games\">发布游戏</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Tools_and_testing\">工具与测试</a></li><li><details><summary>客户端 web 开发工具</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">理解客户端 web 开发工具</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">客户端工具概述</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">命令行速成课</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">软件包管理基础</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">介绍完整的工具链</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">部署我们的应用</a></li></ol></details></li><li><details><summary>客户端框架介绍</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">客户端框架介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">框架的主要特性</a></li></ol></details></li><li><details open=\"\"><summary>React</summary><ol><li><em><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\" aria-current=\"page\">React 入门</a></em></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">开始我们的 React 待办清单</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">组件化我们的 React App</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React resources</a></li></ol></details></li><li><details><summary>Ember</summary><ol><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Getting started with Ember</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember app structure and componentization</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember interactivity: Events, classes and state</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember resources and troubleshooting</a></li></ol></details></li><li><details><summary>Vue</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">开始使用 Vue</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">创建第一个 Vue 组件</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">渲染 Vue 组件列表</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">使用 Vue event、method 和 model 添加一个新的 todo 表单</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">使用 CSS 为 Vue 组件添加样式</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Vue 中的计算属性</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue 中的条件渲染：编辑现有的待办事项</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">使用 Vue 模板引用进行焦点管理</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue 资源</a></li></ol></details></li><li><details><summary>Svelte</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Svelte 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">开始编写我们的 Svelte 待办事项列表应用程序</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Svelte 中的动态行为：变量和属性</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">将我们的 Svelte 应用组件化</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Svelte 进阶：响应式、生命周期以及无障碍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">使用 Svelte store</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">Svelte 对 TypeScript 的支持</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">部署以及下一步</a></li></ol></details></li><li><details><summary>Angular</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Angular 入门</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Beginning our Angular todo list app</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling our Angular app</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Creating an item component</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtering our to-do items</a></li><li><a class=\"only-in-en-us\" title=\"此页面目前仅提供英文版本\" href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li><details><summary>Git 和 GitHub</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/GitHub\">Git 和 GitHub</a></li></ol></details></li><li><details><summary>跨浏览器测试</summary><ol><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing\">跨浏览器测试</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">跨浏览器测试介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">测试的策略</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">处理常见的 HTML 和 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">处理常见的 JavaScript 问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">解决常见的无障碍问题</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">实现特性检测</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">自动化测试简介</a></li><li><a href=\"/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">搭建自己的自动化测试环境</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Server-side\">服务端网页编程</a></li><li><details><summary>第一步</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps\">服务端网站编程的第一步</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Introduction\">服务端编程介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Client-Server_overview\">客户端服务端交互概述</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Web_frameworks\">服务端 web 框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/First_steps/Website_security\">站点安全</a></li></ol></details></li><li><details><summary>Django Web 框架（Python）</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/Django\">Django Web 框架 (python)</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Introduction\">Django 介绍</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/development_environment\">设置 Django 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/skeleton_website\">Django Tutorial Part 2: 创建网站的地基</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Models\">Django Tutorial Part 3: 使用模型</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django 管理员站点</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Home_page\">Django 教程 5：主页构建</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Generic_views\">Django 教程 6: 通用列表和详细信息视图</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Sessions\">Django 教程 7: 会话框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Authentication\">Django 教程 8：用户授权与许可</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Forms\">Django 教程 9: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Testing\">Django 教程 10: 测试 Django 网页应用</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/Deployment\">Django 教程 11：部署 Django 到生产环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/web_application_security\">Django Web 应用安全</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Django/django_assessment_blog\">评估：DIY Django 微博客</a></li></ol></details></li><li><details><summary>Express Web 框架（Node.js/JavaScript）</summary><ol><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs\">Express Web 框架（Node.js/JavaScript）</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express/Node 入门</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/development_environment\">设置 Node 开发环境</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express 教程：本地图书馆网站</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express 教程 2：创建站点框架</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express 教程 3：使用数据库 (Mongoose)</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/routes\">Express 教程 4：路由和控制器</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express 教程 5: 呈现图书馆数据</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/forms\">Express 教程 6: 使用表单</a></li><li><a href=\"/zh-CN/docs/Learn/Server-side/Express_Nodejs/deployment\">Express 教程 7: 部署到生产环境</a></li></ol></details></li><li class=\"section\"><a href=\"/zh-CN/docs/Learn/Common_questions\">更多资源</a></li><li><details><summary>常见问题</summary><ol><li><a href=\"/zh-CN/docs/Learn/Common_questions\">常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/HTML/Howto\">使用 HTML 解决常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/CSS/Howto\">解决常见的 CSS 问题</a></li><li><a href=\"/zh-CN/docs/Learn/JavaScript/Howto\">解决 JavaSctript 代码的常见问题</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Web_mechanics\">Web 机制</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Tools_and_setup\">工具和安装</a></li><li><a href=\"/zh-CN/docs/Learn/Common_questions/Design_and_accessibility\">设计与无障碍</a></li></ol></details></li></ol>","sidebarMacro":"LearnSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\"><span class=\"button-wrap\"> 上一页 </span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks\"><span class=\"button-wrap\"> 概述：理解客户端 JavaScript 框架</span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\"><span class=\"button-wrap\"> 下一页 </span></a></li>\n</ul>\n<p>本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。</p>\n<figure class=\"table-container\"><table class=\"learn-box standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">前提：</th>\n <td>\n <p>\n 熟悉核心 <a href=\"/zh-CN/docs/Learn/HTML\">HTML</a>，<a href=\"/zh-CN/docs/Learn/CSS\">CSS</a>\n 和 <a href=\"/zh-CN/docs/Learn/JavaScript\">JavaScript</a> 语言，了解<a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">终端/命令行</a>。\n </p>\n <p>\n React 使用称为 JSX（JavaScript 和 XML）的 HTML-in-JavaScript\n 语法。熟悉 HTML 和 JavaScript 可以帮助你学习\n JSX，并更好地确定应用程序中的错误是与 JavaScript 还是与 React\n 的更特定领域相关。\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">目标：</th>\n <td>要设置本地 React 开发环境，创建一个启动应用程序，并了解其工作原理</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"你好_react","title":"你好 React","isH3":false,"content":"<p>如其官方口号所示，<a href=\"https://reactjs.org/\" class=\"external\" target=\"_blank\">React</a> 是一个用于构建用户界面的库。React 不是一个框架——它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。例如，<a href=\"https://reactnative.dev/\" class=\"external\" target=\"_blank\">React Native</a> 可用于构建移动应用程序；<a href=\"https://facebook.github.io/react-360/\" class=\"external\" target=\"_blank\">React 360</a> 可用于构建虚拟现实应用程序……</p>\n<p>为了构建 Web 应用，开发人员将 React 与 <a href=\"https://reactjs.org/docs/react-dom.html\" class=\"external\" target=\"_blank\">ReactDOM 结合使用</a>。React 和 ReactDOM 通常被与其他真正的 Web 开发框架相提并论，并用于解决相同的问题。当我们将 React 称为“框架”时，就是在进行口语化的理解。</p>\n<p>React 的主要目标是最大程度地减少开发人员构建 UI 时发生的错误。它通过使用组件——描述部分用户界面的、自包含的逻辑代码段——来实现此目的。这些组件可以组合在一起以创建完整的 UI，React 将许多渲染工作进行抽象化，使你可以专注于 UI 设计 (译者注：显而易见，此设计不等于视觉稿的设计)。</p>"}},{"type":"prose","value":{"id":"用例","title":"用例","isH3":false,"content":"<p>与本模块中涵盖的其他框架不同，React 不会对代码约定或文件组织实施严格的规则。这使团队可以设置最适合自己的约定，并以他们希望的任何方式采用 React。React 可以处理一个按钮，一个界面的几个部分或应用程序的整个用户界面。</p>\n<p>尽管 React 可以用于<a href=\"https://reactjs.org/docs/add-react-to-a-website.html\" class=\"external\" target=\"_blank\">界面的小片段</a>中，但要和 jQuery 这样的库，甚至是像 Vue 这样的框架那样“引入”应用程序并不容易——当你使用 React 构建整个应用程序时更容易上手。</p>\n<p>另外，许多开发人员的经验对于 React 应用程序也是有用处的，例如使用 JSX 编写界面是需要编译过程的。在网站上添加类似于 Babel 的编译器会让网站上代码的运行速度变慢，因此开发人员通常会在构建项目的时候设置这样的工具。React 对于工具的要求可以说是很高的，但这是能够学习解决的。</p>\n<p>本文将重点介绍使用 React 通过 Facebook 的 <a href=\"https://create-react-app.dev/\" class=\"external\" target=\"_blank\">create-react-app</a> 内的工具渲染应用程序中整个用户界面的用例。</p>"}},{"type":"prose","value":{"id":"react_如何使用_javascript","title":"React 如何使用 JavaScript?","isH3":false,"content":"<p>React 中的许多模式都使用了现代 JavaScript 的功能。React 与 JavaScript 的最大区别在于 <a href=\"https://reactjs.org/docs/introducing-jsx.html\" class=\"external\" target=\"_blank\">JSX</a> 语法的使用上。JSX 是在 JavaScript 语法上的拓展，因此类似于 HTML 的代码可以和 JSX 共存。例如：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const heading = <h1>Mozilla Developer Network</h1>;\n</code></pre></div>\n<p>该 heading 常量称为 <strong>JSX 表达式</strong>。React 可以使用它在我们的应用程序中渲染 <a href=\"/zh-CN/docs/Web/HTML/Element/Heading_Elements\"><code><h1></code></a> 标签。</p>\n<p>假设出于语义原因，我们想将 heading 包装 <a href=\"/zh-CN/docs/Web/HTML/Element/header\"><code><header></code></a> 在标记中？JSX 方法允许我们将元素彼此嵌套，就像使用 HTML 一样：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const header = (\n <header>\n <h1>Mozilla Developer Network</h1>\n </header>\n);\n</code></pre></div>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>上一个代码段中的括号并非 JSX 的一部分，它对你的应用程序没有任何影响，括号只是用来向你（和你的计算机）表明其中的多行代码属于同一个表达式 (译者注：原文表述实在有点啰嗦)。因此上面的代码等同于：</p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">jsx</span></div><pre class=\"brush: jsx notranslate\"><code>const header = <header>\n <h1>Mozilla Developer Network</h1>\n</header>;\n</code></pre></div>\n <p>这看起来多少有点不适感，因为表达式前面的 <a href=\"/zh-CN/docs/Web/HTML/Element/header\"><code><header></code></a> 标记没有缩进与其对应的结束标记相同的位置。</p>\n</div>\n<p>浏览器是无法读取直接解析 JSX 的。我们的 header 表达式经过（ <a href=\"https://babeljs.io/\" class=\"external\" target=\"_blank\">Babel</a> 或 <a href=\"https://parceljs.org/\" class=\"external\" target=\"_blank\">Parcel</a> 之类的工具）编译之后是这样的：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const header = React.createElement(\n \"header\",\n null,\n React.createElement(\"h1\", null, \"Mozilla Developer Network\"),\n);\n</code></pre></div>\n<p><em>可以</em>跳过编译步骤，并使用 <a href=\"https://reactjs.org/docs/react-api.html#createelement\" class=\"external\" target=\"_blank\"><code>React.createElement()</code></a> 自己编写 UI。但是，这样做会失去 JSX 的声明性优势，并且代码变得更难以阅读。编译是开发过程中的一个额外步骤，但是 React 社区中的许多开发人员都认为 JSX 的可读性值得。另外，流行的工具使 JSX-to-JavaScript 编译成为其设置过程的一部分。除非你愿意，否则不必自己配置编译。</p>\n<p>由于 JSX 是 HTML 和 JavaScript 的结合，因此一些开发人员认为它很直观。其他人则说它的混合特性使它变得混乱。但是，一旦熟悉了它，它将使你能够更快，更直观地构建用户界面，并使其他人一眼就能更好地理解你的代码库。</p>\n<p>要阅读有关 JSX 的更多信息，请查看 React 团队的 <a href=\"https://reactjs.org/docs/jsx-in-depth.html\" class=\"external\" target=\"_blank\">JSX In Depth</a> 文章。</p>"}},{"type":"prose","value":{"id":"设置你的第一个_react_应用","title":"设置你的第一个 React 应用","isH3":false,"content":"<p>有很多使用 React 的方法，但是我们将使用命令行界面（CLI）工具 create-react-app，如前所述，该方法通过安装一些软件包并创建一些软件包来加快开发 React 应用程序的过程。文件供你处理上述工具。</p>\n<p>通过将一些 <a href=\"/zh-CN/docs/Web/HTML/Element/script\"><code><script></code></a> 元素复制到 HTML 文件中，可以在<a href=\"https://reactjs.org/docs/add-react-to-a-website.html\" class=\"external\" target=\"_blank\">没有 create-react-app 的情况下将 React 添加到网站</a>，但是 create-react-app CLI 是 React 应用程序的常见起点。使用它可以让你花费更多的时间来构建应用，而花更少的时间进行设置。</p>"}},{"type":"prose","value":{"id":"要求","title":"要求","isH3":true,"content":"<p>为了使用 create-react-app，你需要安装 <a href=\"https://nodejs.org/en/\" class=\"external\" target=\"_blank\">Node.js</a>。建议你使用长期支持（LTS）版本。Node 包括 npm（Node 程序包管理器）和 npx（Node 程序包运行器）</p>\n<p>你也可以使用 Yarn 软件包管理器作为替代方案，但是我们假设在这套教程中使用 npm。有关 npm 和 yarn 的更多信息，请参见<a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">程序包管理基础</a>。</p>\n<p>如果你使用的是 Windows，则需要安装一些软件以与 Unix/macOS 终端保持同等地位，才能使用本教程中提到的终端命令。<strong>Gitbash</strong>（作为 <a href=\"https://gitforwindows.org/\" class=\"external\" target=\"_blank\">git Windows 工具集</a>的一部分提供）或**<a href=\"https://docs.microsoft.com/en-us/windows/wsl/about\" class=\"external\" target=\"_blank\">适用于 Linux 的 Windows 子系统</a>**（<strong>WSL</strong>）均适用。有关这些以及一般终端命令的更多信息，请参见<a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">命令行速成课程</a>。</p>\n<p>还请记住，React 和 ReactDOM 生成的应用程序只能在相当现代的一组浏览器上运行——通过某些 polyfill 可以使用 IE9+。在阅读这些教程时，建议你使用 Firefox，Safari 或 Chrome 等现代浏览器。</p>\n<p>另外，有关更多信息，请参见以下内容：</p>\n<ul>\n <li><a href=\"https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/\" class=\"external\" target=\"_blank\">\"What is npm\" on nodejs.org</a></li>\n <li><a href=\"https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner\" class=\"external\" target=\"_blank\">\"Introducing npx\" on the npm blog</a></li>\n <li><a href=\"https://create-react-app.dev/\" class=\"external\" target=\"_blank\">The create-react-app documentation</a></li>\n</ul>"}},{"type":"prose","value":{"id":"初始化你的应用","title":"初始化你的应用","isH3":true,"content":"<p><code>create-react-app</code> ，该命令接受一个参数：即你想给自己的应用所起的名字。<code>create-react-app</code> 将为此应用创建一个同名的文件夹，并在其中创建所需文件。在你打算放置你的应用程序的文件夹下打开你的命令终端，并键入命令：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npx create-react-app moz-todo-react\n</code></pre></div>\n<p>这句命令创建了一个名为 <code>moz-todo-react</code> 的文件夹，并在此文件夹里做了如下工作：</p>\n<ul>\n <li>为你的应用程序安装了一些 npm 包；</li>\n <li>写入 react 应用启动所需要的脚本文件；</li>\n <li>创建一系列结构化的子文件夹和文件，奠定应用程序的基础架构；</li>\n <li>如果你的电脑上安装了 git 的话，顺便帮你把 git 仓库也建好。</li>\n</ul>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 <code>--use-npm</code> <strong>:</strong></p>\n <div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npx create-react-app moz-todo-react --use-npm\n</code></pre></div>\n</div>\n<p><code>create-react-app</code> 运行的时候会在终端上显示一些与其状态相关的信息，通常情况下无需为此担心。运行需要一点时间，在此期间你可以适度放松一下。</p>\n<p>处理完成之后，你可以 <code>cd</code> 到 <code>moz-todo-react</code> 文件夹下，然后键入 <code>npm start</code> 命令并回车，先前由 create-react-app 创建的脚本会启动一个地服务 <a href=\"localhost:3000\">localhost:3000</a>，并打开你的默认浏览器来访问这个服务。成功启动浏览器的话，你的浏览器上会显示如下画面：</p>\n<p>\n <img src=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started/default-create-react-app.png\" alt=\"Firefox MacOS 的屏幕截图，打开到 localhost：3000，显示了默认的 create-react-app 应用程序\" loading=\"lazy\">\n</p>"}},{"type":"prose","value":{"id":"应用结构","title":"应用结构","isH3":true,"content":"<p>create-react-app 提供了开发 React 应用所需的工具。它的初始文件结构如下：</p>\n<pre class=\"brush: plain notranslate\">moz-todo-react\n├── README.md\n├── node_modules\n├── package.json\n├── package-lock.json\n├── .gitignore\n├── public\n│ ├── favicon.ico\n│ ├── index.html\n│ └── manifest.json\n└── src\n ├── App.css\n ├── App.js\n ├── App.test.js\n ├── index.css\n ├── index.js\n ├── logo.svg\n └── serviceWorker.js\n</pre>\n<p>目录 <strong><code>src</code></strong> 是我们花费时间最多的地方，因为它是我们 React 应用源码存放的目录。</p>\n<p>目录 <strong><code>public</code></strong> 包含了开发应用时浏览器会读取的文件，其中最重要的就是 <code>index.html</code>。React 将目录 <strong><code>src</code></strong> 中的代码嵌入这个文件，从而浏览器才能运行此文件。 <code>index.html</code>中的有些内容关乎 create-react-app 的运作，因此除非你知道自己在做什么样的修改，否则不建议编辑这个文件。当然，你可以修改<code>index.html</code>中的 <a href=\"/zh-CN/docs/Web/HTML/Element/title\"><code><title></code></a> 元素的内容来表现此应用程序通俗易懂的名称。</p>\n<p>目录 <code>public</code> 会在建立并部署此应用的时候更新。此教程不涉及部署，你可以参考 <a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">Deploying our app</a> 这一篇教程。</p>\n<p>文件 <code>package.json</code> 包含了 Node.js/npm 为了建立该应用程序所管理着的文件信息。这个文件不是 React 应用独有的。你无需理解这个文件也能看懂这篇教程。不过，如果你想了解更多，你可以阅读 <a href=\"https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/\" class=\"external\" target=\"_blank\">What is the file <code>package.json</code>? on NodeJS.org</a> 和 <a href=\"/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">Package management basics</a>。</p>"}},{"type":"prose","value":{"id":"探索第一个_react_组件_—_app","title":"探索第一个 React 组件 — <code><App/></code>","isH3":false,"content":"<p>在 React 中，组件是组成应用程序的可重复利用的模块。组件可大可小，但它们都只有单一的、明确的功能。</p>\n<p>打开 <code>src/App.js</code>，之前打开的页面也提示我们对这个文件进行编辑。这个文件包含了我们第一个组件 <code>App</code>，内容如下：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import React from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./App.css\";\n\nfunction App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/App.js</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Learn React\n </a>\n </header>\n </div>\n );\n}\nexport default App;\n</code></pre></div>\n<p>文件 <code>App.js</code> 主要由三部分组成：顶部的 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Statements/import\"><code>import</code></a> 语句，中间的 <code>App</code> 组件，以及底部的 <a href=\"/zh-CN/docs/Web/JavaScript/Reference/Statements/export\"><code>export</code></a> 语句。大多数 React 组件都遵循这个模式。</p>"}},{"type":"prose","value":{"id":"import_语句","title":"import 语句","isH3":true,"content":"<p>脚本开头的 <code>import</code> 语句允许在此脚本中使用其他文件中的代码，让我们更进一步地了解这些语句。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import React from \"react\";\nimport logo from \"./logo.svg\";\nimport \"./App.css\";\n</code></pre></div>\n<p>第一句代码引入了 React 库，这是为了将代码中的 JSX 语句转为<code>React.createElement()</code>，所有的 React 模块都应该引入 React 模块，否则会抛错。</p>\n<p>第二句代码引入了 <code>'./logo.svg'</code>。注意文件路径以 <code>./</code> 开头、由 <code>.svg</code> 尾——表明这是一个本地文件，并且它不是 JavaScript 文件。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>我们没有指定 React 模块的路径——表明它并非来自本地文件，而是在 <code>package.json</code> 文件中列为依赖项。在整个学习过程中，请务必留心这两种引入方式的不同之处。</p>\n</div>\n<p>第三行引入了我们的组件所需的 CSS 文件。与上面两句不同，这里没有将引入的内容赋给任何变量、也没有用到 <code>from</code> 指令。请注意这种特殊的语法并非原生 JS 的语法——它源自前端资源打包工具 webpack，而 create-react-app 正是基于 webpack 配置而来的。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>译者补充：webpack 可用于打包 JS 和非 JS 的内容 (当然，非 JS 的内容需要一些插件或加载器来处理)，但是 JavaScript 标准只有关于 JS 的内容，所以 webpack 社区使用这种特殊的 <code>import</code> 语句来声明对非 JS 内容的引用。</p>\n <p>详情参见 webpack 官方和社区，截止目前 (2020 年下旬)，webpack 仍是现代前端工作中必不可少的技能之一。</p>\n</div>"}},{"type":"prose","value":{"id":"app_组件","title":"<code>App</code> 组件","isH3":true,"content":"<p>在 import 所需资源之后，我们定义了一个名为 App 的函数，尽管大部分 JavaScript 社区推崇使用驼峰式命名法，如：“helloWorld”。但 React 组件使用帕斯卡命名法，如“HelloWorld”，来帮助用户辨认一个 JSX 元素是 React 组件而非普通的 HTML 标签。如果你将函数名“App”改为“app”，你的浏览器会显示错误。</p>\n<p>让我们进一步看下 App 方法。</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>\n Edit <code>src/App.js</code> and save to reload.\n </p>\n <a\n className=\"App-link\"\n href=\"https://reactjs.org\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n Learn React\n </a>\n </header>\n </div>\n );\n}\n</code></pre></div>\n<p>App 方法返回一个 JSX 表达式，这个表达式定义了浏览器最终要渲染的 DOM。</p>\n<p>表达式中的元素就像以前写的 HTML 一样，都拥有属性，并且遵循 <code>attribute=\"value\"</code> 的模式。在第三行，开始标签 <a href=\"/zh-CN/docs/Web/HTML/Element/div\"><code><div></code></a> 有着 <code>className</code> 属性。这个属性与在 HTML 中的 <a href=\"/zh-CN/docs/Web/HTML/Global_attributes/class\"><code>class</code></a> 属性相同，但是由于 JSX 就是 JavaScript, 我们不能使用 <code>class</code> 属性 - 这个是关键字，意味着 JavaScript 已经用它执行其他任务，使用 <code>class</code> 属性将会在我们的代码中产生冲突。由于同样的原因，一些其他的 HTML 属性在 JSX 中也有着不同的书写方式，当我们碰到它们时，我们将会详述。</p>\n<p>把第 6 行的 <a href=\"/zh-CN/docs/Web/HTML/Element/p\"><code><p></code></a> 标签内容改为 \"Hello, world!\" 并保存文件。你会发现这个改变也会立即在浏览器的<code>http://localhost:3000</code> 中同步渲染。现在删掉 <a href=\"/zh-CN/docs/Web/HTML/Element/a\"><code><a></code></a> 标签并保存，\"Learn React\"链接也会同样被删除。</p>\n<p>你的 <code>App</code> 组件应该如下所示：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function App() {\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>Hello, World!</p>\n </header>\n </div>\n );\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"export_语句","title":"Export 语句","isH3":true,"content":"<p>在 <code>App.js</code> 文件的最底部， <code>export default App</code> 语句使得 <code>App</code> 组件能被其他模块使用。</p>"}},{"type":"prose","value":{"id":"interrogating_the_index","title":"Interrogating the index","isH3":false,"content":"<p>现在让我们打开 <code>src/index.js</code>, 因为这也是 <code>App</code> 组件被用到的地方。这个文件是我们 app 的入口点，在一开始它如下所示</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(<App />, document.getElementById(\"root\"));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n</code></pre></div>\n<p>就像 <code>App.js</code> 一样，这个文件一开始 import 了所有的 JS 模块和其他运行所需要的资源。<code>src/index.css</code>定义了运用于整个 app 的 global style。我们可以看到我们的 <code>App</code> 组件也被 imported 了，这是在 <code>App.js</code> 底部的语句让 import <code>App</code> 变得可行。</p>\n<p>第七行调用 React 的 <code>ReactDOM.render()</code> 函数，并传入两个参数：</p>\n<ul>\n <li>我们想要渲染的组件，在这个例子中是 <code><App /></code> .</li>\n <li>我们想要渲染组件所在的 DOM 元素，在这个例子中是带着 <code>root</code> 标签的元素。让我们看一下 <code>public/index.html</code> 的代码，可以看到这有一个 <code><div></code> 元素在 <code><body></code> 里。</li>\n</ul>\n<p>上述所有都告诉 React 我们想把 <code>App</code> 组件作为 root 或者第一个组件来渲染我们的 React App。</p>\n<div class=\"notecard note\">\n <p><strong>备注：</strong>在 JSX 中，React 组件和 HTML 元素必须有关闭斜杠（<code>/</code>），如 <code><App /></code>，如果我们写 <code><App></code> 或者 <code><img></code> 将会报错。</p>\n</div>\n<p><a href=\"/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers\">Service workers</a> 能让我们的 App 离线运行，但它不在本篇文章的范围中，你可以删除第 5 行和第 9 到 12 行。</p>\n<p>你最终的 <code>index.js</code> 文件应该如下所示：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\nimport App from \"./App\";\n\nReactDOM.render(<App />, document.getElementById(\"root\"));\n</code></pre></div>"}},{"type":"prose","value":{"id":"variables_and_props","title":"Variables and props","isH3":false,"content":"<p>接下来，我们将使用一些 JavaScript 的技巧来让我们在 React 中编辑组件以及处理数据更加顺手。我们将讨论如何在 JSX 中使用 variables，并且介绍 props，props 是我们用来往组件里传入数据的一种方法，传入之后我们可以用 variable 访问传入的变量。</p>"}},{"type":"prose","value":{"id":"variables_in_jsx","title":"Variables in JSX","isH3":true,"content":"<p>回到 <code>App.js</code>, 让我们看一下第 9 行：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code><img src={logo} className=\"App-logo\" alt=\"logo\" />\n</code></pre></div>\n<p>可以看到，<code><img /></code> 标签的 <code>src</code> 属性值是在大括号中的——<code>{logo}</code>。这是 JSX 识别变量的方式。React 将会识别 <code>{logo}</code>，知道你在我们 app 第二行引入的 logo，然后 React 会读取这个文件它并渲染。</p>\n<p>让我们试着设置一个我们自己的变量，在 <code>App</code> return 之前，添加 <code>const subject = 'React';</code>。你的代码现在应该如下所示：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function App() {\n const subject = \"React\";\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>Hello, World!</p>\n </header>\n </div>\n );\n}\n</code></pre></div>\n<p>把第 8 行的 \"world\" 替换成我们自己的变量 <code>subject</code> ，如下所示：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function App() {\n const subject = \"React\";\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <p>Hello, {subject}!</p>\n </header>\n </div>\n );\n}\n</code></pre></div>\n<p>当我们保存时，浏览器将会显示 \"Hello, React!\"，而不是 \"Hello, world!\"</p>\n<p>变量十分方便，但是我们没有利用到 React 的特性，接下来我们将介绍 Props。</p>"}},{"type":"prose","value":{"id":"component_props","title":"Component props","isH3":true,"content":"<p><strong>prop</strong> 是任何传入 React 组件的数据。Props 写在组件中，并且像 HTML 属性一样写成 <code>prop=\"value\"</code>。让我们打开 <code>index.js</code> 并且为我们的 <code><App/></code> 添加第一个 prop。</p>\n<p>为 <code><App/></code> 组件添加一个叫 <code>subject</code> 并有着 <code>Clarice</code> 值的 prop。当完成之后，你的代码应如下所示：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>ReactDOM.render(<App subject=\"Clarice\" />, document.getElementById(\"root\"));\n</code></pre></div>\n<p>回到 <code>App.js</code>，代码应该如下所示（return 中的内容省略了）</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function App() {\n const subject = \"React\";\n return (\n // return statement\n );\n}\n</code></pre></div>\n<p>改变 <code>App</code> 的函数签名，让它接收 <code>props</code> 作为一个参数。就像其他参数一样，你可以把 <code>props</code> 放在 <code>console.log()</code> 中，让其在浏览器打印出来。把它放在你的 <code>subject</code> 之后，以及 <code>return</code> 之前，你的代码应如下所示：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function App(props) {\n const subject = \"React\";\n console.log(props);\n return (\n // return statement\n );\n}\n</code></pre></div>\n<p>保存你的文件并检查你浏览器中的 JavaScript Console，你将会发现如下所示的语句：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>Object { subject: \"Clarice\" }\n</code></pre></div>\n<p>对象的 <code>subject</code> 属性与我们放入 <code>App</code> 函数签名的 prop 相对应，并且 <code>Clarice</code> 字符串与它的值相对应，在 React 中的组件 props 总是用这种方式传入 object 中。</p>\n<p>现在 <code>subject</code> 是我们的 props 之一了，让我们在 <code>App.js</code> 中使用它。用 <code>props.subject</code> 替代原本的 <code>React</code> 字符串，如果你想的话，也可以删除 <code>console.log()</code>，你的代码将如下所示：</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>function App(props) {\n const subject = props.subject;\n return (\n // return statement\n );\n}\n</code></pre></div>\n<p>当你保存之后，app 应该会输出 \"Hello, Clarice!\"。如果你回到 <code>index.js</code>，并且修改 <code>subject</code> 的值并保存，你输出的字也会随之改变。</p>"}},{"type":"prose","value":{"id":"总结","title":"总结","isH3":false,"content":"<p>以上就是我们对 React 的初步认识，包括如何在本地下载它，创建一个初始 app，以及一些基本的操作。在下篇文章，我们将会开始创建我们的第一个 app——一个任务清单。在我们开始下篇文章之前，让我们先复习下我们现在所学的。</p>\n<p>在 React 中：</p>\n<ul>\n <li>组件可以 import 它们需要的模块，并且在文件底部将自身 export，以让其他组件使用。</li>\n <li>组件是用 <code>PascalCase</code> 也就是帕斯卡命名法命名的。</li>\n <li>通过把变量放在大括号中，你可以读取 JSX 的变量，如<code>{so}</code></li>\n <li>一些 JSX 属性与 HTML 属性不相同，这样就不会与 JavaScript 的保留字相冲突，比如说，在 HTML 中的 <code>class</code> 会在 JSX 中转译为 <code>className</code>。注意这些属性都是驼峰式命名的。</li>\n <li>Props 就像属性一样写在组件里，并且传入组件。</li>\n</ul><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\"><span class=\"button-wrap\"> 上一页 </span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks\"><span class=\"button-wrap\"> 概述：理解客户端 JavaScript 框架</span></a></li>\n <li><a class=\"button secondary\" href=\"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\"><span class=\"button-wrap\"> 下一页 </span></a></li>\n</ul>"}}],"toc":[{"text":"你好 React","id":"你好_react"},{"text":"用例","id":"用例"},{"text":"React 如何使用 JavaScript?","id":"react_如何使用_javascript"},{"text":"设置你的第一个 React 应用","id":"设置你的第一个_react_应用"},{"text":"探索第一个 React 组件 — <code><App/></code>","id":"探索第一个_react_组件_—_app"},{"text":"Interrogating the index","id":"interrogating_the_index"},{"text":"Variables and props","id":"variables_and_props"},{"text":"总结","id":"总结"}],"summary":"本文会引导我们进入一段 React 学习之旅。我们将逐步了解有关它的背景和用例的一些细节，在自己的电脑上建起基本的 React 工具链，创建并使用一个简单的入门应用程序，以学习一些关于 React 在此过程中如何工作的知识。","popularity":0.002,"modified":"2024-08-27T09:31:07.000Z","other_translations":[{"locale":"de","title":"Einstieg in React","native":"Deutsch"},{"locale":"en-US","title":"Getting started with React","native":"English (US)"},{"locale":"es","title":"Primeros pasos en React","native":"Español"},{"locale":"fr","title":"Démarrer avec React","native":"Français"},{"locale":"ja","title":"React を始める","native":"日本語"},{"locale":"ko","title":"React 시작하기","native":"한국어"},{"locale":"pt-BR","title":"Começando com React","native":"Português (do Brasil)"},{"locale":"ru","title":"Начало работы с React","native":"Русский"},{"locale":"zh-TW","title":"React 新手入門","native":"正體中文 (繁體)"}],"pageType":"unknown","source":{"folder":"zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started","github_url":"https://github.com/mdn/translated-content/blob/main/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/4b048e302a8324ed40470e17b602ccbefc3c58c5","filename":"index.md"},"short_title":"React 入门","parents":[{"uri":"/zh-CN/docs/Learn","title":"学习 Web 开发"},{"uri":"/zh-CN/docs/Learn/Tools_and_testing","title":"工具和测试"},{"uri":"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks","title":"理解客户端 JavaScript 框架"},{"uri":"/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started","title":"React 入门"}],"pageTitle":"React 入门 - 学习 Web 开发 | MDN","noIndexing":false}}</script></body></html>