CINXE.COM
content/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md at main · mdn/content · GitHub
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-3e154969b9f9.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-9c5b7a476542.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-afda8eb0fb33.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-2494e44ccdc5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-56fff47acadc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-71cd4cc132ec.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-fd5499848985.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-31d17ba3e139.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-68d6b2c79663.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-4cf0d59ab51a.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-af846850481e.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-e41ff91f8baa.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-d3b66f11d613.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-1e3bbbee6b91.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-a0610fd00b47.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_new_references_ui","copilot_beta_features_opt_in","copilot_chat_static_thread_suggestions","copilot_conversational_ux_history_refs","copilot_implicit_context","copilot_smell_icebreaker_ux","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","hovercard_accessibility","issues_react_new_timeline","issues_react_avatar_refactor","issues_react_remove_placeholders","issues_react_cache_fix_workaround","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","remove_child_patch","report_hydro_web_vitals","sample_network_conn_type","site_metered_billing_update","issues_react_first_time_contribution_banner","jk_navigation_in_list_view","ui_commands_respect_modals","lifecycle_label_name_updates"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-118ecaabd77e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_js-b73fdff77a4e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-aff936e590ed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-247092-740e4ddd559d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-a46544e9ee5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-cd35650c2e9c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-4aa4b0e95669.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-6d3967acd51c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_combobox-nav_dist_index_js-node_modules_github_g-emoji-element_di-6ce195-53781cbc550f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-6afc16-3cdfa69a0406.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-f5498b8d4e5d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-492b5042c841.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-1f651a-1e3d784c897c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-7671f1-dc6cac136d88.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-71486356f507.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-e3ab8405ef80.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-634de60bacfa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-ce7225a304c5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-f3aee1-e6893db9c19e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-f8a5485c982a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-858e043fcf76.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-6cf3320416b8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_scroll-anchoring_dist_scroll-anchoring_esm_js-node_modules_stacktrace-pa-a71630-6f3c4f0189d8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-0e07cc183eed.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-0b5e12-889cec8cf448.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-eae9df0dd562.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-18d1c91a7872.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-7cbef09a422c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-d0d0a6-0e9fa537dc4f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-c89801ebbe15.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-93287f4de493.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-3366f6b6298e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_catalyst_lib_inde-dbbea9-9b97703a4e6a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/code-menu-3118a76a2829.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-54c0c921f04b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__Stack_js-node_modules_lodash-es__Uint8Array_js-node_modules_l-4faaa6-13a0602a5edf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__baseIsEqual_js-8929eb9718d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-9002b0-8e5e346f0cbe.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_aria-live_aria-live_ts-ui_packages_promise-with-resolvers-polyfill_promise-with-r-014121-e1792bd5a31e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-193243317670.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ref-selector_RefSelector_tsx-7a75d9f22fe9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_utilities_web-worker_ts-ui_packages_code-view-shared_worker-jobs-7fe572-0d8f4a2976ee.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_hydro-analytics_hydro-analytics_ts-ui_packages_verified-fetch_verified-fetch_ts-u-4672d1-0996d093463a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-canonical-object_ts-ui_packages_code-view-shared_utili-228da6-37a4eeff405d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_code-view-shared_hooks_use-file-page-payload_ts-ui_packages_code-view-shared_comp-1beb66-b07e414af699.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_blob-anchor_ts-ui_packages_code-nav_code-nav_ts-ui_packages_filter--8253c1-87c39cb5708f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-code-view-6462e4b9d310.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/react-code-view.6b587a69b593e23c3657.module.css" /> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-765944243383.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-cd0a67881543.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-7b7b5264f6c1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-45c3a19dd792.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-54c0c921f04b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-285fc29e9fa5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-4896ddd4b7bb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-1490f5bef85d.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>content/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md at main · mdn/content · GitHub</title> <meta name="route-pattern" content="/:user_id/:repository/blob/*name(/*path)" data-turbo-transient> <meta name="route-controller" content="blob" data-turbo-transient> <meta name="route-action" content="show" data-turbo-transient> <meta name="current-catalog-service-hash" content="f3abb0cc802f3d7b95fc8762b94bdcb13bf39634c40c357301c4aa1d67a256fb"> <meta name="request-id" content="BF28:7D90D:1D7321:21CA60:67424422" data-pjax-transient="true"/><meta name="html-safe-nonce" content="1d6bc4dd90a54ac902f8fc59864cff613ee36e2c532f5d85b5059c10fc1113c4" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJCRjI4OjdEOTBEOjFENzMyMToyMUNBNjA6Njc0MjQ0MjIiLCJ2aXNpdG9yX2lkIjoiODMyNjMyOTkzNjU1ODMxMDQzNCIsInJlZ2lvbl9lZGdlIjoic291dGhlYXN0YXNpYSIsInJlZ2lvbl9yZW5kZXIiOiJzb3V0aGVhc3Rhc2lhIn0=" data-pjax-transient="true"/><meta name="visitor-hmac" content="ce2b839f761e9d5330eb4ce8f398785036b11406bdd8ca9d69087085567bb1ac" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="repository:295774370" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,source-code,file-tree,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_source" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>/blob/show" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="The content behind MDN Web Docs. Contribute to mdn/content development by creating an account on GitHub."> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1" /> <meta name="twitter:image" content="https://repository-images.githubusercontent.com/295774370/04bd602b-75be-4b18-9a6d-c2c7ec570e18" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="content/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md at main · mdn/content" /><meta name="twitter:description" content="The content behind MDN Web Docs. Contribute to mdn/content development by creating an account on GitHub." /> <meta property="og:image" content="https://repository-images.githubusercontent.com/295774370/04bd602b-75be-4b18-9a6d-c2c7ec570e18" /><meta property="og:image:alt" content="The content behind MDN Web Docs. Contribute to mdn/content development by creating an account on GitHub." /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="content/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md at main · mdn/content" /><meta property="og:url" content="https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md" /><meta property="og:description" content="The content behind MDN Web Docs. Contribute to mdn/content development by creating an account on GitHub." /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="272935131c2027f789efabd5bf30904ffaea35908a22afd03d8f75128cee7e1b" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="ace39c3b6632770952207593607e6e0be0db363435a8b877b1f96abe6430f345" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="8968ee26e93ec8c6d3c4e91c77fb9d206091689d451ebbcddeca3832587a5b30" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="c4972ae1cf5d4607c47252349fc1b47a24ff0ea303e5a8fbbe18ec27725a87ee" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta name="turbo-cache-control" content="no-cache" data-turbo-transient> <meta data-hydrostats="publish"> <meta name="go-import" content="github.com/mdn/content git https://github.com/mdn/content.git"> <meta name="octolytics-dimension-user_id" content="7565578" /><meta name="octolytics-dimension-user_login" content="mdn" /><meta name="octolytics-dimension-repository_id" content="295774370" /><meta name="octolytics-dimension-repository_nwo" content="mdn/content" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="295774370" /><meta name="octolytics-dimension-repository_network_root_nwo" content="mdn/content" /> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-d25fac54a6bc.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-ed30662f9578.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.9fa170e9435ed4b922b9.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-cf3dd69d89eb.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-8fa3b694f335.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn%2Ftools_and_testing%2Fclient-side_javascript_frameworks%2Fmain_features%2Findex.md%3Fplain%3D1" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1","user_id":null}}" data-hydro-click-hmac="c64fad6da2b7062821a711f82e88d7f4a3171522f1fb10f01e900048a9680a3d" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"security","context":"product","tag":"link","label":"security_link_product_navbar"}" href="https://github.com/features/security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"white_papers_ebooks_webinars","context":"resources","tag":"link","label":"white_papers_ebooks_webinars_link_resources_navbar"}" href="https://resources.github.com"> White papers, Ebooks, Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"advanced_security","context":"enterprise","tag":"link","label":"advanced_security_link_enterprise_navbar"}" href="https://github.com/enterprise/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"enterprise","tag":"link","label":"github_copilot_link_enterprise_navbar"}" href="/features/copilot#enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:mdn/content" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="twPZ6X3Xwi0fbrfKLudw1ympp71oqD1gvRO1TL9XoigD4AamjN8cb3UJtLMsue2f7GIgYDTUwjOiaFhC6G2X3A" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="mdn/content" data-current-org="mdn" data-current-owner="" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-34491d9f-2c38-4e0d-a2fa-0e82e8fd8d7a" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-34491d9f-2c38-4e0d-a2fa-0e82e8fd8d7a" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2"> Search syntax tips </a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="Y5JY1n/lBGpxtWtgMGWj4b02LRstmi9txoclcNDcy5i8W+n5VdHFTGlKb/TjrEhv5ofx7Qdn8cL0r/h7DgGc6g==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="zC1SIP0A2KO3Zy7AXB4OE7BmlLHTXC4Q1meg3T8SrSSzR0M4CcH2HGuNfNHSdOBdnnevsUyyAbPcZuFnde72uw==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="22fh7KXHYwk4sQC1hszrwZbdp1T5s5mQpyLutT1Og/ykj1foJwB/4oa6PfdxsTvqGlMnJOksjz7oyV9OVP/wzg==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn%2Ftools_and_testing%2Fclient-side_javascript_frameworks%2Fmain_features%2Findex.md%3Fplain%3D1" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1","user_id":null}}" data-hydro-click-hmac="c64fad6da2b7062821a711f82e88d7f4a3171522f1fb10f01e900048a9680a3d" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fblob%2Fshow&source=header-repo&source_repo=mdn%2Fcontent" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1","user_id":null}}" data-hydro-click-hmac="c64fad6da2b7062821a711f82e88d7f4a3171522f1fb10f01e900048a9680a3d" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/blob/show;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-1d27ceda-9689-4f0b-8abc-dc97737c46ef" aria-labelledby="tooltip-66fc7ee0-f7e3-423a-8823-3319d48cf6a2" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-66fc7ee0-f7e3-423a-8823-3319d48cf6a2" for="icon-button-1d27ceda-9689-4f0b-8abc-dc97737c46ef" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/mdn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/mdn"> mdn </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/mdn/content">content</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <a href="/login?return_to=%2Fmdn%2Fcontent" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1","user_id":null}}" data-hydro-click-hmac="e1456fc93d9e9f6543aca85ce68cfe1d867209e011642ea1002fac0c3c3e2a34" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-34d5c89b-15d9-44b6-9663-3680aa884306" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Fmdn%2Fcontent" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":295774370,"auth_type":"LOG_IN","originating_url":"https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1","user_id":null}}" data-hydro-click-hmac="d1452265d87e9dba90ced077e196cfdc2e8a9de656ede7b0fbf31456e4903339" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="22,497" data-view-component="true" class="Counter">22.5k</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Fmdn%2Fcontent" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":295774370,"auth_type":"LOG_IN","originating_url":"https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1","user_id":null}}" data-hydro-click-hmac="b957014d48377e4f3e6589a7ab70541576d7ff29ace7372a0494095ea41cf9a8" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="9227 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="9,227" data-view-component="true" class="Counter js-social-count">9.2k</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/mdn/content" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /mdn/content" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/mdn/content/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /mdn/content/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="474" data-view-component="true" class="Counter">474</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/mdn/content/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /mdn/content/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="74" data-view-component="true" class="Counter">74</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/mdn/content/actions" data-tab-item="i3actions-tab" data-selected-links="repo_actions /mdn/content/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> <span data-content="Actions">Actions</span> <span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="projects-tab" href="/mdn/content/projects" data-tab-item="i4projects-tab" data-selected-links="repo_projects new_repo_project repo_project /mdn/content/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> <span data-content="Projects">Projects</span> <span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/mdn/content/security" data-tab-item="i5security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /mdn/content/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/mdn/content/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/mdn/content/pulse" data-tab-item="i6insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /mdn/content/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-button" popovertarget="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-overlay" aria-controls="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-list" aria-haspopup="true" aria-labelledby="tooltip-561c07e3-4c5e-4037-af8c-9514b85035a1" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-561c07e3-4c5e-4037-af8c-9514b85035a1" for="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position id="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-overlay" anchor="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-button" id="action-menu-69846812-4335-4cf8-8a89-e6b45579cc7a-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-64ee80c9-28a7-42c3-b4fa-f62a723f41a0" href="/mdn/content" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-01ef47a9-ef41-446a-8727-5ab637477592" href="/mdn/content/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-9af5c46f-7662-4b6e-90f0-9eb021c5ea42" href="/mdn/content/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-fceb713f-95c7-4f39-9225-d52690e22057" href="/mdn/content/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i4projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-4775651f-9a6d-4569-ab39-034b4a63a0c1" href="/mdn/content/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i5security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-3c42b24a-a71c-4aec-a0f8-7106fa077364" href="/mdn/content/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i6insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-c7ff7238-82f7-4d54-b6c7-d3a26a1d5586" href="/mdn/content/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <react-app app-name="react-code-view" initial-path="/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1" style="display: block; min-height: calc(100vh - 64px);" data-attempted-ssr="true" data-ssr="true" data-lazy="false" data-alternate="false" > <script type="application/json" data-target="react-app.embeddedData">{"payload":{"allShortcutsEnabled":false,"fileTree":{"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features":{"items":[{"name":"index.md","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md","contentType":"file"}],"totalCount":1},"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks":{"items":[{"name":"angular_building","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_building","contentType":"directory"},{"name":"angular_filtering","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_filtering","contentType":"directory"},{"name":"angular_getting_started","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started","contentType":"directory"},{"name":"angular_item_component","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_item_component","contentType":"directory"},{"name":"angular_styling","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling","contentType":"directory"},{"name":"angular_todo_list_beginning","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning","contentType":"directory"},{"name":"ember_conditional_footer","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_conditional_footer","contentType":"directory"},{"name":"ember_getting_started","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_getting_started","contentType":"directory"},{"name":"ember_interactivity_events_state","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_interactivity_events_state","contentType":"directory"},{"name":"ember_resources","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_resources","contentType":"directory"},{"name":"ember_routing","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing","contentType":"directory"},{"name":"ember_structure_componentization","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_structure_componentization","contentType":"directory"},{"name":"introduction","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/introduction","contentType":"directory"},{"name":"main_features","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features","contentType":"directory"},{"name":"react_accessibility","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility","contentType":"directory"},{"name":"react_components","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components","contentType":"directory"},{"name":"react_getting_started","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started","contentType":"directory"},{"name":"react_interactivity_events_state","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state","contentType":"directory"},{"name":"react_interactivity_filtering_conditional_rendering","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering","contentType":"directory"},{"name":"react_resources","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources","contentType":"directory"},{"name":"react_todo_list_beginning","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning","contentType":"directory"},{"name":"svelte_components","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components","contentType":"directory"},{"name":"svelte_deployment_next","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next","contentType":"directory"},{"name":"svelte_getting_started","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started","contentType":"directory"},{"name":"svelte_reactivity_lifecycle_accessibility","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility","contentType":"directory"},{"name":"svelte_stores","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores","contentType":"directory"},{"name":"svelte_todo_list_beginning","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning","contentType":"directory"},{"name":"svelte_typescript","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript","contentType":"directory"},{"name":"svelte_variables_props","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props","contentType":"directory"},{"name":"vue_computed_properties","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_computed_properties","contentType":"directory"},{"name":"vue_conditional_rendering","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_conditional_rendering","contentType":"directory"},{"name":"vue_first_component","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_first_component","contentType":"directory"},{"name":"vue_getting_started","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started","contentType":"directory"},{"name":"vue_methods_events_models","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models","contentType":"directory"},{"name":"vue_refs_focus_management","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_refs_focus_management","contentType":"directory"},{"name":"vue_rendering_lists","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_rendering_lists","contentType":"directory"},{"name":"vue_resources","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_resources","contentType":"directory"},{"name":"vue_styling","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_styling","contentType":"directory"},{"name":"index.md","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/index.md","contentType":"file"}],"totalCount":39},"files/en-us/learn/tools_and_testing":{"items":[{"name":"client-side_javascript_frameworks","path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks","contentType":"directory"},{"name":"cross_browser_testing","path":"files/en-us/learn/tools_and_testing/cross_browser_testing","contentType":"directory"},{"name":"github","path":"files/en-us/learn/tools_and_testing/github","contentType":"directory"},{"name":"understanding_client-side_tools","path":"files/en-us/learn/tools_and_testing/understanding_client-side_tools","contentType":"directory"},{"name":"index.md","path":"files/en-us/learn/tools_and_testing/index.md","contentType":"file"}],"totalCount":5},"files/en-us/learn":{"items":[{"name":"accessibility","path":"files/en-us/learn/accessibility","contentType":"directory"},{"name":"common_questions","path":"files/en-us/learn/common_questions","contentType":"directory"},{"name":"css","path":"files/en-us/learn/css","contentType":"directory"},{"name":"forms","path":"files/en-us/learn/forms","contentType":"directory"},{"name":"getting_started_with_the_web","path":"files/en-us/learn/getting_started_with_the_web","contentType":"directory"},{"name":"html","path":"files/en-us/learn/html","contentType":"directory"},{"name":"javascript","path":"files/en-us/learn/javascript","contentType":"directory"},{"name":"learning_and_getting_help","path":"files/en-us/learn/learning_and_getting_help","contentType":"directory"},{"name":"mathml","path":"files/en-us/learn/mathml","contentType":"directory"},{"name":"performance","path":"files/en-us/learn/performance","contentType":"directory"},{"name":"server-side","path":"files/en-us/learn/server-side","contentType":"directory"},{"name":"tools_and_testing","path":"files/en-us/learn/tools_and_testing","contentType":"directory"},{"name":"index.md","path":"files/en-us/learn/index.md","contentType":"file"}],"totalCount":13},"files/en-us":{"items":[{"name":"games","path":"files/en-us/games","contentType":"directory"},{"name":"glossary","path":"files/en-us/glossary","contentType":"directory"},{"name":"learn","path":"files/en-us/learn","contentType":"directory"},{"name":"mdn","path":"files/en-us/mdn","contentType":"directory"},{"name":"mozilla","path":"files/en-us/mozilla","contentType":"directory"},{"name":"related","path":"files/en-us/related","contentType":"directory"},{"name":"web","path":"files/en-us/web","contentType":"directory"},{"name":"webassembly","path":"files/en-us/webassembly","contentType":"directory"},{"name":"_redirects.txt","path":"files/en-us/_redirects.txt","contentType":"file"},{"name":"_wikihistory.json","path":"files/en-us/_wikihistory.json","contentType":"file"}],"totalCount":10},"files":{"items":[{"name":"en-us","path":"files/en-us","contentType":"directory"},{"name":"jsondata","path":"files/jsondata","contentType":"directory"},{"name":"sidebars","path":"files/sidebars","contentType":"directory"}],"totalCount":3},"":{"items":[{"name":".github","path":".github","contentType":"directory"},{"name":".husky","path":".husky","contentType":"directory"},{"name":".vscode","path":".vscode","contentType":"directory"},{"name":"files","path":"files","contentType":"directory"},{"name":"scripts","path":"scripts","contentType":"directory"},{"name":"tests","path":"tests","contentType":"directory"},{"name":".editorconfig","path":".editorconfig","contentType":"file"},{"name":".gitattributes","path":".gitattributes","contentType":"file"},{"name":".gitignore","path":".gitignore","contentType":"file"},{"name":".gitpod.yml","path":".gitpod.yml","contentType":"file"},{"name":".lintstagedrc.js","path":".lintstagedrc.js","contentType":"file"},{"name":".markdownlint-cli2.jsonc","path":".markdownlint-cli2.jsonc","contentType":"file"},{"name":".markdownlint.jsonc","path":".markdownlint.jsonc","contentType":"file"},{"name":".nvmrc","path":".nvmrc","contentType":"file"},{"name":".prettierignore","path":".prettierignore","contentType":"file"},{"name":".prettierrc.json","path":".prettierrc.json","contentType":"file"},{"name":"CODE_OF_CONDUCT.md","path":"CODE_OF_CONDUCT.md","contentType":"file"},{"name":"CONTRIBUTING.md","path":"CONTRIBUTING.md","contentType":"file"},{"name":"LICENSE.md","path":"LICENSE.md","contentType":"file"},{"name":"README.md","path":"README.md","contentType":"file"},{"name":"REVIEWING.md","path":"REVIEWING.md","contentType":"file"},{"name":"front-matter-config.json","path":"front-matter-config.json","contentType":"file"},{"name":"jest.config.json","path":"jest.config.json","contentType":"file"},{"name":"package.json","path":"package.json","contentType":"file"},{"name":"yarn.lock","path":"yarn.lock","contentType":"file"}],"totalCount":25}},"fileTreeProcessingTime":22.512111,"foldersToFetch":[],"repo":{"id":295774370,"defaultBranch":"main","name":"content","ownerLogin":"mdn","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2020-09-15T15:42:29.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/7565578?v=4","public":true,"private":false,"isOrgOwned":true},"codeLineWrapEnabled":false,"symbolsExpanded":false,"treeExpanded":true,"refInfo":{"name":"main","listCacheKey":"v0:1732265723.0","canEdit":false,"refType":"branch","currentOid":"46dd9c0c1635e8abd73040c1a71cc0ed3c27cd50"},"path":"files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md","currentUser":null,"blob":{"rawLines":["---","title: Framework main features","slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","page-type: learn-module-chapter","---","","{{LearnSidebar}}{{PreviousMenuNext(\"Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\",\"Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\", \"Learn/Tools_and_testing/Client-side_JavaScript_frameworks\")}}","","Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of \"the big 4\" frameworks, looking at how frameworks tend to work from a high level, and the differences between them.","","\u003ctable\u003e"," \u003ctbody\u003e"," \u003ctr\u003e"," \u003cth scope=\"row\"\u003ePrerequisites:\u003c/th\u003e"," \u003ctd\u003e"," Familiarity with the core \u003ca href=\"/en-US/docs/Learn/HTML\"\u003eHTML\u003c/a\u003e,"," \u003ca href=\"/en-US/docs/Learn/CSS\"\u003eCSS\u003c/a\u003e, and"," \u003ca href=\"/en-US/docs/Learn/JavaScript\"\u003eJavaScript\u003c/a\u003e languages."," \u003c/td\u003e"," \u003c/tr\u003e"," \u003ctr\u003e"," \u003cth scope=\"row\"\u003eObjective:\u003c/th\u003e"," \u003ctd\u003eTo understand the main code features of frameworks.\u003c/td\u003e"," \u003c/tr\u003e"," \u003c/tbody\u003e","\u003c/table\u003e","","## Domain-specific languages","","All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of **JSX** for writing its components, while Ember utilizes **Handlebars**. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI.","","Angular apps often make heavy use of **TypeScript**. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.","","DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. [Transformation is an extra step in the development process](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#transformation), but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.","","### JSX","","[JSX](https://react.dev/learn/writing-markup-with-jsx), which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance.","","The following shows a simple JSX example:","","```jsx","const subject = \"World\";","const header = ("," \u003cheader\u003e"," \u003ch1\u003eHello, {subject}!\u003c/h1\u003e"," \u003c/header\u003e",");","```","","This expression represents an HTML [`\u003cheader\u003e`](/en-US/docs/Web/HTML/Element/header) element with an [`\u003ch1\u003e`](/en-US/docs/Web/HTML/Element/Heading_Elements) element inside. The curly braces around `{subject}` tell the application to read the value of the `subject` constant and insert it into our `\u003ch1\u003e`.","","When used with React, the JSX from the previous snippet would be compiled into this:","","```js","const subject = \"World\";","const header = React.createElement("," \"header\","," null,"," React.createElement(\"h1\", null, \"Hello, \", subject, \"!\"),",");","```","","When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:","","```html","\u003cheader\u003e"," \u003ch1\u003eHello, World!\u003c/h1\u003e","\u003c/header\u003e","```","","### Handlebars","","The [Handlebars](https://handlebarsjs.com/) templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds.","","Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair.","","Given this Handlebars template:","","```html","\u003cheader\u003e"," \u003ch1\u003eHello, \\{{subject}}!\u003c/h1\u003e","\u003c/header\u003e","```","","And this data:","","```js","{"," subject: \"World\";","}","```","","Handlebars will build HTML like this:","","```html","\u003cheader\u003e"," \u003ch1\u003eHello, World!\u003c/h1\u003e","\u003c/header\u003e","```","","### TypeScript","","[TypeScript](https://www.typescriptlang.org/) is a _superset_ of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function `add()`, which takes integers `a` and `b` and returns their sum.","","In JavaScript, that function could be written like this:","","```js","function add(a, b) {"," return a + b;","}","```","","This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the `+` operator to concatenate strings together, so this function would technically still work if `a` and `b` were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:","","```ts","function add(a: number, b: number) {"," return a + b;","}","```","","The `: number` written after each parameter here tells TypeScript that both `a` and `b` must be numbers. If we were to use this function and pass `'2'` into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.","","## Writing components","","As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML.","","Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.","","The code snippets in the rest of this section will use React as an example, and are written with JSX.","","### Properties","","Properties, or **props**, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an `AuthorCredit` component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, `AuthorCredit` needs to accept some props.","","A React representation of this `AuthorCredit` component might look something like this:","","```jsx","function AuthorCredit(props) {"," return ("," \u003cfigure\u003e"," \u003cimg src={props.src} alt={props.alt} /\u003e"," \u003cfigcaption\u003e{props.byline}\u003c/figcaption\u003e"," \u003c/figure\u003e"," );","}","```","","`{props.src}`, `{props.alt}`, and `{props.byline}` represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):","","```jsx","\u003cAuthorCredit"," src=\"./assets/zelda.png\""," alt=\"Portrait of Zelda Schiff\""," byline=\"Zelda Schiff is editor-in-chief of the Library Times.\"","/\u003e","```","","This will ultimately render the following [`\u003cfigure\u003e`](/en-US/docs/Web/HTML/Element/figure) element in the browser, with its structure as defined in the `AuthorCredit` component, and its content as defined in the props included on the `AuthorCredit` component call:","","```html","\u003cfigure\u003e"," \u003cimg src=\"assets/zelda.png\" alt=\"Portrait of Zelda Schiff\" /\u003e"," \u003cfigcaption\u003eZelda Schiff is editor-in-chief of the Library Times.\u003c/figcaption\u003e","\u003c/figure\u003e","```","","### State","","We talked about the concept of **state** in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered.","","As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own _count_ state, and could be written like this:","","```jsx","function CounterButton() {"," const [count] = useState(0);"," return \u003cbutton\u003eClicked {count} times\u003c/button\u003e;","}","```","","[`useState()`](https://react.dev/reference/react/useState) is a **[React hook](https://react.dev/reference/react)** which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:","","```html","\u003cbutton\u003eClicked 0 times\u003c/button\u003e","```","","The `useState()` call keeps track of the `count` value in a robust way across the app, without you needing to write code to do that yourself.","","### Events","","In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.","","In React, listening for the [`click`](/en-US/docs/Web/API/Element/click_event) event requires a special property, `onClick`. Let's update our `CounterButton` code from above to allow it to count clicks:","","```jsx","function CounterButton() {"," const [count, setCount] = useState(0);"," return ("," \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eClicked {count} times\u003c/button\u003e"," );","}","```","","In this version we are using additional `useState()` functionality to create a special `setCount()` function, which we can invoke to update the value of `count`. We call this function inside the `onClick` event handler to set `count` to whatever its current value is, plus one.","","## Styling components","","Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework's approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in [Sass](https://sass-lang.com/) or [Less](https://lesscss.org/), or transpile your CSS stylesheets with [PostCSS](https://postcss.org/).","","## Handling dependencies","","All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard [JavaScript module syntax](/en-US/docs/Web/JavaScript/Guide/Modules), or at least something similar.","","### Components in components","","One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components.","","For example, our `AuthorCredit` React component might be utilized inside an `Article` component. That means that `Article` would need to import `AuthorCredit`.","","```js","import AuthorCredit from \"./components/AuthorCredit\";","```","","Once that's done, `AuthorCredit` could be used inside the `Article` component like this:","","```jsx","\u003cArticle\u003e"," \u003cAuthorCredit /\u003e","\u003c/Article\u003e","```","","### Dependency injection","","Real-world applications can often involve component structures with multiple levels of nesting. An `AuthorCredit` component nested many levels deep might, for some reason, need data from the very root level of our application.","","Let's say that the magazine site we're building is structured like this:","","```jsx","\u003cApp\u003e"," \u003cHome\u003e"," \u003cArticle\u003e"," \u003cAuthorCredit {/* props */} /\u003e"," \u003c/Article\u003e"," \u003c/Home\u003e","\u003c/App\u003e","```","","Our `App` component has data that our `AuthorCredit` component needs. We could rewrite `Home` and `Article` so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: `Home` and `Article` don't actually make use of the author's portrait or byline, but if we want to get that information into the `AuthorCredit`, we will need to change `Home` and `Article` to accommodate it.","","The problem of passing data through many layers of components is called prop drilling, and it's not ideal for large applications.","","To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same.","","Angular calls this process [dependency injection](https://angular.io/guide/dependency-injection); Vue has [`provide()` and `inject()` component methods](https://v2.vuejs.org/v2/api/#provide-inject); React has a [Context API](https://react.dev/learn/passing-data-deeply-with-context); Ember shares state through [services](https://guides.emberjs.com/release/services/).","","### Lifecycle","","In the context of a framework, a component's **lifecycle** is a collection of phases a component goes through from the time it is appended to the DOM and then rendered by the browser (often called _mounting_) to the time that it is removed from the DOM (often called _unmounting_). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component _mounts_, when it _renders_, when it _unmounts_, and at many phases in between these.","","The _render_ phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what's there.","","This [diagram of a React component's lifecycle](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) offers a general overview of the concept.","","## Rendering elements","","Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they're known for.","","The **Virtual DOM** is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the \"real\" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a \"diff\" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.","","You can [read more about the Virtual DOM in the React docs](https://legacy.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom).","","The **Incremental DOM** is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM.","","You can [read more about the Incremental DOM on the Auth0 blog](https://auth0.com/blog/incremental-dom/).","","The **Glimmer VM** is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of \"byte code\" that is easier and faster to read than JavaScript.","","## Routing","","As [mentioned in the previous chapter, routing](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#routing) is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.","","## Testing","","All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.","","Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.","","[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/).","","Here's a quick test for our `CounterButton` written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:","","```jsx","import { fireEvent, render, screen } from \"@testing-library/react\";","","import CounterButton from \"./CounterButton\";","","it(\"Renders a semantic button with an initial state of 0\", () =\u003e {"," render(\u003cCounterButton /\u003e);"," const btn = screen.getByRole(\"button\");",""," expect(btn).toBeInTheDocument();"," expect(btn).toHaveTextContent(\"Clicked 0 times\");","});","","it(\"Increments the count when clicked\", () =\u003e {"," render(\u003cCounterButton /\u003e);"," const btn = screen.getByRole(\"button\");",""," fireEvent.click(btn);"," expect(btn).toHaveTextContent(\"Clicked 1 times\");",""," fireEvent.click(btn);"," expect(btn).toHaveTextContent(\"Clicked 2 times\");","});","```","","## Summary","","At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you're enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:","","- [React](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)","- [Ember](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)","- [Vue](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)","- [Svelte](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)","- [Angular](/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)","","{{PreviousMenuNext(\"Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\",\"Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\", \"Learn/Tools_and_testing/Client-side_JavaScript_frameworks\")}}"],"stylingDirectives":[[{"s":0,"e":3,"c":"pl-s"}],[{"s":0,"e":5,"c":"pl-ent"},{"s":7,"e":30,"c":"pl-s"}],[{"s":0,"e":4,"c":"pl-ent"},{"s":6,"e":77,"c":"pl-s"}],[{"s":0,"e":9,"c":"pl-ent"},{"s":11,"e":31,"c":"pl-s"}],[{"s":0,"e":3,"c":"pl-s"}],[],[],[],[],[],[{"s":1,"e":6,"c":"pl-ent"}],[{"s":3,"e":8,"c":"pl-ent"}],[{"s":4,"e":8,"c":"pl-c1"}],[{"s":4,"e":41,"c":"pl-c1"}],[{"s":4,"e":10,"c":"pl-c1"}],[{"s":4,"e":76,"c":"pl-c1"}],[{"s":4,"e":52,"c":"pl-c1"}],[{"s":4,"e":72,"c":"pl-c1"}],[{"s":4,"e":11,"c":"pl-c1"}],[{"s":4,"e":9,"c":"pl-c1"}],[{"s":4,"e":8,"c":"pl-c1"}],[{"s":4,"e":37,"c":"pl-c1"}],[{"s":4,"e":66,"c":"pl-c1"}],[{"s":4,"e":9,"c":"pl-c1"}],[{"s":4,"e":9,"c":"pl-ent"}],[{"s":2,"e":7,"c":"pl-ent"}],[],[{"s":0,"e":28,"c":"pl-mh"},{"s":3,"e":28,"c":"pl-en"}],[],[{"s":217,"e":219,"c":"pl-s"},{"s":222,"e":224,"c":"pl-s"},{"s":274,"e":276,"c":"pl-s"},{"s":286,"e":288,"c":"pl-s"}],[],[{"s":37,"e":39,"c":"pl-s"},{"s":49,"e":51,"c":"pl-s"}],[],[{"s":100,"e":101,"c":"pl-s"},{"s":159,"e":160,"c":"pl-s"},{"s":160,"e":161,"c":"pl-s"},{"s":161,"e":252,"c":"pl-corl"},{"s":252,"e":253,"c":"pl-s"}],[],[{"s":0,"e":7,"c":"pl-mh"},{"s":4,"e":7,"c":"pl-en"}],[],[{"s":0,"e":1,"c":"pl-s"},{"s":4,"e":5,"c":"pl-s"},{"s":5,"e":6,"c":"pl-s"},{"s":6,"e":53,"c":"pl-corl"},{"s":53,"e":54,"c":"pl-s"}],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":5,"c":"pl-k"},{"s":6,"e":13,"c":"pl-c1"},{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":23,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":22,"e":23,"c":"pl-pds"}],[{"s":0,"e":5,"c":"pl-k"},{"s":6,"e":12,"c":"pl-c1"},{"s":13,"e":14,"c":"pl-k"}],[{"s":2,"e":3,"c":"pl-k"},{"s":9,"e":10,"c":"pl-k"}],[{"s":4,"e":5,"c":"pl-k"},{"s":7,"e":8,"c":"pl-k"},{"s":24,"e":25,"c":"pl-k"},{"s":25,"e":26,"c":"pl-k"},{"s":26,"e":27,"c":"pl-k"},{"s":29,"e":30,"c":"pl-k"}],[{"s":2,"e":3,"c":"pl-k"},{"s":3,"e":4,"c":"pl-k"},{"s":10,"e":11,"c":"pl-k"}],[],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":35,"e":36,"c":"pl-s"},{"s":36,"e":37,"c":"pl-s"},{"s":37,"e":45,"c":"pl-c1"},{"s":45,"e":46,"c":"pl-s"},{"s":46,"e":47,"c":"pl-s"},{"s":47,"e":48,"c":"pl-s"},{"s":48,"e":83,"c":"pl-corl"},{"s":83,"e":84,"c":"pl-s"},{"s":101,"e":102,"c":"pl-s"},{"s":102,"e":103,"c":"pl-s"},{"s":103,"e":107,"c":"pl-c1"},{"s":107,"e":108,"c":"pl-s"},{"s":108,"e":109,"c":"pl-s"},{"s":109,"e":110,"c":"pl-s"},{"s":110,"e":155,"c":"pl-corl"},{"s":155,"e":156,"c":"pl-s"},{"s":197,"e":198,"c":"pl-s"},{"s":198,"e":207,"c":"pl-c1"},{"s":207,"e":208,"c":"pl-s"},{"s":255,"e":256,"c":"pl-s"},{"s":256,"e":263,"c":"pl-c1"},{"s":263,"e":264,"c":"pl-s"},{"s":297,"e":298,"c":"pl-s"},{"s":298,"e":302,"c":"pl-c1"},{"s":302,"e":303,"c":"pl-s"}],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":5,"c":"pl-en"}],[{"s":0,"e":5,"c":"pl-k"},{"s":6,"e":13,"c":"pl-c1"},{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":23,"c":"pl-s"},{"s":16,"e":17,"c":"pl-pds"},{"s":22,"e":23,"c":"pl-pds"}],[{"s":0,"e":5,"c":"pl-k"},{"s":6,"e":12,"c":"pl-c1"},{"s":13,"e":14,"c":"pl-k"},{"s":15,"e":20,"c":"pl-smi"},{"s":21,"e":34,"c":"pl-c1"}],[{"s":2,"e":10,"c":"pl-s"},{"s":2,"e":3,"c":"pl-pds"},{"s":9,"e":10,"c":"pl-pds"}],[{"s":2,"e":6,"c":"pl-c1"}],[{"s":2,"e":7,"c":"pl-smi"},{"s":8,"e":21,"c":"pl-c1"},{"s":22,"e":26,"c":"pl-s"},{"s":22,"e":23,"c":"pl-pds"},{"s":25,"e":26,"c":"pl-pds"},{"s":28,"e":32,"c":"pl-c1"},{"s":34,"e":43,"c":"pl-s"},{"s":34,"e":35,"c":"pl-pds"},{"s":42,"e":43,"c":"pl-pds"},{"s":54,"e":57,"c":"pl-s"},{"s":54,"e":55,"c":"pl-pds"},{"s":56,"e":57,"c":"pl-pds"}],[],[{"s":0,"e":3,"c":"pl-s"}],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":7,"c":"pl-en"}],[{"s":1,"e":7,"c":"pl-ent"}],[{"s":3,"e":5,"c":"pl-ent"},{"s":21,"e":23,"c":"pl-ent"}],[{"s":2,"e":8,"c":"pl-ent"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":0,"e":14,"c":"pl-mh"},{"s":4,"e":14,"c":"pl-en"}],[],[{"s":4,"e":5,"c":"pl-s"},{"s":15,"e":16,"c":"pl-s"},{"s":16,"e":17,"c":"pl-s"},{"s":17,"e":42,"c":"pl-corl"},{"s":42,"e":43,"c":"pl-s"}],[],[],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":7,"c":"pl-en"}],[{"s":1,"e":7,"c":"pl-ent"}],[{"s":3,"e":5,"c":"pl-ent"},{"s":28,"e":30,"c":"pl-ent"}],[{"s":2,"e":8,"c":"pl-ent"}],[{"s":0,"e":3,"c":"pl-s"}],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":5,"c":"pl-en"}],[],[{"s":9,"e":10,"c":"pl-k"},{"s":11,"e":18,"c":"pl-s"},{"s":11,"e":12,"c":"pl-pds"},{"s":17,"e":18,"c":"pl-pds"}],[],[{"s":0,"e":3,"c":"pl-s"}],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":7,"c":"pl-en"}],[{"s":1,"e":7,"c":"pl-ent"}],[{"s":3,"e":5,"c":"pl-ent"},{"s":21,"e":23,"c":"pl-ent"}],[{"s":2,"e":8,"c":"pl-ent"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":0,"e":14,"c":"pl-mh"},{"s":4,"e":14,"c":"pl-en"}],[],[{"s":0,"e":1,"c":"pl-s"},{"s":11,"e":12,"c":"pl-s"},{"s":12,"e":13,"c":"pl-s"},{"s":13,"e":44,"c":"pl-corl"},{"s":44,"e":45,"c":"pl-s"},{"s":51,"e":52,"c":"pl-s"},{"s":60,"e":61,"c":"pl-s"},{"s":301,"e":302,"c":"pl-s"},{"s":302,"e":307,"c":"pl-c1"},{"s":307,"e":308,"c":"pl-s"},{"s":331,"e":332,"c":"pl-s"},{"s":332,"e":333,"c":"pl-c1"},{"s":333,"e":334,"c":"pl-s"},{"s":339,"e":340,"c":"pl-s"},{"s":340,"e":341,"c":"pl-c1"},{"s":341,"e":342,"c":"pl-s"}],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":5,"c":"pl-en"}],[{"s":0,"e":8,"c":"pl-k"},{"s":9,"e":12,"c":"pl-en"},{"s":13,"e":14,"c":"pl-smi"},{"s":16,"e":17,"c":"pl-smi"}],[{"s":2,"e":8,"c":"pl-k"},{"s":11,"e":12,"c":"pl-k"}],[],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":123,"e":124,"c":"pl-s"},{"s":124,"e":125,"c":"pl-c1"},{"s":125,"e":126,"c":"pl-s"},{"s":218,"e":219,"c":"pl-s"},{"s":219,"e":220,"c":"pl-c1"},{"s":220,"e":221,"c":"pl-s"},{"s":226,"e":227,"c":"pl-s"},{"s":227,"e":228,"c":"pl-c1"},{"s":228,"e":229,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":5,"c":"pl-en"}],[{"s":0,"e":8,"c":"pl-k"},{"s":13,"e":14,"c":"pl-v"},{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":22,"c":"pl-c1"},{"s":24,"e":25,"c":"pl-v"},{"s":25,"e":26,"c":"pl-k"},{"s":27,"e":33,"c":"pl-c1"}],[{"s":2,"e":8,"c":"pl-k"},{"s":9,"e":10,"c":"pl-smi"},{"s":11,"e":12,"c":"pl-k"},{"s":13,"e":14,"c":"pl-smi"}],[],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":4,"e":5,"c":"pl-s"},{"s":5,"e":13,"c":"pl-c1"},{"s":13,"e":14,"c":"pl-s"},{"s":76,"e":77,"c":"pl-s"},{"s":77,"e":78,"c":"pl-c1"},{"s":78,"e":79,"c":"pl-s"},{"s":84,"e":85,"c":"pl-s"},{"s":85,"e":86,"c":"pl-c1"},{"s":86,"e":87,"c":"pl-s"},{"s":146,"e":147,"c":"pl-s"},{"s":147,"e":150,"c":"pl-c1"},{"s":150,"e":151,"c":"pl-s"}],[],[{"s":0,"e":21,"c":"pl-mh"},{"s":3,"e":21,"c":"pl-en"}],[],[],[],[],[],[],[],[{"s":0,"e":14,"c":"pl-mh"},{"s":4,"e":14,"c":"pl-en"}],[],[{"s":15,"e":17,"c":"pl-s"},{"s":22,"e":24,"c":"pl-s"},{"s":247,"e":248,"c":"pl-s"},{"s":248,"e":260,"c":"pl-c1"},{"s":260,"e":261,"c":"pl-s"},{"s":450,"e":451,"c":"pl-s"},{"s":451,"e":463,"c":"pl-c1"},{"s":463,"e":464,"c":"pl-s"}],[],[{"s":31,"e":32,"c":"pl-s"},{"s":32,"e":44,"c":"pl-c1"},{"s":44,"e":45,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":8,"c":"pl-k"},{"s":9,"e":21,"c":"pl-en"},{"s":22,"e":27,"c":"pl-smi"}],[{"s":2,"e":8,"c":"pl-k"}],[{"s":4,"e":5,"c":"pl-k"},{"s":11,"e":12,"c":"pl-k"}],[{"s":6,"e":7,"c":"pl-k"},{"s":14,"e":15,"c":"pl-k"},{"s":16,"e":21,"c":"pl-smi"},{"s":22,"e":25,"c":"pl-smi"},{"s":30,"e":31,"c":"pl-k"},{"s":32,"e":37,"c":"pl-smi"},{"s":38,"e":41,"c":"pl-c1"},{"s":43,"e":44,"c":"pl-k"},{"s":44,"e":45,"c":"pl-k"}],[{"s":6,"e":7,"c":"pl-k"},{"s":17,"e":18,"c":"pl-k"},{"s":19,"e":24,"c":"pl-smi"},{"s":25,"e":31,"c":"pl-smi"},{"s":32,"e":33,"c":"pl-k"},{"s":33,"e":34,"c":"pl-k"},{"s":44,"e":45,"c":"pl-k"}],[{"s":4,"e":5,"c":"pl-k"},{"s":5,"e":6,"c":"pl-k"},{"s":12,"e":13,"c":"pl-k"}],[],[],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":0,"e":1,"c":"pl-s"},{"s":1,"e":12,"c":"pl-c1"},{"s":12,"e":13,"c":"pl-s"},{"s":15,"e":16,"c":"pl-s"},{"s":16,"e":27,"c":"pl-c1"},{"s":27,"e":28,"c":"pl-s"},{"s":34,"e":35,"c":"pl-s"},{"s":35,"e":49,"c":"pl-c1"},{"s":49,"e":50,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":1,"c":"pl-k"}],[{"s":5,"e":6,"c":"pl-k"},{"s":6,"e":26,"c":"pl-s"},{"s":6,"e":7,"c":"pl-pds"},{"s":25,"e":26,"c":"pl-pds"}],[{"s":5,"e":6,"c":"pl-k"},{"s":6,"e":32,"c":"pl-s"},{"s":6,"e":7,"c":"pl-pds"},{"s":31,"e":32,"c":"pl-pds"}],[{"s":8,"e":9,"c":"pl-k"},{"s":9,"e":64,"c":"pl-s"},{"s":9,"e":10,"c":"pl-pds"},{"s":63,"e":64,"c":"pl-pds"}],[{"s":0,"e":1,"c":"pl-k"},{"s":1,"e":2,"c":"pl-k"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":42,"e":43,"c":"pl-s"},{"s":43,"e":44,"c":"pl-s"},{"s":44,"e":52,"c":"pl-c1"},{"s":52,"e":53,"c":"pl-s"},{"s":53,"e":54,"c":"pl-s"},{"s":54,"e":55,"c":"pl-s"},{"s":55,"e":90,"c":"pl-corl"},{"s":90,"e":91,"c":"pl-s"},{"s":153,"e":154,"c":"pl-s"},{"s":154,"e":166,"c":"pl-c1"},{"s":166,"e":167,"c":"pl-s"},{"s":235,"e":236,"c":"pl-s"},{"s":236,"e":248,"c":"pl-c1"},{"s":248,"e":249,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":7,"c":"pl-en"}],[{"s":1,"e":7,"c":"pl-ent"}],[{"s":3,"e":6,"c":"pl-ent"},{"s":7,"e":10,"c":"pl-e"},{"s":11,"e":29,"c":"pl-s"},{"s":11,"e":12,"c":"pl-pds"},{"s":28,"e":29,"c":"pl-pds"},{"s":30,"e":33,"c":"pl-e"},{"s":34,"e":60,"c":"pl-s"},{"s":34,"e":35,"c":"pl-pds"},{"s":59,"e":60,"c":"pl-pds"}],[{"s":3,"e":13,"c":"pl-ent"},{"s":69,"e":79,"c":"pl-ent"}],[{"s":2,"e":8,"c":"pl-ent"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":0,"e":9,"c":"pl-mh"},{"s":4,"e":9,"c":"pl-en"}],[],[{"s":31,"e":33,"c":"pl-s"},{"s":38,"e":40,"c":"pl-s"}],[],[{"s":139,"e":140,"c":"pl-s"},{"s":145,"e":146,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":8,"c":"pl-k"},{"s":9,"e":22,"c":"pl-en"}],[{"s":2,"e":7,"c":"pl-k"},{"s":9,"e":14,"c":"pl-c1"},{"s":16,"e":17,"c":"pl-k"},{"s":18,"e":26,"c":"pl-en"},{"s":27,"e":28,"c":"pl-c1"}],[{"s":2,"e":8,"c":"pl-k"},{"s":9,"e":10,"c":"pl-k"},{"s":16,"e":17,"c":"pl-k"},{"s":38,"e":39,"c":"pl-k"},{"s":39,"e":40,"c":"pl-k"},{"s":46,"e":47,"c":"pl-k"}],[],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":0,"e":1,"c":"pl-s"},{"s":1,"e":2,"c":"pl-s"},{"s":2,"e":12,"c":"pl-c1"},{"s":12,"e":13,"c":"pl-s"},{"s":13,"e":14,"c":"pl-s"},{"s":14,"e":15,"c":"pl-s"},{"s":15,"e":57,"c":"pl-corl"},{"s":57,"e":58,"c":"pl-s"},{"s":64,"e":66,"c":"pl-s"},{"s":66,"e":67,"c":"pl-s"},{"s":77,"e":78,"c":"pl-s"},{"s":78,"e":79,"c":"pl-s"},{"s":79,"e":112,"c":"pl-corl"},{"s":112,"e":113,"c":"pl-s"},{"s":113,"e":115,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":7,"c":"pl-en"}],[{"s":1,"e":7,"c":"pl-ent"},{"s":25,"e":31,"c":"pl-ent"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":4,"e":5,"c":"pl-s"},{"s":5,"e":15,"c":"pl-c1"},{"s":15,"e":16,"c":"pl-s"},{"s":41,"e":42,"c":"pl-s"},{"s":42,"e":47,"c":"pl-c1"},{"s":47,"e":48,"c":"pl-s"}],[],[{"s":0,"e":10,"c":"pl-mh"},{"s":4,"e":10,"c":"pl-en"}],[],[],[],[{"s":28,"e":29,"c":"pl-s"},{"s":29,"e":30,"c":"pl-s"},{"s":30,"e":35,"c":"pl-c1"},{"s":35,"e":36,"c":"pl-s"},{"s":36,"e":37,"c":"pl-s"},{"s":37,"e":38,"c":"pl-s"},{"s":38,"e":77,"c":"pl-corl"},{"s":77,"e":78,"c":"pl-s"},{"s":114,"e":115,"c":"pl-s"},{"s":115,"e":122,"c":"pl-c1"},{"s":122,"e":123,"c":"pl-s"},{"s":142,"e":143,"c":"pl-s"},{"s":143,"e":156,"c":"pl-c1"},{"s":156,"e":157,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":8,"c":"pl-k"},{"s":9,"e":22,"c":"pl-en"}],[{"s":2,"e":7,"c":"pl-k"},{"s":9,"e":14,"c":"pl-c1"},{"s":16,"e":24,"c":"pl-c1"},{"s":26,"e":27,"c":"pl-k"},{"s":28,"e":36,"c":"pl-en"},{"s":37,"e":38,"c":"pl-c1"}],[{"s":2,"e":8,"c":"pl-k"}],[{"s":4,"e":5,"c":"pl-k"},{"s":19,"e":20,"c":"pl-k"},{"s":24,"e":26,"c":"pl-k"},{"s":27,"e":35,"c":"pl-en"},{"s":42,"e":43,"c":"pl-k"},{"s":44,"e":45,"c":"pl-c1"},{"s":47,"e":48,"c":"pl-k"},{"s":69,"e":70,"c":"pl-k"},{"s":70,"e":71,"c":"pl-k"},{"s":77,"e":78,"c":"pl-k"}],[],[],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":40,"e":41,"c":"pl-s"},{"s":41,"e":51,"c":"pl-c1"},{"s":51,"e":52,"c":"pl-s"},{"s":87,"e":88,"c":"pl-s"},{"s":88,"e":98,"c":"pl-c1"},{"s":98,"e":99,"c":"pl-s"},{"s":153,"e":154,"c":"pl-s"},{"s":154,"e":159,"c":"pl-c1"},{"s":159,"e":160,"c":"pl-s"},{"s":195,"e":196,"c":"pl-s"},{"s":196,"e":203,"c":"pl-c1"},{"s":203,"e":204,"c":"pl-s"},{"s":226,"e":227,"c":"pl-s"},{"s":227,"e":232,"c":"pl-c1"},{"s":232,"e":233,"c":"pl-s"}],[],[{"s":0,"e":21,"c":"pl-mh"},{"s":3,"e":21,"c":"pl-en"}],[],[{"s":322,"e":323,"c":"pl-s"},{"s":327,"e":328,"c":"pl-s"},{"s":328,"e":329,"c":"pl-s"},{"s":329,"e":351,"c":"pl-corl"},{"s":351,"e":352,"c":"pl-s"},{"s":356,"e":357,"c":"pl-s"},{"s":361,"e":362,"c":"pl-s"},{"s":362,"e":363,"c":"pl-s"},{"s":363,"e":383,"c":"pl-corl"},{"s":383,"e":384,"c":"pl-s"},{"s":425,"e":426,"c":"pl-s"},{"s":433,"e":434,"c":"pl-s"},{"s":434,"e":435,"c":"pl-s"},{"s":435,"e":455,"c":"pl-corl"},{"s":455,"e":456,"c":"pl-s"}],[],[{"s":0,"e":24,"c":"pl-mh"},{"s":3,"e":24,"c":"pl-en"}],[],[{"s":338,"e":339,"c":"pl-s"},{"s":363,"e":364,"c":"pl-s"},{"s":364,"e":365,"c":"pl-s"},{"s":365,"e":405,"c":"pl-corl"},{"s":405,"e":406,"c":"pl-s"}],[],[{"s":0,"e":28,"c":"pl-mh"},{"s":4,"e":28,"c":"pl-en"}],[],[],[],[{"s":17,"e":18,"c":"pl-s"},{"s":18,"e":30,"c":"pl-c1"},{"s":30,"e":31,"c":"pl-s"},{"s":76,"e":77,"c":"pl-s"},{"s":77,"e":84,"c":"pl-c1"},{"s":84,"e":85,"c":"pl-s"},{"s":113,"e":114,"c":"pl-s"},{"s":114,"e":121,"c":"pl-c1"},{"s":121,"e":122,"c":"pl-s"},{"s":144,"e":145,"c":"pl-s"},{"s":145,"e":157,"c":"pl-c1"},{"s":157,"e":158,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":5,"c":"pl-en"}],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":19,"c":"pl-smi"},{"s":20,"e":24,"c":"pl-k"},{"s":25,"e":52,"c":"pl-s"},{"s":25,"e":26,"c":"pl-pds"},{"s":51,"e":52,"c":"pl-pds"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":18,"e":19,"c":"pl-s"},{"s":19,"e":31,"c":"pl-c1"},{"s":31,"e":32,"c":"pl-s"},{"s":58,"e":59,"c":"pl-s"},{"s":59,"e":66,"c":"pl-c1"},{"s":66,"e":67,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":1,"c":"pl-k"},{"s":8,"e":9,"c":"pl-k"}],[{"s":2,"e":3,"c":"pl-k"},{"s":16,"e":17,"c":"pl-k"},{"s":17,"e":18,"c":"pl-k"}],[{"s":0,"e":1,"c":"pl-k"},{"s":1,"e":2,"c":"pl-k"},{"s":9,"e":10,"c":"pl-k"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":0,"e":24,"c":"pl-mh"},{"s":4,"e":24,"c":"pl-en"}],[],[{"s":99,"e":100,"c":"pl-s"},{"s":100,"e":112,"c":"pl-c1"},{"s":112,"e":113,"c":"pl-s"}],[],[],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":1,"c":"pl-k"},{"s":4,"e":5,"c":"pl-k"}],[{"s":2,"e":3,"c":"pl-k"},{"s":7,"e":8,"c":"pl-k"}],[{"s":4,"e":5,"c":"pl-k"},{"s":12,"e":13,"c":"pl-k"}],[{"s":6,"e":7,"c":"pl-k"},{"s":21,"e":32,"c":"pl-c"},{"s":21,"e":23,"c":"pl-c"},{"s":30,"e":32,"c":"pl-c"},{"s":34,"e":35,"c":"pl-k"},{"s":35,"e":36,"c":"pl-k"}],[{"s":4,"e":5,"c":"pl-k"},{"s":5,"e":6,"c":"pl-k"},{"s":13,"e":14,"c":"pl-k"}],[{"s":2,"e":3,"c":"pl-k"},{"s":3,"e":4,"c":"pl-k"},{"s":8,"e":9,"c":"pl-k"}],[{"s":0,"e":1,"c":"pl-k"},{"s":1,"e":2,"c":"pl-k"},{"s":5,"e":6,"c":"pl-k"}],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":4,"e":5,"c":"pl-s"},{"s":5,"e":8,"c":"pl-c1"},{"s":8,"e":9,"c":"pl-s"},{"s":38,"e":39,"c":"pl-s"},{"s":39,"e":51,"c":"pl-c1"},{"s":51,"e":52,"c":"pl-s"},{"s":87,"e":88,"c":"pl-s"},{"s":88,"e":92,"c":"pl-c1"},{"s":92,"e":93,"c":"pl-s"},{"s":98,"e":99,"c":"pl-s"},{"s":99,"e":106,"c":"pl-c1"},{"s":106,"e":107,"c":"pl-s"},{"s":273,"e":274,"c":"pl-s"},{"s":274,"e":278,"c":"pl-c1"},{"s":278,"e":279,"c":"pl-s"},{"s":284,"e":285,"c":"pl-s"},{"s":285,"e":292,"c":"pl-c1"},{"s":292,"e":293,"c":"pl-s"},{"s":402,"e":403,"c":"pl-s"},{"s":403,"e":415,"c":"pl-c1"},{"s":415,"e":416,"c":"pl-s"},{"s":441,"e":442,"c":"pl-s"},{"s":442,"e":446,"c":"pl-c1"},{"s":446,"e":447,"c":"pl-s"},{"s":452,"e":453,"c":"pl-s"},{"s":453,"e":460,"c":"pl-c1"},{"s":460,"e":461,"c":"pl-s"}],[],[],[],[],[],[{"s":27,"e":28,"c":"pl-s"},{"s":48,"e":49,"c":"pl-s"},{"s":49,"e":50,"c":"pl-s"},{"s":50,"e":95,"c":"pl-corl"},{"s":95,"e":96,"c":"pl-s"},{"s":106,"e":107,"c":"pl-s"},{"s":107,"e":108,"c":"pl-s"},{"s":108,"e":117,"c":"pl-c1"},{"s":117,"e":118,"c":"pl-s"},{"s":123,"e":124,"c":"pl-s"},{"s":124,"e":132,"c":"pl-c1"},{"s":132,"e":133,"c":"pl-s"},{"s":151,"e":152,"c":"pl-s"},{"s":152,"e":153,"c":"pl-s"},{"s":153,"e":196,"c":"pl-corl"},{"s":196,"e":197,"c":"pl-s"},{"s":211,"e":212,"c":"pl-s"},{"s":223,"e":224,"c":"pl-s"},{"s":224,"e":225,"c":"pl-s"},{"s":225,"e":281,"c":"pl-corl"},{"s":281,"e":282,"c":"pl-s"},{"s":311,"e":312,"c":"pl-s"},{"s":320,"e":321,"c":"pl-s"},{"s":321,"e":322,"c":"pl-s"},{"s":322,"e":366,"c":"pl-corl"},{"s":366,"e":367,"c":"pl-s"}],[],[{"s":0,"e":13,"c":"pl-mh"},{"s":4,"e":13,"c":"pl-en"}],[],[{"s":45,"e":47,"c":"pl-s"},{"s":56,"e":58,"c":"pl-s"},{"s":197,"e":198,"c":"pl-s"},{"s":206,"e":207,"c":"pl-s"},{"s":267,"e":268,"c":"pl-s"},{"s":278,"e":279,"c":"pl-s"},{"s":515,"e":516,"c":"pl-s"},{"s":522,"e":523,"c":"pl-s"},{"s":533,"e":534,"c":"pl-s"},{"s":541,"e":542,"c":"pl-s"},{"s":552,"e":553,"c":"pl-s"},{"s":561,"e":562,"c":"pl-s"}],[],[{"s":4,"e":5,"c":"pl-s"},{"s":11,"e":12,"c":"pl-s"}],[],[{"s":5,"e":6,"c":"pl-s"},{"s":46,"e":47,"c":"pl-s"},{"s":47,"e":48,"c":"pl-s"},{"s":48,"e":110,"c":"pl-corl"},{"s":110,"e":111,"c":"pl-s"}],[],[{"s":0,"e":21,"c":"pl-mh"},{"s":3,"e":21,"c":"pl-en"}],[],[],[],[{"s":4,"e":6,"c":"pl-s"},{"s":17,"e":19,"c":"pl-s"}],[],[{"s":8,"e":9,"c":"pl-s"},{"s":58,"e":59,"c":"pl-s"},{"s":59,"e":60,"c":"pl-s"},{"s":60,"e":134,"c":"pl-corl"},{"s":134,"e":135,"c":"pl-s"}],[],[{"s":4,"e":6,"c":"pl-s"},{"s":21,"e":23,"c":"pl-s"}],[],[{"s":8,"e":9,"c":"pl-s"},{"s":62,"e":63,"c":"pl-s"},{"s":63,"e":64,"c":"pl-s"},{"s":64,"e":103,"c":"pl-corl"},{"s":103,"e":104,"c":"pl-s"}],[],[{"s":4,"e":6,"c":"pl-s"},{"s":16,"e":18,"c":"pl-s"}],[],[{"s":0,"e":10,"c":"pl-mh"},{"s":3,"e":10,"c":"pl-en"}],[],[{"s":3,"e":4,"c":"pl-s"},{"s":46,"e":47,"c":"pl-s"},{"s":47,"e":48,"c":"pl-s"},{"s":48,"e":138,"c":"pl-corl"},{"s":138,"e":139,"c":"pl-s"}],[],[{"s":0,"e":10,"c":"pl-mh"},{"s":3,"e":10,"c":"pl-en"}],[],[],[],[],[],[{"s":0,"e":1,"c":"pl-s"},{"s":16,"e":17,"c":"pl-s"},{"s":17,"e":18,"c":"pl-s"},{"s":18,"e":46,"c":"pl-corl"},{"s":46,"e":47,"c":"pl-s"},{"s":189,"e":190,"c":"pl-s"},{"s":211,"e":212,"c":"pl-s"},{"s":212,"e":213,"c":"pl-s"},{"s":213,"e":256,"c":"pl-corl"},{"s":256,"e":257,"c":"pl-s"}],[],[{"s":28,"e":29,"c":"pl-s"},{"s":29,"e":42,"c":"pl-c1"},{"s":42,"e":43,"c":"pl-s"}],[],[{"s":0,"e":3,"c":"pl-s"},{"s":3,"e":6,"c":"pl-en"}],[{"s":0,"e":6,"c":"pl-k"},{"s":9,"e":18,"c":"pl-smi"},{"s":20,"e":26,"c":"pl-smi"},{"s":28,"e":34,"c":"pl-smi"},{"s":37,"e":41,"c":"pl-k"},{"s":42,"e":66,"c":"pl-s"},{"s":42,"e":43,"c":"pl-pds"},{"s":65,"e":66,"c":"pl-pds"}],[],[{"s":0,"e":6,"c":"pl-k"},{"s":7,"e":20,"c":"pl-smi"},{"s":21,"e":25,"c":"pl-k"},{"s":26,"e":43,"c":"pl-s"},{"s":26,"e":27,"c":"pl-pds"},{"s":42,"e":43,"c":"pl-pds"}],[],[{"s":0,"e":2,"c":"pl-en"},{"s":3,"e":57,"c":"pl-s"},{"s":3,"e":4,"c":"pl-pds"},{"s":56,"e":57,"c":"pl-pds"},{"s":62,"e":64,"c":"pl-k"}],[{"s":2,"e":8,"c":"pl-en"},{"s":9,"e":10,"c":"pl-k"},{"s":24,"e":25,"c":"pl-k"},{"s":25,"e":26,"c":"pl-k"}],[{"s":2,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-c1"},{"s":12,"e":13,"c":"pl-k"},{"s":14,"e":20,"c":"pl-c1"},{"s":21,"e":30,"c":"pl-en"},{"s":31,"e":39,"c":"pl-s"},{"s":31,"e":32,"c":"pl-pds"},{"s":38,"e":39,"c":"pl-pds"}],[],[{"s":2,"e":8,"c":"pl-en"},{"s":14,"e":31,"c":"pl-en"}],[{"s":2,"e":8,"c":"pl-en"},{"s":14,"e":31,"c":"pl-en"},{"s":32,"e":49,"c":"pl-s"},{"s":32,"e":33,"c":"pl-pds"},{"s":48,"e":49,"c":"pl-pds"}],[],[],[{"s":0,"e":2,"c":"pl-en"},{"s":3,"e":38,"c":"pl-s"},{"s":3,"e":4,"c":"pl-pds"},{"s":37,"e":38,"c":"pl-pds"},{"s":43,"e":45,"c":"pl-k"}],[{"s":2,"e":8,"c":"pl-en"},{"s":9,"e":10,"c":"pl-k"},{"s":24,"e":25,"c":"pl-k"},{"s":25,"e":26,"c":"pl-k"}],[{"s":2,"e":7,"c":"pl-k"},{"s":8,"e":11,"c":"pl-c1"},{"s":12,"e":13,"c":"pl-k"},{"s":14,"e":20,"c":"pl-c1"},{"s":21,"e":30,"c":"pl-en"},{"s":31,"e":39,"c":"pl-s"},{"s":31,"e":32,"c":"pl-pds"},{"s":38,"e":39,"c":"pl-pds"}],[],[{"s":2,"e":11,"c":"pl-smi"},{"s":12,"e":17,"c":"pl-c1"}],[{"s":2,"e":8,"c":"pl-en"},{"s":14,"e":31,"c":"pl-en"},{"s":32,"e":49,"c":"pl-s"},{"s":32,"e":33,"c":"pl-pds"},{"s":48,"e":49,"c":"pl-pds"}],[],[{"s":2,"e":11,"c":"pl-smi"},{"s":12,"e":17,"c":"pl-c1"}],[{"s":2,"e":8,"c":"pl-en"},{"s":14,"e":31,"c":"pl-en"},{"s":32,"e":49,"c":"pl-s"},{"s":32,"e":33,"c":"pl-pds"},{"s":48,"e":49,"c":"pl-pds"}],[],[{"s":0,"e":3,"c":"pl-s"}],[],[{"s":0,"e":10,"c":"pl-mh"},{"s":3,"e":10,"c":"pl-en"}],[],[],[],[{"s":0,"e":1,"c":"pl-v"},{"s":2,"e":3,"c":"pl-s"},{"s":8,"e":9,"c":"pl-s"},{"s":9,"e":10,"c":"pl-s"},{"s":10,"e":101,"c":"pl-corl"},{"s":101,"e":102,"c":"pl-s"}],[{"s":0,"e":1,"c":"pl-v"},{"s":2,"e":3,"c":"pl-s"},{"s":8,"e":9,"c":"pl-s"},{"s":9,"e":10,"c":"pl-s"},{"s":10,"e":101,"c":"pl-corl"},{"s":101,"e":102,"c":"pl-s"}],[{"s":0,"e":1,"c":"pl-v"},{"s":2,"e":3,"c":"pl-s"},{"s":6,"e":7,"c":"pl-s"},{"s":7,"e":8,"c":"pl-s"},{"s":8,"e":97,"c":"pl-corl"},{"s":97,"e":98,"c":"pl-s"}],[{"s":0,"e":1,"c":"pl-v"},{"s":2,"e":3,"c":"pl-s"},{"s":9,"e":10,"c":"pl-s"},{"s":10,"e":11,"c":"pl-s"},{"s":11,"e":103,"c":"pl-corl"},{"s":103,"e":104,"c":"pl-s"}],[{"s":0,"e":1,"c":"pl-v"},{"s":2,"e":3,"c":"pl-s"},{"s":10,"e":11,"c":"pl-s"},{"s":11,"e":12,"c":"pl-s"},{"s":12,"e":105,"c":"pl-corl"},{"s":105,"e":106,"c":"pl-s"}],[],[]],"colorizedLines":null,"csv":null,"csvError":null,"dependabotInfo":{"showConfigurationBanner":false,"configFilePath":null,"networkDependabotPath":"/mdn/content/network/updates","dismissConfigurationNoticePath":"/settings/dismiss-notice/dependabot_configuration_notice","configurationNoticeDismissed":null},"displayName":"index.md","displayUrl":"https://github.com/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?raw=true","headerInfo":{"blobSize":"19.5 KB","deleteTooltip":"You must be signed in to make or propose changes","editTooltip":"You must be signed in to make or propose changes","ghDesktopPath":"https://desktop.github.com","isGitLfs":false,"onBranch":true,"shortPath":"9cff556","siteNavLoginPath":"/login?return_to=https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn%2Ftools_and_testing%2Fclient-side_javascript_frameworks%2Fmain_features%2Findex.md%3Fplain%3D1","isCSV":false,"isRichtext":true,"toc":null,"lineInfo":{"truncatedLoc":"327","truncatedSloc":"224"},"mode":"file"},"image":false,"isCodeownersFile":null,"isPlain":true,"isValidLegacyIssueTemplate":false,"issueTemplate":null,"discussionTemplate":null,"language":"Markdown","languageID":222,"large":false,"planSupportInfo":{"repoIsFork":null,"repoOwnedByCurrentUser":null,"requestFullPath":"/mdn/content/blob/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md?plain=1","showFreeOrgGatedFeatureMessage":null,"showPlanSupportBanner":null,"upgradeDataAttributes":null,"upgradePath":null},"publishBannersInfo":{"dismissActionNoticePath":"/settings/dismiss-notice/publish_action_from_dockerfile","releasePath":"/mdn/content/releases/new?marketplace=true","showPublishActionBanner":false},"rawBlobUrl":"https://github.com/mdn/content/raw/refs/heads/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md","renderImageOrRaw":false,"richText":null,"renderedFileInfo":null,"shortPath":null,"symbolsEnabled":true,"tabSize":2,"topBannersInfo":{"overridingGlobalFundingFile":false,"globalPreferredFundingPath":null,"showInvalidCitationWarning":false,"citationHelpUrl":"https://docs.github.com/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-citation-files","actionsOnboardingTip":null},"truncated":false,"viewable":true,"workflowRedirectUrl":null,"symbols":{"timed_out":false,"not_analyzed":false,"symbols":[{"name":"Domain-specific languages","kind":"section_2","ident_start":1174,"ident_end":1199,"extent_start":1171,"extent_end":5800,"fully_qualified_name":"Domain-specific languages","ident_utf16":{"start":{"line_number":27,"utf16_col":3},"end":{"line_number":27,"utf16_col":28}},"extent_utf16":{"start":{"line_number":27,"utf16_col":0},"end":{"line_number":123,"utf16_col":0}}},{"name":"JSX","kind":"section_3","ident_start":2446,"ident_end":2449,"extent_start":2442,"extent_end":3635,"fully_qualified_name":"JSX","ident_utf16":{"start":{"line_number":35,"utf16_col":4},"end":{"line_number":35,"utf16_col":7}},"extent_utf16":{"start":{"line_number":35,"utf16_col":0},"end":{"line_number":71,"utf16_col":0}}},{"name":"Handlebars","kind":"section_3","ident_start":3639,"ident_end":3649,"extent_start":3635,"extent_end":4361,"fully_qualified_name":"Handlebars","ident_utf16":{"start":{"line_number":71,"utf16_col":4},"end":{"line_number":71,"utf16_col":14}},"extent_utf16":{"start":{"line_number":71,"utf16_col":0},"end":{"line_number":101,"utf16_col":0}}},{"name":"TypeScript","kind":"section_3","ident_start":4365,"ident_end":4375,"extent_start":4361,"extent_end":5800,"fully_qualified_name":"TypeScript","ident_utf16":{"start":{"line_number":101,"utf16_col":4},"end":{"line_number":101,"utf16_col":14}},"extent_utf16":{"start":{"line_number":101,"utf16_col":0},"end":{"line_number":123,"utf16_col":0}}},{"name":"Writing components","kind":"section_2","ident_start":5803,"ident_end":5821,"extent_start":5800,"extent_end":10138,"fully_qualified_name":"Writing components","ident_utf16":{"start":{"line_number":123,"utf16_col":3},"end":{"line_number":123,"utf16_col":21}},"extent_utf16":{"start":{"line_number":123,"utf16_col":0},"end":{"line_number":205,"utf16_col":0}}},{"name":"Properties","kind":"section_3","ident_start":6451,"ident_end":6461,"extent_start":6447,"extent_end":8085,"fully_qualified_name":"Properties","ident_utf16":{"start":{"line_number":131,"utf16_col":4},"end":{"line_number":131,"utf16_col":14}},"extent_utf16":{"start":{"line_number":131,"utf16_col":0},"end":{"line_number":167,"utf16_col":0}}},{"name":"State","kind":"section_3","ident_start":8089,"ident_end":8094,"extent_start":8085,"extent_end":9199,"fully_qualified_name":"State","ident_utf16":{"start":{"line_number":167,"utf16_col":4},"end":{"line_number":167,"utf16_col":9}},"extent_utf16":{"start":{"line_number":167,"utf16_col":0},"end":{"line_number":188,"utf16_col":0}}},{"name":"Events","kind":"section_3","ident_start":9203,"ident_end":9209,"extent_start":9199,"extent_end":10138,"fully_qualified_name":"Events","ident_utf16":{"start":{"line_number":188,"utf16_col":4},"end":{"line_number":188,"utf16_col":10}},"extent_utf16":{"start":{"line_number":188,"utf16_col":0},"end":{"line_number":205,"utf16_col":0}}},{"name":"Styling components","kind":"section_2","ident_start":10141,"ident_end":10159,"extent_start":10138,"extent_end":10622,"fully_qualified_name":"Styling components","ident_utf16":{"start":{"line_number":205,"utf16_col":3},"end":{"line_number":205,"utf16_col":21}},"extent_utf16":{"start":{"line_number":205,"utf16_col":0},"end":{"line_number":209,"utf16_col":0}}},{"name":"Handling dependencies","kind":"section_2","ident_start":10625,"ident_end":10646,"extent_start":10622,"extent_end":14686,"fully_qualified_name":"Handling dependencies","ident_utf16":{"start":{"line_number":209,"utf16_col":3},"end":{"line_number":209,"utf16_col":24}},"extent_utf16":{"start":{"line_number":209,"utf16_col":0},"end":{"line_number":263,"utf16_col":0}}},{"name":"Components in components","kind":"section_3","ident_start":11094,"ident_end":11118,"extent_start":11090,"extent_end":11830,"fully_qualified_name":"Components in components","ident_utf16":{"start":{"line_number":213,"utf16_col":4},"end":{"line_number":213,"utf16_col":28}},"extent_utf16":{"start":{"line_number":213,"utf16_col":0},"end":{"line_number":231,"utf16_col":0}}},{"name":"Dependency injection","kind":"section_3","ident_start":11834,"ident_end":11854,"extent_start":11830,"extent_end":13602,"fully_qualified_name":"Dependency injection","ident_utf16":{"start":{"line_number":231,"utf16_col":4},"end":{"line_number":231,"utf16_col":24}},"extent_utf16":{"start":{"line_number":231,"utf16_col":0},"end":{"line_number":255,"utf16_col":0}}},{"name":"Lifecycle","kind":"section_3","ident_start":13606,"ident_end":13615,"extent_start":13602,"extent_end":14686,"fully_qualified_name":"Lifecycle","ident_utf16":{"start":{"line_number":255,"utf16_col":4},"end":{"line_number":255,"utf16_col":13}},"extent_utf16":{"start":{"line_number":255,"utf16_col":0},"end":{"line_number":263,"utf16_col":0}}},{"name":"Rendering elements","kind":"section_2","ident_start":14689,"ident_end":14707,"extent_start":14686,"extent_end":16742,"fully_qualified_name":"Rendering elements","ident_utf16":{"start":{"line_number":263,"utf16_col":3},"end":{"line_number":263,"utf16_col":21}},"extent_utf16":{"start":{"line_number":263,"utf16_col":0},"end":{"line_number":277,"utf16_col":0}}},{"name":"Routing","kind":"section_2","ident_start":16745,"ident_end":16752,"extent_start":16742,"extent_end":17184,"fully_qualified_name":"Routing","ident_utf16":{"start":{"line_number":277,"utf16_col":3},"end":{"line_number":277,"utf16_col":10}},"extent_utf16":{"start":{"line_number":277,"utf16_col":0},"end":{"line_number":281,"utf16_col":0}}},{"name":"Testing","kind":"section_2","ident_start":17187,"ident_end":17194,"extent_start":17184,"extent_end":18876,"fully_qualified_name":"Testing","ident_utf16":{"start":{"line_number":281,"utf16_col":3},"end":{"line_number":281,"utf16_col":10}},"extent_utf16":{"start":{"line_number":281,"utf16_col":0},"end":{"line_number":316,"utf16_col":0}}},{"name":"Summary","kind":"section_2","ident_start":18879,"ident_end":18886,"extent_start":18876,"extent_end":19993,"fully_qualified_name":"Summary","ident_utf16":{"start":{"line_number":316,"utf16_col":3},"end":{"line_number":316,"utf16_col":10}},"extent_utf16":{"start":{"line_number":316,"utf16_col":0},"end":{"line_number":327,"utf16_col":0}}}]}},"copilotInfo":null,"copilotAccessAllowed":false,"csrf_tokens":{"/mdn/content/branches":{"post":"9eAPuYhkvz8ksgGfP1DP4Ov5mJw4DgbfYbDbzH3hXAvkeJRWYshsZMwqT9UMu8YbudJyrWoWsteappFfelEulg"},"/repos/preferences":{"post":"50NyYHfEkLTlu8jUPQ4Y5DHvENgm9PJLaRry5WRVGRpmAZMDPl2Otaj2naOpU5V0mEbLFLraOmmAbNkiiQD4iw"}}},"title":"content/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md at main · mdn/content","appPayload":{"helpUrl":"https://docs.github.com","findFileWorkerPath":"/assets-cdn/worker/find-file-worker-1583894afd38.js","findInFileWorkerPath":"/assets-cdn/worker/find-in-file-worker-67668e8c2caa.js","githubDevUrl":null,"enabled_features":{"code_nav_ui_events":false,"overview_shared_code_dropdown_button":false,"react_blob_overlay":false,"copilot_conversational_ux_embedding_update":false,"copilot_smell_icebreaker_ux":true,"copilot_workspace":false,"blob_edit_unsaved_changes_storage":true,"accessible_code_button":true}}}</script> <div data-target="react-app.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.hOfjFo{padding:0;}/*!sc*/ .oDGAe{max-width:100%;margin-left:auto;margin-right:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}/*!sc*/ .kowOcT{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;}/*!sc*/ .gISSDQ{width:100%;}/*!sc*/ @media screen and (min-width:544px){.gISSDQ{width:100%;}}/*!sc*/ @media screen and (min-width:768px){.gISSDQ{width:auto;}}/*!sc*/ .fLEPlD{display:none;-webkit-order:1;-ms-flex-order:1;order:1;width:100%;margin-left:0;margin-right:0;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;margin-bottom:0;min-width:0;}/*!sc*/ @media screen and (min-width:544px){.fLEPlD{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media screen and (min-width:768px){.fLEPlD{width:auto;margin-top:0 !important;margin-bottom:0 !important;position:-webkit-sticky;position:sticky;top:0px;max-height:100vh !important;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-right:0;height:100vh;}}/*!sc*/ @media print,screen and (max-width:1011px) and (min-width:768px){.fLEPlD{display:none;}}/*!sc*/ .hPvFuC{margin-left:0;margin-right:0;display:none;margin-top:0;}/*!sc*/ @media screen and (min-width:768px){.hPvFuC{margin-left:0 !important;margin-right:0 !important;}}/*!sc*/ .fFSoPl{--pane-min-width:256px;--pane-max-width-diff:511px;--pane-max-width:calc(100vw - var(--pane-max-width-diff));width:100%;padding:0;}/*!sc*/ @media screen and (min-width:544px){}/*!sc*/ @media screen and (min-width:768px){.fFSoPl{width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width));overflow:auto;}}/*!sc*/ @media screen and (min-width:1280px){.fFSoPl{--pane-max-width-diff:959px;}}/*!sc*/ .bTBnTW{height:100%;position:relative;display:none;margin-left:0;}/*!sc*/ .bHLmSv{position:absolute;inset:0 -2px;cursor:col-resize;background-color:transparent;-webkit-transition-delay:0.1s;transition-delay:0.1s;}/*!sc*/ .bHLmSv:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));}/*!sc*/ .iKqMNA{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-order:2;-ms-flex-order:2;order:2;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;min-width:1px;margin-right:auto;}/*!sc*/ @media print{.iKqMNA{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;}}/*!sc*/ .FxAyp{width:100%;max-width:100%;margin-left:auto;margin-right:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:0;}/*!sc*/ .leYMvG{margin-left:auto;margin-right:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-bottom:40px;max-width:100%;margin-top:0;}/*!sc*/ .KMPzq{display:inherit;}/*!sc*/ .hfKjHv{width:100%;}/*!sc*/ .gZWyZE{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}/*!sc*/ .dwYKDk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;gap:8px;}/*!sc*/ .ibcGmb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;min-width:0;}/*!sc*/ .hKaEJF{display:block;margin-right:8px;}/*!sc*/ @media screen and (min-width:1360px){.hKaEJF{display:block;}}/*!sc*/ .XosP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;font-size:14px;}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ .hzSPyu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;pointer-events:none;}/*!sc*/ .bZBlpz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}/*!sc*/ .lhTYNA{margin-right:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dbrgmi{font-size:14px;min-width:0;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ .dHJiml{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;padding-right:8px;min-width:0;}/*!sc*/ .cEytCf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:16px;min-width:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .fzFXnm{max-width:100%;}/*!sc*/ .iMnkmv{max-width:100%;list-style:none;display:inline-block;}/*!sc*/ .ghzDag{display:inline-block;max-width:100%;}/*!sc*/ .kHuKdh{font-weight:600;}/*!sc*/ .kgiVEz{font-weight:400;}/*!sc*/ .jGhzSQ{font-weight:600;display:inline-block;max-width:100%;font-size:16px;}/*!sc*/ .faNtbn{min-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}/*!sc*/ .fmQaBv{margin-left:4px;margin-right:4px;}/*!sc*/ .dJxjrT{margin-left:16px;margin-right:16px;}/*!sc*/ .eFxKDQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}/*!sc*/ .dzCJzi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:273px;padding:8px;}/*!sc*/ @media screen and (min-width:544px){.dzCJzi{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}}/*!sc*/ .ldRxiI{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ .fVkfyA{width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;min-width:0;margin-right:0;}/*!sc*/ .gNAmSV{height:40px;padding-left:4px;padding-bottom:16px;}/*!sc*/ .jNEwzY{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .bsDwxw{font-size:12px;-webkit-flex:auto;-ms-flex:auto;flex:auto;padding-right:16px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));min-width:0;}/*!sc*/ .jdLMhu{top:0px;z-index:4;background:var(--bgColor-default,var(--color-canvas-default));position:-webkit-sticky;position:sticky;}/*!sc*/ .tOISc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;position:absolute;}/*!sc*/ .hqwSEx{display:none;min-width:0;padding-top:8px;padding-bottom:8px;}/*!sc*/ .bDVoEr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;margin-left:8px;margin-right:8px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%;}/*!sc*/ .kYLlPM{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .gYjEmn{margin-left:4px;margin-right:8px;}/*!sc*/ .kGqOLL{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .fHind{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:14px;min-width:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .dnZoUW{font-weight:600;display:inline-block;max-width:100%;font-size:14px;}/*!sc*/ .kTvpNk{padding-left:8px;padding-top:8px;padding-bottom:8px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));border:1px solid var(--borderColor-default,var(--color-border-default));border-radius:6px 6px 0px 0px;}/*!sc*/ .iNMjfP{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;min-width:0;}/*!sc*/ .fefCSX{display:block;position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:-1px;margin-bottom:-1px;--separator-color:transparent;}/*!sc*/ .fefCSX:not(:last-child){margin-right:1px;}/*!sc*/ .fefCSX:not(:last-child):after{background-color:var(--separator-color);content:"";position:absolute;right:-2px;top:8px;bottom:8px;width:1px;}/*!sc*/ .fefCSX:focus-within:has(:focus-visible){--separator-color:transparent;}/*!sc*/ .fefCSX:first-child{margin-left:-1px;}/*!sc*/ .fefCSX:last-child{margin-right:-1px;}/*!sc*/ .idgUkN{display:block;position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:-1px;margin-bottom:-1px;--separator-color:var(--borderColor-default,var(--color-border-default,#d0d7de));}/*!sc*/ .idgUkN:not(:last-child){margin-right:1px;}/*!sc*/ .idgUkN:not(:last-child):after{background-color:var(--separator-color);content:"";position:absolute;right:-2px;top:8px;bottom:8px;width:1px;}/*!sc*/ .idgUkN:focus-within:has(:focus-visible){--separator-color:transparent;}/*!sc*/ .idgUkN:first-child{margin-left:-1px;}/*!sc*/ .idgUkN:last-child{margin-right:-1px;}/*!sc*/ .kcLCKF{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;margin-right:8px;}/*!sc*/ .kVWtTz{gap:8px;}/*!sc*/ .hGyMdv{border:1px solid;border-top:none;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:0px 0px 6px 6px;min-width:273px;}/*!sc*/ .dceWRL{background-color:var(--bgColor-default,var(--color-canvas-default));border:0px;border-width:0;border-radius:0px 0px 6px 6px;padding:0;min-width:0;margin-top:46px;}/*!sc*/ .dGXHv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;padding-top:8px;padding-bottom:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;min-width:0;position:relative;}/*!sc*/ .bpDFns{position:relative;}/*!sc*/ .iJOeCH{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;min-width:0;}/*!sc*/ .icMNwR{tab-size:2;isolation:isolate;position:relative;overflow:auto;max-width:unset;}/*!sc*/ .cJGaMs{margin:1px 8px;position:absolute;z-index:1;}/*!sc*/ .iGLarr{position:absolute;}/*!sc*/ .cCoXib{position:fixed;top:0;right:0;height:100%;width:15px;-webkit-transition:-webkit-transform 0.3s;-webkit-transition:transform 0.3s;transition:transform 0.3s;z-index:1;}/*!sc*/ .cCoXib:hover{-webkit-transform:scaleX(1.5);-ms-transform:scaleX(1.5);transform:scaleX(1.5);}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"hOfjFo,oDGAe,kowOcT,gISSDQ,fLEPlD,hPvFuC,fFSoPl,bTBnTW,bHLmSv,iKqMNA,FxAyp,leYMvG,KMPzq,hfKjHv,gZWyZE,dwYKDk,ibcGmb,hKaEJF,XosP,gUkoLg,hzSPyu,bZBlpz,lhTYNA,dbrgmi,dHJiml,cEytCf,fzFXnm,iMnkmv,ghzDag,kHuKdh,kgiVEz,jGhzSQ,faNtbn,fmQaBv,dJxjrT,eFxKDQ,dzCJzi,ldRxiI,fVkfyA,gNAmSV,jNEwzY,bsDwxw,jdLMhu,tOISc,hqwSEx,bDVoEr,kYLlPM,gYjEmn,kGqOLL,fHind,dnZoUW,kTvpNk,iNMjfP,fefCSX,idgUkN,kcLCKF,kVWtTz,hGyMdv,dceWRL,dGXHv,bpDFns,iJOeCH,icMNwR,cJGaMs,iGLarr,cCoXib,"}/*!sc*/ .eMMFM{min-width:0;}/*!sc*/ .eMMFM:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .eMMFM:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .eMMFM:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .eMMFM:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .eMMFM:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .eMMFM:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .eMMFM:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ .HlHVj{padding-left:4px;padding-right:4px;font-weight:400;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:16px;}/*!sc*/ .HlHVj:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .HlHVj:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .HlHVj:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .HlHVj:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .HlHVj:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .HlHVj:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .HlHVj:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ .lauzFl{padding-left:4px;padding-right:4px;font-weight:400;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-size:14px;}/*!sc*/ .lauzFl:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}/*!sc*/ .lauzFl:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}/*!sc*/ .lauzFl:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}/*!sc*/ .lauzFl:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}/*!sc*/ .lauzFl:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}/*!sc*/ .lauzFl:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}/*!sc*/ .lauzFl:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}/*!sc*/ data-styled.g3[id="Text__StyledText-sc-17v1xeu-0"]{content:"eMMFM,HlHVj,lauzFl,"}/*!sc*/ .gwqFqs{font-size:14px;line-height:20px;color:var(--fgColor-default,var(--color-fg-default,#1F2328));vertical-align:middle;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));border:1px solid var(--control-borderColor-rest,var(--borderColor-default,var(--color-border-default,#d0d7de)));border-radius:6px;outline:none;box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset,inset 0 1px 0 rgba(208,215,222,0.2)));display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;min-height:32px;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .gwqFqs input,.gwqFqs textarea{cursor:text;}/*!sc*/ .gwqFqs select{cursor:pointer;}/*!sc*/ .gwqFqs input::-webkit-input-placeholder,.gwqFqs textarea::-webkit-input-placeholder,.gwqFqs select::-webkit-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input::-moz-placeholder,.gwqFqs textarea::-moz-placeholder,.gwqFqs select::-moz-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input:-ms-input-placeholder,.gwqFqs textarea:-ms-input-placeholder,.gwqFqs select:-ms-input-placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs input::placeholder,.gwqFqs textarea::placeholder,.gwqFqs select::placeholder{color:var(---control-fgColor-placeholder,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gwqFqs:focus-within{border-color:var(--fgColor-accent,var(--color-accent-fg,#0969da));outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .gwqFqs > textarea{padding:12px;}/*!sc*/ @media (min-width:768px){.gwqFqs{font-size:14px;}}/*!sc*/ data-styled.g9[id="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0"]{content:"gwqFqs,"}/*!sc*/ .decvaq{background-repeat:no-repeat;background-position:right 8px center;padding-left:12px;padding-right:12px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:160px;}/*!sc*/ .decvaq > :not(:last-child){margin-right:8px;}/*!sc*/ .decvaq .TextInput-icon,.decvaq .TextInput-action{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}/*!sc*/ .decvaq > input,.decvaq > select{padding-left:0;padding-right:0;}/*!sc*/ data-styled.g10[id="TextInputWrapper-sc-1mqhpbi-1"]{content:"decvaq,"}/*!sc*/ .kBQCgV{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .kBQCgV:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .kBQCgV:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .kBQCgV:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .kBQCgV[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .kBQCgV[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .kBQCgV:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .kBQCgV:active{-webkit-transition:none;transition:none;}/*!sc*/ .kBQCgV[data-inactive]{cursor:auto;}/*!sc*/ .kBQCgV:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .kBQCgV:disabled [data-component=ButtonCounter],.kBQCgV:disabled [data-component="leadingVisual"],.kBQCgV:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.kBQCgV:focus{outline:solid 1px transparent;}}/*!sc*/ .kBQCgV [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .kBQCgV[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .kBQCgV[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .kBQCgV[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .kBQCgV[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .kBQCgV[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .kBQCgV[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .kBQCgV[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .kBQCgV[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .kBQCgV[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .kBQCgV[data-block="block"]{width:100%;}/*!sc*/ .kBQCgV[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .kBQCgV[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .kBQCgV[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .kBQCgV[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .kBQCgV[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .kBQCgV[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .kBQCgV [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .kBQCgV [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .kBQCgV [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .kBQCgV [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .kBQCgV [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .kBQCgV:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .kBQCgV:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .kBQCgV[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .kBQCgV[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .kBQCgV[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .kBQCgV:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .kBQCgV:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .kBQCgV:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .kBQCgV[data-size="medium"]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));padding-left:8px;padding-right:8px;display:none;}/*!sc*/ @media screen and (max-width:768px){.kBQCgV[data-size="medium"]{display:block;}}/*!sc*/ .dPmZyJ{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .dPmZyJ:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dPmZyJ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .dPmZyJ:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dPmZyJ[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .dPmZyJ[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .dPmZyJ:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .dPmZyJ:active{-webkit-transition:none;transition:none;}/*!sc*/ .dPmZyJ[data-inactive]{cursor:auto;}/*!sc*/ .dPmZyJ:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .dPmZyJ:disabled [data-component=ButtonCounter],.dPmZyJ:disabled [data-component="leadingVisual"],.dPmZyJ:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.dPmZyJ:focus{outline:solid 1px transparent;}}/*!sc*/ .dPmZyJ [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dPmZyJ[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .dPmZyJ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dPmZyJ[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .dPmZyJ[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .dPmZyJ[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .dPmZyJ[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dPmZyJ[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .dPmZyJ[data-block="block"]{width:100%;}/*!sc*/ .dPmZyJ[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .dPmZyJ[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .dPmZyJ[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .dPmZyJ[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .dPmZyJ[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .dPmZyJ [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .dPmZyJ [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .dPmZyJ [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dPmZyJ [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dPmZyJ [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .dPmZyJ:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .dPmZyJ:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .dPmZyJ[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .dPmZyJ[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dPmZyJ[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .dPmZyJ:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .dPmZyJ:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .dPmZyJ:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .iQGjqs{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .iQGjqs:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iQGjqs:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .iQGjqs:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iQGjqs[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .iQGjqs[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .iQGjqs:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .iQGjqs:active{-webkit-transition:none;transition:none;}/*!sc*/ .iQGjqs[data-inactive]{cursor:auto;}/*!sc*/ .iQGjqs:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .iQGjqs:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.iQGjqs:focus{outline:solid 1px transparent;}}/*!sc*/ .iQGjqs [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .iQGjqs[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .iQGjqs[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .iQGjqs[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .iQGjqs[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iQGjqs[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .iQGjqs[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .iQGjqs[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .iQGjqs[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iQGjqs[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .iQGjqs[data-block="block"]{width:100%;}/*!sc*/ .iQGjqs[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .iQGjqs[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .iQGjqs[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .iQGjqs[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .iQGjqs[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .iQGjqs[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .iQGjqs [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .iQGjqs [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .iQGjqs [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .iQGjqs [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .iQGjqs [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .iQGjqs [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iQGjqs [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iQGjqs [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .iQGjqs:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .iQGjqs:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iQGjqs[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iQGjqs [data-component="leadingVisual"],.iQGjqs [data-component="trailingVisual"],.iQGjqs [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iQGjqs[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iQGjqs[data-size="medium"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .iQGjqs[data-size="medium"] svg{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iQGjqs[data-size="medium"] > span{width:inherit;}/*!sc*/ .iLfocZ{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .iLfocZ:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iLfocZ:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .iLfocZ:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iLfocZ[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .iLfocZ[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .iLfocZ:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .iLfocZ:active{-webkit-transition:none;transition:none;}/*!sc*/ .iLfocZ[data-inactive]{cursor:auto;}/*!sc*/ .iLfocZ:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .iLfocZ:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.iLfocZ:focus{outline:solid 1px transparent;}}/*!sc*/ .iLfocZ [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .iLfocZ[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .iLfocZ[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .iLfocZ[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .iLfocZ[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iLfocZ[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .iLfocZ[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .iLfocZ[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .iLfocZ[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iLfocZ[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .iLfocZ[data-block="block"]{width:100%;}/*!sc*/ .iLfocZ[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .iLfocZ[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .iLfocZ[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .iLfocZ[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .iLfocZ[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .iLfocZ[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .iLfocZ [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .iLfocZ [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .iLfocZ [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .iLfocZ [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .iLfocZ [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .iLfocZ [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iLfocZ [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iLfocZ [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .iLfocZ:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .iLfocZ:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iLfocZ[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .iLfocZ [data-component="leadingVisual"],.iLfocZ [data-component="trailingVisual"],.iLfocZ [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iLfocZ[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iLfocZ[data-size="medium"][data-no-visuals]{border-top-left-radius:0;border-bottom-left-radius:0;display:none;}/*!sc*/ .JVsBq{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .JVsBq:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .JVsBq:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .JVsBq:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .JVsBq[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .JVsBq[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .JVsBq:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .JVsBq:active{-webkit-transition:none;transition:none;}/*!sc*/ .JVsBq[data-inactive]{cursor:auto;}/*!sc*/ .JVsBq:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .JVsBq:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.JVsBq:focus{outline:solid 1px transparent;}}/*!sc*/ .JVsBq [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .JVsBq[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .JVsBq[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .JVsBq[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .JVsBq[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .JVsBq[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .JVsBq[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .JVsBq[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .JVsBq[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .JVsBq[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .JVsBq[data-block="block"]{width:100%;}/*!sc*/ .JVsBq[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .JVsBq[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .JVsBq[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .JVsBq[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .JVsBq[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .JVsBq[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .JVsBq [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .JVsBq [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .JVsBq [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .JVsBq [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .JVsBq [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .JVsBq [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .JVsBq [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .JVsBq [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .JVsBq:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .JVsBq:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .JVsBq[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .JVsBq [data-component="leadingVisual"],.JVsBq [data-component="trailingVisual"],.JVsBq [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .JVsBq[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .JVsBq[data-size="medium"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .fwExmK{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .fwExmK:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .fwExmK:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .fwExmK:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .fwExmK[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .fwExmK[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .fwExmK:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .fwExmK:active{-webkit-transition:none;transition:none;}/*!sc*/ .fwExmK[data-inactive]{cursor:auto;}/*!sc*/ .fwExmK:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .fwExmK:disabled [data-component=ButtonCounter],.fwExmK:disabled [data-component="leadingVisual"],.fwExmK:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.fwExmK:focus{outline:solid 1px transparent;}}/*!sc*/ .fwExmK [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .fwExmK[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .fwExmK[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;color:var(--fgColor-default,var(--color-fg-default,#1F2328));margin-left:8px;}/*!sc*/ .fwExmK[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .fwExmK[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .fwExmK[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .fwExmK[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .fwExmK[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .fwExmK[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .fwExmK[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .fwExmK[data-block="block"]{width:100%;}/*!sc*/ .fwExmK[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .fwExmK[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .fwExmK[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .fwExmK[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .fwExmK[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .fwExmK[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .fwExmK [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .fwExmK [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .fwExmK [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .fwExmK [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .fwExmK [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .fwExmK:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .fwExmK:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .fwExmK[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .fwExmK[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .fwExmK[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .fwExmK:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .fwExmK:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .fwExmK:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .ifVXZX{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));padding-left:8px;padding-right:8px;}/*!sc*/ .ifVXZX:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ifVXZX:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .ifVXZX:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ifVXZX[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .ifVXZX[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ifVXZX:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .ifVXZX:active{-webkit-transition:none;transition:none;}/*!sc*/ .ifVXZX[data-inactive]{cursor:auto;}/*!sc*/ .ifVXZX:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .ifVXZX:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.ifVXZX:focus{outline:solid 1px transparent;}}/*!sc*/ .ifVXZX [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .ifVXZX[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .ifVXZX[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .ifVXZX[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .ifVXZX[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .ifVXZX[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .ifVXZX[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .ifVXZX[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .ifVXZX[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ifVXZX[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .ifVXZX[data-block="block"]{width:100%;}/*!sc*/ .ifVXZX[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .ifVXZX[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .ifVXZX[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .ifVXZX[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .ifVXZX[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .ifVXZX[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .ifVXZX [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .ifVXZX [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .ifVXZX [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .ifVXZX [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .ifVXZX [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .ifVXZX [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ifVXZX [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ifVXZX [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .ifVXZX:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .ifVXZX:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .ifVXZX[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .ifVXZX [data-component="leadingVisual"],.ifVXZX [data-component="trailingVisual"],.ifVXZX [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ifVXZX[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ifVXZX linkButtonSx:hover:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ifVXZX linkButtonSx:focus:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ifVXZX linkButtonSx:active:not([disabled]){-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gGdPyq{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .gGdPyq:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gGdPyq:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .gGdPyq:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .gGdPyq[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .gGdPyq[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .gGdPyq:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .gGdPyq:active{-webkit-transition:none;transition:none;}/*!sc*/ .gGdPyq[data-inactive]{cursor:auto;}/*!sc*/ .gGdPyq:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .gGdPyq:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.gGdPyq:focus{outline:solid 1px transparent;}}/*!sc*/ .gGdPyq [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .gGdPyq[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .gGdPyq[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .gGdPyq[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .gGdPyq[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .gGdPyq[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .gGdPyq[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .gGdPyq[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .gGdPyq[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gGdPyq[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .gGdPyq[data-block="block"]{width:100%;}/*!sc*/ .gGdPyq[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .gGdPyq[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .gGdPyq[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .gGdPyq[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .gGdPyq[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .gGdPyq [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .gGdPyq [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .gGdPyq [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .gGdPyq [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .gGdPyq [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .gGdPyq [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .gGdPyq [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .gGdPyq [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .gGdPyq:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .gGdPyq [data-component="leadingVisual"],.gGdPyq [data-component="trailingVisual"],.gGdPyq [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .gGdPyq[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dOuZvu{border-radius:6px;border:1px solid;border-color:var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));}/*!sc*/ .dOuZvu:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dOuZvu:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .dOuZvu:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .dOuZvu[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .dOuZvu[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .dOuZvu:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .dOuZvu:active{-webkit-transition:none;transition:none;}/*!sc*/ .dOuZvu[data-inactive]{cursor:auto;}/*!sc*/ .dOuZvu:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));border-color:var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));background-color:var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));}/*!sc*/ .dOuZvu:disabled [data-component=ButtonCounter]{color:inherit;}/*!sc*/ @media (forced-colors:active){.dOuZvu:focus{outline:solid 1px transparent;}}/*!sc*/ .dOuZvu [data-component=ButtonCounter]{font-size:12px;background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));}/*!sc*/ .dOuZvu[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .dOuZvu[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .dOuZvu[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .dOuZvu[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .dOuZvu[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .dOuZvu[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .dOuZvu[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .dOuZvu[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dOuZvu[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .dOuZvu[data-block="block"]{width:100%;}/*!sc*/ .dOuZvu[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .dOuZvu[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .dOuZvu[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .dOuZvu[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .dOuZvu[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .dOuZvu[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .dOuZvu [data-component="leadingVisual"]{grid-area:leadingVisual;}/*!sc*/ .dOuZvu [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .dOuZvu [data-component="trailingVisual"]{grid-area:trailingVisual;}/*!sc*/ .dOuZvu [data-component="trailingAction"]{margin-right:-4px;}/*!sc*/ .dOuZvu [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .dOuZvu [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .dOuZvu [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dOuZvu [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .dOuZvu:hover:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));border-color:var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));}/*!sc*/ .dOuZvu:active:not([disabled]):not([data-inactive]){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .dOuZvu[aria-expanded=true]{background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));border-color:var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));}/*!sc*/ .dOuZvu [data-component="leadingVisual"],.dOuZvu [data-component="trailingVisual"],.dOuZvu [data-component="trailingAction"]{color:var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .dOuZvu[data-component="IconButton"][data-no-visuals]:not(:disabled){color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dOuZvu[data-size="small"][data-no-visuals]{border-top-left-radius:0;border-bottom-left-radius:0;}/*!sc*/ .iZkvjn{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .iZkvjn:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iZkvjn:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .iZkvjn:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .iZkvjn[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .iZkvjn[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .iZkvjn:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .iZkvjn:active{-webkit-transition:none;transition:none;}/*!sc*/ .iZkvjn[data-inactive]{cursor:auto;}/*!sc*/ .iZkvjn:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .iZkvjn:disabled [data-component=ButtonCounter],.iZkvjn:disabled [data-component="leadingVisual"],.iZkvjn:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.iZkvjn:focus{outline:solid 1px transparent;}}/*!sc*/ .iZkvjn [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iZkvjn[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .iZkvjn[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .iZkvjn[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .iZkvjn[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .iZkvjn[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .iZkvjn[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .iZkvjn[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .iZkvjn[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iZkvjn[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .iZkvjn[data-block="block"]{width:100%;}/*!sc*/ .iZkvjn[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .iZkvjn[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .iZkvjn[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .iZkvjn[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .iZkvjn[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .iZkvjn[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .iZkvjn [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .iZkvjn [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .iZkvjn [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .iZkvjn [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .iZkvjn [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .iZkvjn:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .iZkvjn:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .iZkvjn[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .iZkvjn[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .iZkvjn[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .iZkvjn:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .iZkvjn:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .iZkvjn:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .iZkvjn[data-size="small"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));position:relative;}/*!sc*/ .ggSvLP{border-radius:6px;border:1px solid;border-color:transparent;font-family:inherit;font-weight:500;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;height:32px;padding:0 12px;gap:8px;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;-webkit-transition:80ms cubic-bezier(0.65,0,0.35,1);transition:80ms cubic-bezier(0.65,0,0.35,1);-webkit-transition-property:color,fill,background-color,border-color;transition-property:color,fill,background-color,border-color;color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));background-color:transparent;box-shadow:none;}/*!sc*/ .ggSvLP:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ggSvLP:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .ggSvLP:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-2px;}/*!sc*/ .ggSvLP[href]{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}/*!sc*/ .ggSvLP[href]:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ggSvLP:hover{-webkit-transition-duration:80ms;transition-duration:80ms;}/*!sc*/ .ggSvLP:active{-webkit-transition:none;transition:none;}/*!sc*/ .ggSvLP[data-inactive]{cursor:auto;}/*!sc*/ .ggSvLP:disabled{cursor:not-allowed;box-shadow:none;color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));background-color:var(--button-invisible-bgColor-disabled,transparent);}/*!sc*/ .ggSvLP:disabled [data-component=ButtonCounter],.ggSvLP:disabled [data-component="leadingVisual"],.ggSvLP:disabled [data-component="trailingAction"]{color:inherit;}/*!sc*/ @media (forced-colors:active){.ggSvLP:focus{outline:solid 1px transparent;}}/*!sc*/ .ggSvLP [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .ggSvLP[data-component=IconButton]{display:inline-grid;padding:unset;place-content:center;width:32px;min-width:unset;}/*!sc*/ .ggSvLP[data-size="small"]{padding:0 8px;height:28px;gap:4px;font-size:12px;}/*!sc*/ .ggSvLP[data-size="small"] [data-component="text"]{line-height:1.6666667;}/*!sc*/ .ggSvLP[data-size="small"] [data-component=ButtonCounter]{font-size:12px;}/*!sc*/ .ggSvLP[data-size="small"] [data-component="buttonContent"] > :not(:last-child){margin-right:4px;}/*!sc*/ .ggSvLP[data-size="small"][data-component=IconButton]{width:28px;padding:unset;}/*!sc*/ .ggSvLP[data-size="large"]{padding:0 16px;height:40px;gap:8px;}/*!sc*/ .ggSvLP[data-size="large"] [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ggSvLP[data-size="large"][data-component=IconButton]{width:40px;padding:unset;}/*!sc*/ .ggSvLP[data-block="block"]{width:100%;}/*!sc*/ .ggSvLP[data-label-wrap="true"]{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;height:unset;min-height:var(--control-medium-size,2rem);}/*!sc*/ .ggSvLP[data-label-wrap="true"] [data-component="buttonContent"]{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding-block:calc(var(--control-medium-paddingBlock,0.375rem) - 2px);}/*!sc*/ .ggSvLP[data-label-wrap="true"] [data-component="text"]{white-space:unset;word-break:break-word;}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="small"]{height:unset;min-height:var(--control-small-size,1.75rem);}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"]{padding-block:calc(var(--control-small-paddingBlock,0.25rem) - 2px);}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="large"]{height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem);}/*!sc*/ .ggSvLP[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"]{padding-block:calc(var(--control-large-paddingBlock,0.625rem) - 2px);}/*!sc*/ .ggSvLP[data-inactive]:not([disabled]){background-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));border-color:var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));color:var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));}/*!sc*/ .ggSvLP[data-inactive]:not([disabled]):focus-visible{box-shadow:none;}/*!sc*/ .ggSvLP [data-component="leadingVisual"]{grid-area:leadingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP [data-component="text"]{grid-area:text;line-height:1.4285714;white-space:nowrap;}/*!sc*/ .ggSvLP [data-component="trailingVisual"]{grid-area:trailingVisual;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP [data-component="trailingAction"]{margin-right:-4px;color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP [data-component="buttonContent"]{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;display:grid;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;}/*!sc*/ .ggSvLP [data-component="buttonContent"] > :not(:last-child){margin-right:8px;}/*!sc*/ .ggSvLP [data-component="loadingSpinner"]{grid-area:text;margin-right:0px !important;place-self:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .ggSvLP [data-component="loadingSpinner"] + [data-component="text"]{visibility:hidden;}/*!sc*/ .ggSvLP:hover:not([disabled]){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));}/*!sc*/ .ggSvLP:active:not([disabled]){background-color:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));}/*!sc*/ .ggSvLP[aria-expanded=true]{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));}/*!sc*/ .ggSvLP[data-component="IconButton"][data-no-visuals]{color:var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));}/*!sc*/ .ggSvLP[data-no-visuals]{color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .ggSvLP:has([data-component="ButtonCounter"]){color:var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));}/*!sc*/ .ggSvLP:disabled[data-no-visuals]{color:var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));}/*!sc*/ .ggSvLP:disabled[data-no-visuals] [data-component=ButtonCounter]{color:inherit;}/*!sc*/ .ggSvLP[data-size="small"][data-no-visuals]{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ data-styled.g11[id="types__StyledButton-sc-ws60qy-0"]{content:"kBQCgV,dPmZyJ,iQGjqs,iLfocZ,JVsBq,fwExmK,ifVXZX,gGdPyq,dOuZvu,iZkvjn,ggSvLP,"}/*!sc*/ .hWlpPn{position:relative;display:inline-block;}/*!sc*/ .hWlpPn::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;-webkit-letter-spacing:normal;-moz-letter-spacing:normal;-ms-letter-spacing:normal;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;opacity:0;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .hWlpPn:hover::after,.hWlpPn:active::after,.hWlpPn:focus::after,.hWlpPn:focus-within::after{display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-no-delay:hover::after,.hWlpPn.tooltipped-no-delay:active::after,.hWlpPn.tooltipped-no-delay:focus::after,.hWlpPn.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .hWlpPn.tooltipped-multiline:hover::after,.hWlpPn.tooltipped-multiline:active::after,.hWlpPn.tooltipped-multiline:focus::after,.hWlpPn.tooltipped-multiline:focus-within::after{display:table-cell;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-se::after,.hWlpPn.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/*!sc*/ .hWlpPn.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-sw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-n::after,.hWlpPn.tooltipped-ne::after,.hWlpPn.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/*!sc*/ .hWlpPn.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .hWlpPn.tooltipped-nw::after{margin-right:-16px;}/*!sc*/ .hWlpPn.tooltipped-s::after,.hWlpPn.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/*!sc*/ .hWlpPn.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .hWlpPn.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-s::after,.hWlpPn.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/*!sc*/ .hWlpPn.tooltipped-multiline.tooltipped-w::after,.hWlpPn.tooltipped-multiline.tooltipped-e::after{right:100%;}/*!sc*/ .hWlpPn.tooltipped-align-right-2::after{right:0;margin-right:0;}/*!sc*/ .hWlpPn.tooltipped-align-left-2::after{left:0;margin-left:0;}/*!sc*/ data-styled.g14[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"hWlpPn,"}/*!sc*/ .kbCLEG{border:0;font-size:inherit;font-family:inherit;background-color:transparent;-webkit-appearance:none;color:inherit;width:100%;}/*!sc*/ .kbCLEG:focus{outline:0;}/*!sc*/ data-styled.g15[id="UnstyledTextInput-sc-14ypya-0"]{content:"kbCLEG,"}/*!sc*/ .eAtkQz{display:inline-block;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap;max-width:125px;max-width:100%;}/*!sc*/ data-styled.g17[id="Truncate__StyledTruncate-sc-23o1d2-0"]{content:"eAtkQz,"}/*!sc*/ body[data-page-layout-dragging="true"]{cursor:col-resize;}/*!sc*/ body[data-page-layout-dragging="true"] *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}/*!sc*/ data-styled.g99[id="sc-global-gbKrvU1"]{content:"sc-global-gbKrvU1,"}/*!sc*/ .lirRhW{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;isolation:isolate;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]){margin-inline-end:-1px;position:relative;border-radius:0;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}/*!sc*/ .lirRhW.lirRhW > *:not([data-loading-wrapper]):focus,.lirRhW.lirRhW > *:not([data-loading-wrapper]):active,.lirRhW.lirRhW > *:not([data-loading-wrapper]):hover{z-index:1;}/*!sc*/ .lirRhW [data-loading-wrapper]:first-child button,.lirRhW [data-loading-wrapper]:first-child a{border-top-left-radius:6px;border-bottom-left-radius:6px;}/*!sc*/ .lirRhW [data-loading-wrapper]:last-child button,.lirRhW [data-loading-wrapper]:last-child a{border-top-right-radius:6px;border-bottom-right-radius:6px;}/*!sc*/ .lirRhW [data-loading-wrapper] > *{margin-inline-end:-1px;position:relative;border-radius:0;}/*!sc*/ .lirRhW [data-loading-wrapper] > *:focus,.lirRhW [data-loading-wrapper] > *:active,.lirRhW [data-loading-wrapper] > *:hover{z-index:1;}/*!sc*/ data-styled.g104[id="ButtonGroup__StyledButtonGroup-sc-1gxhls1-0"]{content:"lirRhW,"}/*!sc*/ .cBLqoI{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:400;padding:var(--segmented-control-button-bg-inset);height:100%;width:100%;}/*!sc*/ .cBLqoI:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .cBLqoI:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .cBLqoI:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .cBLqoI .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border-color:transparent;border-style:solid;border-width:1px;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));}/*!sc*/ .cBLqoI svg{fill:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .cBLqoI:hover .segmentedControl-content{background-color:var(--controlTrack-bgColor-hover,var(--color-segmented-control-button-hover-bg,rgba(175,184,193,0.2)));}/*!sc*/ .cBLqoI:active .segmentedControl-content{background-color:var(--controlTrack-bgColor-active,var(--color-segmented-control-button-hover-active-bg,rgba(175,184,193,0.4)));}/*!sc*/ .cBLqoI:focus:focus-visible:not(:last-child):after{width:0;}/*!sc*/ .cBLqoI .segmentedControl-text:after{content:"Preview";display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/*!sc*/ @media (pointer:coarse){.cBLqoI:before{content:"";position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/*!sc*/ .dbGjOi{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:600;padding:0;height:100%;width:100%;}/*!sc*/ .dbGjOi:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .dbGjOi:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .dbGjOi:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .dbGjOi .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg,#ffffff));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-hover-active-selected-border,#8c959f));border-style:solid;border-width:1px;border-radius:var(--segmented-control-outer-radius);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);}/*!sc*/ .dbGjOi svg{fill:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .dbGjOi:focus:focus-visible:not(:last-child):after{width:0;}/*!sc*/ .dbGjOi .segmentedControl-text:after{content:"Code";display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/*!sc*/ @media (pointer:coarse){.dbGjOi:before{content:"";position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/*!sc*/ .bHmvop{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:6px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:400;padding:var(--segmented-control-button-bg-inset);height:100%;width:100%;}/*!sc*/ .bHmvop:focus:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .bHmvop:focus:not(:disabled):not(:focus-visible){outline:solid 1px transparent;}/*!sc*/ .bHmvop:focus-visible:not(:disabled){box-shadow:none;outline:2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));outline-offset:-1px;}/*!sc*/ .bHmvop .segmentedControl-content{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;border-color:transparent;border-style:solid;border-width:1px;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));}/*!sc*/ .bHmvop svg{fill:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .bHmvop:hover .segmentedControl-content{background-color:var(--controlTrack-bgColor-hover,var(--color-segmented-control-button-hover-bg,rgba(175,184,193,0.2)));}/*!sc*/ .bHmvop:active .segmentedControl-content{background-color:var(--controlTrack-bgColor-active,var(--color-segmented-control-button-hover-active-bg,rgba(175,184,193,0.4)));}/*!sc*/ .bHmvop:focus:focus-visible:not(:last-child):after{width:0;}/*!sc*/ .bHmvop .segmentedControl-text:after{content:"Blame";display:block;font-weight:600;height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;visibility:hidden;}/*!sc*/ @media (pointer:coarse){.bHmvop:before{content:"";position:absolute;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);top:50%;min-height:44px;}}/*!sc*/ data-styled.g106[id="SegmentedControlButton__SegmentedControlButtonStyled-sc-8lkgxl-0"]{content:"cBLqoI,dbGjOi,bHmvop,"}/*!sc*/ .lawgDG{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg,#eaeef2));border-radius:6px;border:1px solid;border-color:var(--controlTrack-borderColor-rest,transparent);display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;height:28px;margin:0;padding:0;}/*!sc*/ data-styled.g108[id="SegmentedControl__SegmentedControlList-sc-1rzig82-0"]{content:"lawgDG,"}/*!sc*/ </style><meta data-hydrostats="publish"/> <!-- --> <!-- --> <button hidden="" data-testid="header-permalink-button" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><div><div style="--sticky-pane-height:100vh" class="Box-sc-g0xbh4-0 hOfjFo"><div class="Box-sc-g0xbh4-0 oDGAe"><div class="Box-sc-g0xbh4-0 kowOcT"><div tabindex="0" class="Box-sc-g0xbh4-0 gISSDQ"><div class="Box-sc-g0xbh4-0 fLEPlD"><div class="Box-sc-g0xbh4-0 hPvFuC"></div><div style="--pane-width:320px" class="Box-sc-g0xbh4-0 fFSoPl"></div><div class="Box-sc-g0xbh4-0 bTBnTW"><div role="slider" aria-label="Draggable pane splitter" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" aria-valuetext="Pane width 0 pixels" tabindex="0" class="Box-sc-g0xbh4-0 bHLmSv"></div></div></div></div><div class="Box-sc-g0xbh4-0 iKqMNA"><div class="Box-sc-g0xbh4-0"></div><div class="Box-sc-g0xbh4-0 FxAyp"><div data-selector="repos-split-pane-content" tabindex="0" class="Box-sc-g0xbh4-0 leYMvG"><div class="Box-sc-g0xbh4-0 KMPzq"><div class="Box-sc-g0xbh4-0 hfKjHv container"><div class="px-3 pt-3 pb-0" id="StickyHeader"><div class="Box-sc-g0xbh4-0 gZWyZE"><div class="Box-sc-g0xbh4-0 dwYKDk"><div class="Box-sc-g0xbh4-0 ibcGmb react-code-view-header-wrap--narrow"><div class="Box-sc-g0xbh4-0 hKaEJF"><h2 class="Box-sc-g0xbh4-0 XosP prc-Heading-Heading-6CmGO"><button style="--button-color:fg.muted" type="button" aria-label="Expand file tree" data-testid="expand-file-tree-button-mobile" class="types__StyledButton-sc-ws60qy-0 kBQCgV" data-loading="false" data-size="medium" aria-describedby=":Rld9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-arrow-left" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"></path></svg></span><span data-component="text">Files</span></span></button><span role="tooltip" aria-label="Expand file tree" id="expand-button-file-tree-button" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-se"><button data-component="IconButton" type="button" data-testid="expand-file-tree-button" aria-controls="repos-file-tree" class="types__StyledButton-sc-ws60qy-0 dPmZyJ position-relative ExpandFileTreeButton-module__expandButton--gL4is ExpandFileTreeButton-module__filesButtonBreakpoint--WfX9t fgColor-muted prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R35d9lab:-loading-announcement" aria-labelledby="expand-button-file-tree-button"><svg aria-hidden="true" focusable="false" class="octicon octicon-sidebar-collapse" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M6.823 7.823a.25.25 0 0 1 0 .354l-2.396 2.396A.25.25 0 0 1 4 10.396V5.604a.25.25 0 0 1 .427-.177Z"></path><path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25H9.5v-13H1.75a.25.25 0 0 0-.25.25ZM11 14.5h3.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H11Z"></path></svg></button></span><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button></h2></div><div class="react-code-view-header-mb--narrow mr-2"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="main branch" data-testid="anchor-button" class="types__StyledButton-sc-ws60qy-0 iQGjqs ref-selector-class" data-loading="false" data-size="medium" aria-describedby="branch-picker-repos-header-ref-selector-wide-loading-announcement" id="branch-picker-repos-header-ref-selector-wide"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 dbrgmi ref-selector-button-text-container"><span class="Text__StyledText-sc-17v1xeu-0 eMMFM"> <!-- -->main</span></div></div></span><span data-component="trailingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 dHJiml react-code-view-header-mb--narrow"><div class="Box-sc-g0xbh4-0 cEytCf"><nav data-testid="breadcrumbs" aria-labelledby="repos-header-breadcrumb-heading" id="repos-header-breadcrumb" class="Box-sc-g0xbh4-0 fzFXnm"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="repos-header-breadcrumb-heading">Breadcrumbs</h2><ol class="Box-sc-g0xbh4-0 iMnkmv"><li class="Box-sc-g0xbh4-0 ghzDag"><a class="Box-sc-g0xbh4-0 kHuKdh prc-Link-Link-85e08" sx="[object Object]" data-testid="breadcrumbs-repo-link" href="/mdn/content/tree/main">content</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files">files</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us">en-us</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn">learn</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn/tools_and_testing">tools_and_testing</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks">client-side_javascript_frameworks</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features">main_features</a></li></ol></nav><div data-testid="breadcrumbs-filename" class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 HlHVj" aria-hidden="true">/</span><h1 class="Box-sc-g0xbh4-0 jGhzSQ prc-Heading-Heading-6CmGO" tabindex="-1" id="file-name-id">index.md</h1></div><div aria-describedby=":R1td9lab:"><button data-component="IconButton" type="button" aria-label="Copy path" tabindex="0" class="types__StyledButton-sc-ws60qy-0 dPmZyJ prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":R7td9lab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button></div></div></div></div><div class="react-code-view-header-element--wide"><div class="Box-sc-g0xbh4-0 faNtbn"><div class="d-flex gap-2"> <div><div class="Box-sc-g0xbh4-0 fmQaBv"><span class="TextInputWrapper__TextInputBaseWrapper-sc-1mqhpbi-0 TextInputWrapper-sc-1mqhpbi-1 gwqFqs decvaq TextInput-wrapper" aria-busy="false"><span class="TextInput-icon" id=":R5j6d9lab:" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="octicon octicon-search" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path></svg></span><input type="text" aria-label="Go to file" role="combobox" aria-controls="file-results-list" aria-expanded="false" aria-haspopup="dialog" autoCorrect="off" spellcheck="false" placeholder="Go to file" aria-describedby=":R5j6d9lab: :R5j6d9labH1:" data-component="input" class="UnstyledTextInput-sc-14ypya-0 kbCLEG" value=""/><span class="TextInput-icon" id=":R5j6d9labH1:" aria-hidden="true"></span></span></div><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button></div><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button type="button" class="types__StyledButton-sc-ws60qy-0 iLfocZ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R2l6d9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Blame</span></span></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button data-component="IconButton" type="button" aria-label="More file actions" title="More file actions" data-testid="more-file-actions-button-nav-menu-wide" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 JVsBq js-blob-dropdown-click prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R156d9lab:-loading-announcement" id=":R156d9lab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button> </div></div></div><div class="react-code-view-header-element--narrow"><div class="Box-sc-g0xbh4-0 faNtbn"><div class="d-flex gap-2"> <button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><button type="button" class="types__StyledButton-sc-ws60qy-0 iLfocZ" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R2l7d9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Blame</span></span></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button data-component="IconButton" type="button" aria-label="More file actions" title="More file actions" data-testid="more-file-actions-button-nav-menu-narrow" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 JVsBq js-blob-dropdown-click prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" aria-describedby=":R157d9lab:-loading-announcement" id=":R157d9lab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button> </div></div></div></div></div></div></div></div><div class="Box-sc-g0xbh4-0 dJxjrT react-code-view-bottom-padding"> <div class="Box-sc-g0xbh4-0 eFxKDQ"></div> <!-- --> <!-- --> </div><div class="Box-sc-g0xbh4-0 dJxjrT"> <!-- --> <!-- --> <button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button><div class="d-flex flex-column border rounded-2 mb-3 pl-1"><div class="Box-sc-g0xbh4-0 dzCJzi"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">Latest commit</h2><div style="width:120px" class="Skeleton Skeleton--text" data-testid="loading"> </div><div class="d-flex flex-shrink-0 gap-2"><div data-testid="latest-commit-details" class="d-none d-sm-flex flex-items-center"></div><div class="d-flex gap-2"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">History</h2><a href="/mdn/content/commits/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md" class="types__StyledButton-sc-ws60qy-0 dPmZyJ d-none d-lg-flex LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" aria-describedby=":R5dlal9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span><span data-component="text"><span class="fgColor-default">History</span></span></span></a><div class="d-sm-none"></div><div class="d-flex d-lg-none"><span role="tooltip" aria-label="History" id="history-icon-button-tooltip" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><a href="/mdn/content/commits/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md" class="types__StyledButton-sc-ws60qy-0 dPmZyJ LinkButton-module__code-view-link-button--xvCGA flex-items-center fgColor-default" data-loading="false" data-size="small" aria-describedby=":Rpdlal9lab:-loading-announcement history-icon-button-tooltip"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-history" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path></svg></span></span></a></span></div></div></div></div></div><div class="Box-sc-g0xbh4-0 ldRxiI"><div class="Box-sc-g0xbh4-0 fVkfyA container"><div class="Box-sc-g0xbh4-0 gNAmSV react-code-size-details-banner"><div class="Box-sc-g0xbh4-0 jNEwzY react-code-size-details-banner"><div class="Box-sc-g0xbh4-0 bsDwxw text-mono"><div title="19.5 KB" data-testid="blob-size" class="Truncate__StyledTruncate-sc-23o1d2-0 eAtkQz"><span>327 lines (224 loc) · 19.5 KB</span></div></div></div></div><div class="Box-sc-g0xbh4-0 jdLMhu react-blob-view-header-sticky" id="repos-sticky-header"><div class="Box-sc-g0xbh4-0 tOISc"><div class="react-blob-sticky-header"><div class="Box-sc-g0xbh4-0 hqwSEx"><div class="Box-sc-g0xbh4-0 bDVoEr"><div class="Box-sc-g0xbh4-0 kYLlPM"><div class="Box-sc-g0xbh4-0 gYjEmn"><button type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-label="main branch" data-testid="anchor-button" class="types__StyledButton-sc-ws60qy-0 iQGjqs ref-selector-class" data-loading="false" data-size="medium" aria-describedby="branch-picker-repos-header-ref-selector-loading-announcement" id="branch-picker-repos-header-ref-selector"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text"><div class="Box-sc-g0xbh4-0 bZBlpz"><div class="Box-sc-g0xbh4-0 lhTYNA"><svg aria-hidden="true" focusable="false" class="octicon octicon-git-branch" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path></svg></div><div class="Box-sc-g0xbh4-0 dbrgmi ref-selector-button-text-container"><span class="Text__StyledText-sc-17v1xeu-0 eMMFM"> <!-- -->main</span></div></div></span><span data-component="trailingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-triangle-down" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path></svg></span></span></button><button hidden="" data-hotkey-scope="read-only-cursor-text-area"></button></div><div class="Box-sc-g0xbh4-0 kGqOLL"><div class="Box-sc-g0xbh4-0 fHind"><nav data-testid="breadcrumbs" aria-labelledby="sticky-breadcrumb-heading" id="sticky-breadcrumb" class="Box-sc-g0xbh4-0 fzFXnm"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading" id="sticky-breadcrumb-heading">Breadcrumbs</h2><ol class="Box-sc-g0xbh4-0 iMnkmv"><li class="Box-sc-g0xbh4-0 ghzDag"><a class="Box-sc-g0xbh4-0 kHuKdh prc-Link-Link-85e08" sx="[object Object]" data-testid="breadcrumbs-repo-link" href="/mdn/content/tree/main">content</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files">files</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us">en-us</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn">learn</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn/tools_and_testing">tools_and_testing</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks">client-side_javascript_frameworks</a></li><li class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><a class="Box-sc-g0xbh4-0 kgiVEz prc-Link-Link-85e08" sx="[object Object]" href="/mdn/content/tree/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features">main_features</a></li></ol></nav><div data-testid="breadcrumbs-filename" class="Box-sc-g0xbh4-0 ghzDag"><span class="Text__StyledText-sc-17v1xeu-0 lauzFl" aria-hidden="true">/</span><h1 class="Box-sc-g0xbh4-0 dnZoUW prc-Heading-Heading-6CmGO" tabindex="-1" id="sticky-file-name-id">index.md</h1></div></div></div></div><button style="--button-color:fg.default" type="button" class="types__StyledButton-sc-ws60qy-0 fwExmK" data-loading="false" data-size="small" aria-describedby=":Riptal9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="leadingVisual" class="Box-sc-g0xbh4-0 hzSPyu"><svg aria-hidden="true" focusable="false" class="octicon octicon-arrow-up" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M3.47 7.78a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018L9 4.81v7.44a.75.75 0 0 1-1.5 0V4.81L4.53 7.78a.75.75 0 0 1-1.06 0Z"></path></svg></span><span data-component="text">Top</span></span></button></div></div></div><div class="Box-sc-g0xbh4-0 kTvpNk"><h2 class="sr-only prc-Heading-Heading-6CmGO" data-testid="screen-reader-heading">File metadata and controls</h2><div class="Box-sc-g0xbh4-0 iNMjfP"><ul aria-label="File view" class="SegmentedControl__SegmentedControlList-sc-1rzig82-0 lawgDG"><li class="Box-sc-g0xbh4-0 fefCSX"><button aria-current="false" type="button" class="SegmentedControlButton__SegmentedControlButtonStyled-sc-8lkgxl-0 cBLqoI"><span class="segmentedControl-content"><div class="Box-sc-g0xbh4-0 segmentedControl-text">Preview</div></span></button></li><li class="Box-sc-g0xbh4-0 fefCSX"><button aria-current="true" type="button" class="SegmentedControlButton__SegmentedControlButtonStyled-sc-8lkgxl-0 dbGjOi"><span class="segmentedControl-content"><div class="Box-sc-g0xbh4-0 segmentedControl-text">Code</div></span></button></li><li class="Box-sc-g0xbh4-0 idgUkN"><button aria-current="false" type="button" class="SegmentedControlButton__SegmentedControlButtonStyled-sc-8lkgxl-0 bHmvop"><span class="segmentedControl-content"><div class="Box-sc-g0xbh4-0 segmentedControl-text">Blame</div></span></button></li></ul><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><div class="Box-sc-g0xbh4-0 jNEwzY react-code-size-details-in-header"><div class="Box-sc-g0xbh4-0 bsDwxw text-mono"><div title="19.5 KB" data-testid="blob-size" class="Truncate__StyledTruncate-sc-23o1d2-0 eAtkQz"><span>327 lines (224 loc) · 19.5 KB</span></div></div></div></div><div class="Box-sc-g0xbh4-0 kcLCKF"><div class="Box-sc-g0xbh4-0 kVWtTz react-blob-header-edit-and-raw-actions"><div class="ButtonGroup__StyledButtonGroup-sc-1gxhls1-0 lirRhW"><a href="https://github.com/mdn/content/raw/refs/heads/main/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md" data-testid="raw-button" class="types__StyledButton-sc-ws60qy-0 ifVXZX" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":R5csptal9lab:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg"><span data-component="text">Raw</span></span></a><button data-component="IconButton" type="button" aria-label="Copy raw content" data-testid="copy-raw-button" class="types__StyledButton-sc-ws60qy-0 gGdPyq prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":Rpcsptal9lab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span role="tooltip" aria-label="Download raw file" id=":Rdcsptal9lab:" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-n"><button data-component="IconButton" type="button" aria-label="Download raw content" data-testid="download-raw-button" class="types__StyledButton-sc-ws60qy-0 dOuZvu prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":Rtcsptal9lab:-loading-announcement"><svg aria-hidden="true" focusable="false" class="octicon octicon-download" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path><path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path></svg></button></span></div><button hidden="" data-testid="raw-button-shortcut" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden="" data-testid="copy-raw-button-shortcut" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden="" data-testid="download-raw-button-shortcut" data-hotkey-scope="read-only-cursor-text-area"></button></div><span role="tooltip" aria-label="Open symbols panel" id=":R5sptal9lab:" class="Tooltip__TooltipBase-sc-17tf59c-0 hWlpPn tooltipped-nw"><button data-component="IconButton" type="button" aria-label="Symbols" aria-pressed="false" aria-expanded="false" aria-controls="symbols-pane" data-testid="symbols-button" class="types__StyledButton-sc-ws60qy-0 iZkvjn prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby="symbols-button-loading-announcement" id="symbols-button"><svg aria-hidden="true" focusable="false" class="octicon octicon-code-square" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path></svg></button></span><div class="react-blob-header-edit-and-raw-actions-combined"><button data-component="IconButton" type="button" aria-label="Edit and raw actions" title="More file actions" data-testid="more-file-actions-button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="types__StyledButton-sc-ws60qy-0 ggSvLP js-blob-dropdown-click prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" aria-describedby=":Rnsptal9lab:-loading-announcement" id=":Rnsptal9lab:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button></div></div></div></div><div></div></div><div class="Box-sc-g0xbh4-0 hGyMdv"><section aria-labelledby="file-name-id-wide file-name-id-mobile" class="Box-sc-g0xbh4-0 dceWRL"><div class="Box-sc-g0xbh4-0 dGXHv"><div id="highlighted-line-menu-positioner" class="position-relative"><div id="copilot-button-positioner" class="Box-sc-g0xbh4-0 bpDFns"><div class="Box-sc-g0xbh4-0 iJOeCH"><div class="Box-sc-g0xbh4-0 icMNwR react-code-file-contents" role="presentation" aria-hidden="true" data-tab-size="2" data-paste-markdown-skip="true" data-hpc="true"><div class="react-line-numbers" style="pointer-events:auto"><div data-line-number="1" class="react-line-number react-code-text" style="padding-right:16px">1</div><div data-line-number="2" class="react-line-number react-code-text" style="padding-right:16px">2</div><div data-line-number="3" class="react-line-number react-code-text" style="padding-right:16px">3</div><div data-line-number="4" class="react-line-number react-code-text" style="padding-right:16px">4</div><div data-line-number="5" class="react-line-number react-code-text" style="padding-right:16px">5</div><div data-line-number="6" class="react-line-number react-code-text" style="padding-right:16px">6</div><div data-line-number="7" class="react-line-number react-code-text" style="padding-right:16px">7</div><div data-line-number="8" class="react-line-number react-code-text" style="padding-right:16px">8</div><div data-line-number="9" class="react-line-number react-code-text" style="padding-right:16px">9</div><div data-line-number="10" class="react-line-number react-code-text" style="padding-right:16px">10</div><div data-line-number="11" class="react-line-number react-code-text" style="padding-right:16px">11</div><div data-line-number="12" class="react-line-number react-code-text" style="padding-right:16px">12</div><div data-line-number="13" class="react-line-number react-code-text" style="padding-right:16px">13</div><div data-line-number="14" class="react-line-number react-code-text" style="padding-right:16px">14</div><div data-line-number="15" class="react-line-number react-code-text" style="padding-right:16px">15</div><div data-line-number="16" class="react-line-number react-code-text" style="padding-right:16px">16</div><div data-line-number="17" class="react-line-number react-code-text" style="padding-right:16px">17</div><div data-line-number="18" class="react-line-number react-code-text" style="padding-right:16px">18</div><div data-line-number="19" class="react-line-number react-code-text" style="padding-right:16px">19</div><div data-line-number="20" class="react-line-number react-code-text" style="padding-right:16px">20</div><div data-line-number="21" class="react-line-number react-code-text" style="padding-right:16px">21</div><div data-line-number="22" class="react-line-number react-code-text" style="padding-right:16px">22</div><div data-line-number="23" class="react-line-number react-code-text" style="padding-right:16px">23</div><div data-line-number="24" class="react-line-number react-code-text" style="padding-right:16px">24</div><div data-line-number="25" class="react-line-number react-code-text" style="padding-right:16px">25</div><div data-line-number="26" class="react-line-number react-code-text" style="padding-right:16px">26</div><div data-line-number="27" class="react-line-number react-code-text" style="padding-right:16px">27</div><div data-line-number="28" class="react-line-number react-code-text" style="padding-right:16px">28<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="29" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">29</div><div data-line-number="30" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">30</div><div data-line-number="31" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">31</div><div data-line-number="32" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">32</div><div data-line-number="33" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">33</div><div data-line-number="34" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">34</div><div data-line-number="35" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">35</div><div data-line-number="36" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">36<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="37" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">37</div><div data-line-number="38" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">38</div><div data-line-number="39" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">39</div><div data-line-number="40" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">40</div><div data-line-number="41" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">41</div><div data-line-number="42" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">42</div><div data-line-number="43" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">43</div><div data-line-number="44" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">44</div><div data-line-number="45" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">45</div><div data-line-number="46" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">46</div><div data-line-number="47" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">47</div><div data-line-number="48" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">48</div><div data-line-number="49" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">49</div><div data-line-number="50" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">50</div><div data-line-number="51" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">51</div><div data-line-number="52" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">52</div><div data-line-number="53" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">53</div><div data-line-number="54" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">54</div><div data-line-number="55" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">55</div><div data-line-number="56" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">56</div><div data-line-number="57" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">57</div><div data-line-number="58" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">58</div><div data-line-number="59" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">59</div><div data-line-number="60" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">60</div><div data-line-number="61" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">61</div><div data-line-number="62" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">62</div><div data-line-number="63" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">63</div><div data-line-number="64" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">64</div><div data-line-number="65" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">65</div><div data-line-number="66" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">66</div><div data-line-number="67" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">67</div><div data-line-number="68" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">68</div><div data-line-number="69" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">69</div><div data-line-number="70" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">70</div><div data-line-number="71" class="child-of-line-27 child-of-line-35 react-line-number react-code-text" style="padding-right:16px">71</div><div data-line-number="72" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">72<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="73" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">73</div><div data-line-number="74" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">74</div><div data-line-number="75" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">75</div><div data-line-number="76" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">76</div><div data-line-number="77" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">77</div><div data-line-number="78" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">78</div><div data-line-number="79" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">79</div><div data-line-number="80" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">80</div><div data-line-number="81" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">81</div><div data-line-number="82" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">82</div><div data-line-number="83" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">83</div><div data-line-number="84" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">84</div><div data-line-number="85" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">85</div><div data-line-number="86" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">86</div><div data-line-number="87" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">87</div><div data-line-number="88" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">88</div><div data-line-number="89" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">89</div><div data-line-number="90" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">90</div><div data-line-number="91" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">91</div><div data-line-number="92" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">92</div><div data-line-number="93" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">93</div><div data-line-number="94" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">94</div><div data-line-number="95" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">95</div><div data-line-number="96" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">96</div><div data-line-number="97" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">97</div><div data-line-number="98" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">98</div><div data-line-number="99" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">99</div><div data-line-number="100" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">100</div><div data-line-number="101" class="child-of-line-27 child-of-line-71 react-line-number react-code-text" style="padding-right:16px">101</div><div data-line-number="102" class="child-of-line-27 react-line-number react-code-text" style="padding-right:16px">102<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="103" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">103</div><div data-line-number="104" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">104</div><div data-line-number="105" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">105</div><div data-line-number="106" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">106</div><div data-line-number="107" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">107</div><div data-line-number="108" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">108</div><div data-line-number="109" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">109</div><div data-line-number="110" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">110</div><div data-line-number="111" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">111</div><div data-line-number="112" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">112</div><div data-line-number="113" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">113</div><div data-line-number="114" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">114</div><div data-line-number="115" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">115</div><div data-line-number="116" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">116</div><div data-line-number="117" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">117</div><div data-line-number="118" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">118</div><div data-line-number="119" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">119</div><div data-line-number="120" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">120</div><div data-line-number="121" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">121</div><div data-line-number="122" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">122</div><div data-line-number="123" class="child-of-line-27 child-of-line-101 react-line-number react-code-text" style="padding-right:16px">123</div><div data-line-number="124" class="react-line-number react-code-text" style="padding-right:16px">124<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="125" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">125</div><div data-line-number="126" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">126</div><div data-line-number="127" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">127</div><div data-line-number="128" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">128</div><div data-line-number="129" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">129</div><div data-line-number="130" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">130</div><div data-line-number="131" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">131</div><div data-line-number="132" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">132<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="133" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">133</div><div data-line-number="134" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">134</div><div data-line-number="135" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">135</div><div data-line-number="136" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">136</div><div data-line-number="137" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">137</div><div data-line-number="138" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">138</div><div data-line-number="139" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">139</div><div data-line-number="140" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">140</div><div data-line-number="141" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">141</div><div data-line-number="142" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">142</div><div data-line-number="143" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">143</div><div data-line-number="144" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">144</div><div data-line-number="145" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">145</div><div data-line-number="146" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">146</div><div data-line-number="147" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">147</div><div data-line-number="148" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">148</div><div data-line-number="149" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">149</div><div data-line-number="150" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">150</div><div data-line-number="151" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">151</div><div data-line-number="152" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">152</div><div data-line-number="153" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">153</div><div data-line-number="154" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">154</div><div data-line-number="155" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">155</div><div data-line-number="156" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">156</div><div data-line-number="157" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">157</div><div data-line-number="158" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">158</div><div data-line-number="159" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">159</div><div data-line-number="160" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">160</div><div data-line-number="161" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">161</div><div data-line-number="162" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">162</div><div data-line-number="163" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">163</div><div data-line-number="164" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">164</div><div data-line-number="165" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">165</div><div data-line-number="166" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">166</div><div data-line-number="167" class="child-of-line-123 child-of-line-131 react-line-number react-code-text" style="padding-right:16px">167</div><div data-line-number="168" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">168<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="169" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">169</div><div data-line-number="170" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">170</div><div data-line-number="171" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">171</div><div data-line-number="172" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">172</div><div data-line-number="173" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">173</div><div data-line-number="174" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">174</div><div data-line-number="175" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">175</div><div data-line-number="176" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">176</div><div data-line-number="177" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">177</div><div data-line-number="178" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">178</div><div data-line-number="179" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">179</div><div data-line-number="180" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">180</div><div data-line-number="181" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">181</div><div data-line-number="182" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">182</div><div data-line-number="183" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">183</div><div data-line-number="184" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">184</div><div data-line-number="185" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">185</div><div data-line-number="186" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">186</div><div data-line-number="187" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">187</div><div data-line-number="188" class="child-of-line-123 child-of-line-167 react-line-number react-code-text" style="padding-right:16px">188</div><div data-line-number="189" class="child-of-line-123 react-line-number react-code-text" style="padding-right:16px">189<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="190" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">190</div><div data-line-number="191" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">191</div><div data-line-number="192" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">192</div><div data-line-number="193" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">193</div><div data-line-number="194" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">194</div><div data-line-number="195" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">195</div><div data-line-number="196" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">196</div><div data-line-number="197" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">197</div><div data-line-number="198" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">198</div><div data-line-number="199" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">199</div><div data-line-number="200" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">200</div><div data-line-number="201" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">201</div><div data-line-number="202" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">202</div><div data-line-number="203" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">203</div><div data-line-number="204" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">204</div><div data-line-number="205" class="child-of-line-123 child-of-line-188 react-line-number react-code-text" style="padding-right:16px">205</div><div data-line-number="206" class="react-line-number react-code-text" style="padding-right:16px">206<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="207" class="child-of-line-205 react-line-number react-code-text" style="padding-right:16px">207</div><div data-line-number="208" class="child-of-line-205 react-line-number react-code-text" style="padding-right:16px">208</div><div data-line-number="209" class="child-of-line-205 react-line-number react-code-text" style="padding-right:16px">209</div><div data-line-number="210" class="react-line-number react-code-text" style="padding-right:16px">210<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="211" class="child-of-line-209 react-line-number react-code-text" style="padding-right:16px">211</div><div data-line-number="212" class="child-of-line-209 react-line-number react-code-text" style="padding-right:16px">212</div><div data-line-number="213" class="child-of-line-209 react-line-number react-code-text" style="padding-right:16px">213</div><div data-line-number="214" class="child-of-line-209 react-line-number react-code-text" style="padding-right:16px">214<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="215" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">215</div><div data-line-number="216" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">216</div><div data-line-number="217" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">217</div><div data-line-number="218" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">218</div><div data-line-number="219" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">219</div><div data-line-number="220" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">220</div><div data-line-number="221" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">221</div><div data-line-number="222" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">222</div><div data-line-number="223" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">223</div><div data-line-number="224" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">224</div><div data-line-number="225" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">225</div><div data-line-number="226" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">226</div><div data-line-number="227" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">227</div><div data-line-number="228" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">228</div><div data-line-number="229" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">229</div><div data-line-number="230" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">230</div><div data-line-number="231" class="child-of-line-209 child-of-line-213 react-line-number react-code-text" style="padding-right:16px">231</div><div data-line-number="232" class="child-of-line-209 react-line-number react-code-text" style="padding-right:16px">232<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="233" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">233</div><div data-line-number="234" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">234</div><div data-line-number="235" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">235</div><div data-line-number="236" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">236</div><div data-line-number="237" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">237</div><div data-line-number="238" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">238</div><div data-line-number="239" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">239</div><div data-line-number="240" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">240</div><div data-line-number="241" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">241</div><div data-line-number="242" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">242</div><div data-line-number="243" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">243</div><div data-line-number="244" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">244</div><div data-line-number="245" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">245</div><div data-line-number="246" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">246</div><div data-line-number="247" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">247</div><div data-line-number="248" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">248</div><div data-line-number="249" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">249</div><div data-line-number="250" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">250</div><div data-line-number="251" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">251</div><div data-line-number="252" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">252</div><div data-line-number="253" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">253</div><div data-line-number="254" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">254</div><div data-line-number="255" class="child-of-line-209 child-of-line-231 react-line-number react-code-text" style="padding-right:16px">255</div><div data-line-number="256" class="child-of-line-209 react-line-number react-code-text" style="padding-right:16px">256<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="257" class="child-of-line-209 child-of-line-255 react-line-number react-code-text" style="padding-right:16px">257</div><div data-line-number="258" class="child-of-line-209 child-of-line-255 react-line-number react-code-text" style="padding-right:16px">258</div><div data-line-number="259" class="child-of-line-209 child-of-line-255 react-line-number react-code-text" style="padding-right:16px">259</div><div data-line-number="260" class="child-of-line-209 child-of-line-255 react-line-number react-code-text" style="padding-right:16px">260</div><div data-line-number="261" class="child-of-line-209 child-of-line-255 react-line-number react-code-text" style="padding-right:16px">261</div><div data-line-number="262" class="child-of-line-209 child-of-line-255 react-line-number react-code-text" style="padding-right:16px">262</div><div data-line-number="263" class="child-of-line-209 child-of-line-255 react-line-number react-code-text" style="padding-right:16px">263</div><div data-line-number="264" class="react-line-number react-code-text" style="padding-right:16px">264<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="265" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">265</div><div data-line-number="266" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">266</div><div data-line-number="267" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">267</div><div data-line-number="268" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">268</div><div data-line-number="269" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">269</div><div data-line-number="270" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">270</div><div data-line-number="271" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">271</div><div data-line-number="272" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">272</div><div data-line-number="273" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">273</div><div data-line-number="274" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">274</div><div data-line-number="275" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">275</div><div data-line-number="276" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">276</div><div data-line-number="277" class="child-of-line-263 react-line-number react-code-text" style="padding-right:16px">277</div><div data-line-number="278" class="react-line-number react-code-text" style="padding-right:16px">278<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="279" class="child-of-line-277 react-line-number react-code-text" style="padding-right:16px">279</div><div data-line-number="280" class="child-of-line-277 react-line-number react-code-text" style="padding-right:16px">280</div><div data-line-number="281" class="child-of-line-277 react-line-number react-code-text" style="padding-right:16px">281</div><div data-line-number="282" class="react-line-number react-code-text" style="padding-right:16px">282<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="283" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">283</div><div data-line-number="284" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">284</div><div data-line-number="285" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">285</div><div data-line-number="286" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">286</div><div data-line-number="287" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">287</div><div data-line-number="288" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">288</div><div data-line-number="289" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">289</div><div data-line-number="290" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">290</div><div data-line-number="291" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">291</div><div data-line-number="292" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">292</div><div data-line-number="293" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">293</div><div data-line-number="294" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">294</div><div data-line-number="295" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">295</div><div data-line-number="296" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">296</div><div data-line-number="297" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">297</div><div data-line-number="298" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">298</div><div data-line-number="299" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">299</div><div data-line-number="300" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">300</div><div data-line-number="301" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">301</div><div data-line-number="302" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">302</div><div data-line-number="303" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">303</div><div data-line-number="304" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">304</div><div data-line-number="305" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">305</div><div data-line-number="306" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">306</div><div data-line-number="307" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">307</div><div data-line-number="308" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">308</div><div data-line-number="309" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">309</div><div data-line-number="310" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">310</div><div data-line-number="311" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">311</div><div data-line-number="312" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">312</div><div data-line-number="313" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">313</div><div data-line-number="314" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">314</div><div data-line-number="315" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">315</div><div data-line-number="316" class="child-of-line-281 react-line-number react-code-text" style="padding-right:16px">316</div><div data-line-number="317" class="react-line-number react-code-text" style="padding-right:16px">317<span class="Box-sc-g0xbh4-0 cJGaMs"><div aria-label="Collapse code section" role="button" class="Box-sc-g0xbh4-0 iGLarr"><svg aria-hidden="true" focusable="false" class="Octicon-sc-9kayk9-0" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display:inline-block;user-select:none;vertical-align:text-bottom;overflow:visible"><path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path></svg></div></span></div><div data-line-number="318" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">318</div><div data-line-number="319" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">319</div><div data-line-number="320" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">320</div><div data-line-number="321" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">321</div><div data-line-number="322" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">322</div><div data-line-number="323" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">323</div><div data-line-number="324" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">324</div><div data-line-number="325" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">325</div><div data-line-number="326" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">326</div><div data-line-number="327" class="child-of-line-316 react-line-number react-code-text" style="padding-right:16px">327</div></div><div class="react-code-lines"><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC1" class="react-file-line html-div" data-testid="code-cell" data-line-number="1" style="position:relative"><span class="pl-s">---</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC2" class="react-file-line html-div" data-testid="code-cell" data-line-number="2" style="position:relative"><span class="pl-ent">title</span>: <span class="pl-s">Framework main features</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC3" class="react-file-line html-div" data-testid="code-cell" data-line-number="3" style="position:relative"><span class="pl-ent">slug</span>: <span class="pl-s">Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC4" class="react-file-line html-div" data-testid="code-cell" data-line-number="4" style="position:relative"><span class="pl-ent">page-type</span>: <span class="pl-s">learn-module-chapter</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC5" class="react-file-line html-div" data-testid="code-cell" data-line-number="5" style="position:relative"><span class="pl-s">---</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC6" class="react-file-line html-div" data-testid="code-cell" data-line-number="6" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC7" class="react-file-line html-div" data-testid="code-cell" data-line-number="7" style="position:relative">{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC8" class="react-file-line html-div" data-testid="code-cell" data-line-number="8" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC9" class="react-file-line html-div" data-testid="code-cell" data-line-number="9" style="position:relative">Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of "the big 4" frameworks, looking at how frameworks tend to work from a high level, and the differences between them.</div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC10" class="react-file-line html-div" data-testid="code-cell" data-line-number="10" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC11" class="react-file-line html-div" data-testid="code-cell" data-line-number="11" style="position:relative"><<span class="pl-ent">table</span>></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC12" class="react-file-line html-div" data-testid="code-cell" data-line-number="12" style="position:relative"> <<span class="pl-ent">tbody</span>></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC13" class="react-file-line html-div" data-testid="code-cell" data-line-number="13" style="position:relative"> <span class="pl-c1"><tr></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC14" class="react-file-line html-div" data-testid="code-cell" data-line-number="14" style="position:relative"> <span class="pl-c1"> <th scope="row">Prerequisites:</th></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC15" class="react-file-line html-div" data-testid="code-cell" data-line-number="15" style="position:relative"> <span class="pl-c1"> <td></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC16" class="react-file-line html-div" data-testid="code-cell" data-line-number="16" style="position:relative"> <span class="pl-c1"> Familiarity with the core <a href="/en-US/docs/Learn/HTML">HTML</a>,</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC17" class="react-file-line html-div" data-testid="code-cell" data-line-number="17" style="position:relative"> <span class="pl-c1"> <a href="/en-US/docs/Learn/CSS">CSS</a>, and</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC18" class="react-file-line html-div" data-testid="code-cell" data-line-number="18" style="position:relative"> <span class="pl-c1"> <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages.</span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC19" class="react-file-line html-div" data-testid="code-cell" data-line-number="19" style="position:relative"> <span class="pl-c1"> </td></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC20" class="react-file-line html-div" data-testid="code-cell" data-line-number="20" style="position:relative"> <span class="pl-c1"></tr></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC21" class="react-file-line html-div" data-testid="code-cell" data-line-number="21" style="position:relative"> <span class="pl-c1"><tr></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC22" class="react-file-line html-div" data-testid="code-cell" data-line-number="22" style="position:relative"> <span class="pl-c1"> <th scope="row">Objective:</th></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC23" class="react-file-line html-div" data-testid="code-cell" data-line-number="23" style="position:relative"> <span class="pl-c1"> <td>To understand the main code features of frameworks.</td></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC24" class="react-file-line html-div" data-testid="code-cell" data-line-number="24" style="position:relative"> <span class="pl-c1"></tr></span></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC25" class="react-file-line html-div" data-testid="code-cell" data-line-number="25" style="position:relative"> </<span class="pl-ent">tbody</span>></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC26" class="react-file-line html-div" data-testid="code-cell" data-line-number="26" style="position:relative"></<span class="pl-ent">table</span>></div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC27" class="react-file-line html-div" data-testid="code-cell" data-line-number="27" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC28" class="react-file-line html-div" data-testid="code-cell" data-line-number="28" style="position:relative"><span class="pl-mh">## <span class="pl-en">Domain-specific languages</span></span></div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC29" class="react-file-line html-div" data-testid="code-cell" data-line-number="29" style="position:relative"> </div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC30" class="react-file-line html-div" data-testid="code-cell" data-line-number="30" style="position:relative">All of the frameworks discussed in this module are powered by JavaScript, and all allow you to use domain-specific languages (DSLs) in order to build your applications. In particular, React has popularized the use of <span class="pl-s">**</span>JSX<span class="pl-s">**</span> for writing its components, while Ember utilizes <span class="pl-s">**</span>Handlebars<span class="pl-s">**</span>. Unlike HTML, these languages know how to read data variables, and this data can be used to streamline the process of writing your UI.</div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC31" class="react-file-line html-div" data-testid="code-cell" data-line-number="31" style="position:relative"> </div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC32" class="react-file-line html-div" data-testid="code-cell" data-line-number="32" style="position:relative">Angular apps often make heavy use of <span class="pl-s">**</span>TypeScript<span class="pl-s">**</span>. TypeScript is not concerned with the writing of user interfaces, but it is a domain-specific language, and has significant differences to vanilla JavaScript.</div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC33" class="react-file-line html-div" data-testid="code-cell" data-line-number="33" style="position:relative"> </div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC34" class="react-file-line html-div" data-testid="code-cell" data-line-number="34" style="position:relative">DSLs can't be read by the browser directly; they must be transformed into JavaScript or HTML first. <span class="pl-s">[</span>Transformation is an extra step in the development process<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#transformation</span><span class="pl-s">)</span>, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step. While it is possible to build framework apps without using these domain-specific languages, embracing them will streamline your development process and make it easier to find help from the communities around those frameworks.</div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC35" class="react-file-line html-div" data-testid="code-cell" data-line-number="35" style="position:relative"> </div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC36" class="react-file-line html-div" data-testid="code-cell" data-line-number="36" style="position:relative"><span class="pl-mh">### <span class="pl-en">JSX</span></span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC37" class="react-file-line html-div" data-testid="code-cell" data-line-number="37" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC38" class="react-file-line html-div" data-testid="code-cell" data-line-number="38" style="position:relative"><span class="pl-s">[</span>JSX<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://react.dev/learn/writing-markup-with-jsx</span><span class="pl-s">)</span>, which stands for JavaScript and XML, is an extension of JavaScript that brings HTML-like syntax to a JavaScript environment. It was invented by the React team for use in React applications, but can be used to develop other applications — like Vue apps, for instance.</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC39" class="react-file-line html-div" data-testid="code-cell" data-line-number="39" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC40" class="react-file-line html-div" data-testid="code-cell" data-line-number="40" style="position:relative">The following shows a simple JSX example:</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC41" class="react-file-line html-div" data-testid="code-cell" data-line-number="41" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC42" class="react-file-line html-div" data-testid="code-cell" data-line-number="42" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC43" class="react-file-line html-div" data-testid="code-cell" data-line-number="43" style="position:relative"><span class="pl-k">const</span> <span class="pl-c1">subject</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>World<span class="pl-pds">"</span></span>;</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC44" class="react-file-line html-div" data-testid="code-cell" data-line-number="44" style="position:relative"><span class="pl-k">const</span> <span class="pl-c1">header</span> <span class="pl-k">=</span> (</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC45" class="react-file-line html-div" data-testid="code-cell" data-line-number="45" style="position:relative"> <span class="pl-k"><</span>header<span class="pl-k">></span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC46" class="react-file-line html-div" data-testid="code-cell" data-line-number="46" style="position:relative"> <span class="pl-k"><</span>h1<span class="pl-k">></span>Hello, {subject}<span class="pl-k">!</span><span class="pl-k"><</span><span class="pl-k">/</span>h1<span class="pl-k">></span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC47" class="react-file-line html-div" data-testid="code-cell" data-line-number="47" style="position:relative"> <span class="pl-k"><</span><span class="pl-k">/</span>header<span class="pl-k">></span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC48" class="react-file-line html-div" data-testid="code-cell" data-line-number="48" style="position:relative">);</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC49" class="react-file-line html-div" data-testid="code-cell" data-line-number="49" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC50" class="react-file-line html-div" data-testid="code-cell" data-line-number="50" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC51" class="react-file-line html-div" data-testid="code-cell" data-line-number="51" style="position:relative">This expression represents an HTML <span class="pl-s">[</span><span class="pl-s">`</span><span class="pl-c1"><header></span><span class="pl-s">`</span><span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Web/HTML/Element/header</span><span class="pl-s">)</span> element with an <span class="pl-s">[</span><span class="pl-s">`</span><span class="pl-c1"><h1></span><span class="pl-s">`</span><span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Web/HTML/Element/Heading_Elements</span><span class="pl-s">)</span> element inside. The curly braces around <span class="pl-s">`</span><span class="pl-c1">{subject}</span><span class="pl-s">`</span> tell the application to read the value of the <span class="pl-s">`</span><span class="pl-c1">subject</span><span class="pl-s">`</span> constant and insert it into our <span class="pl-s">`</span><span class="pl-c1"><h1></span><span class="pl-s">`</span>.</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC52" class="react-file-line html-div" data-testid="code-cell" data-line-number="52" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC53" class="react-file-line html-div" data-testid="code-cell" data-line-number="53" style="position:relative">When used with React, the JSX from the previous snippet would be compiled into this:</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC54" class="react-file-line html-div" data-testid="code-cell" data-line-number="54" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC55" class="react-file-line html-div" data-testid="code-cell" data-line-number="55" style="position:relative"><span class="pl-s">```</span><span class="pl-en">js</span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC56" class="react-file-line html-div" data-testid="code-cell" data-line-number="56" style="position:relative"><span class="pl-k">const</span> <span class="pl-c1">subject</span> <span class="pl-k">=</span> <span class="pl-s"><span class="pl-pds">"</span>World<span class="pl-pds">"</span></span>;</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC57" class="react-file-line html-div" data-testid="code-cell" data-line-number="57" style="position:relative"><span class="pl-k">const</span> <span class="pl-c1">header</span> <span class="pl-k">=</span> <span class="pl-smi">React</span>.<span class="pl-c1">createElement</span>(</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC58" class="react-file-line html-div" data-testid="code-cell" data-line-number="58" style="position:relative"> <span class="pl-s"><span class="pl-pds">"</span>header<span class="pl-pds">"</span></span>,</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC59" class="react-file-line html-div" data-testid="code-cell" data-line-number="59" style="position:relative"> <span class="pl-c1">null</span>,</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC60" class="react-file-line html-div" data-testid="code-cell" data-line-number="60" style="position:relative"> <span class="pl-smi">React</span>.<span class="pl-c1">createElement</span>(<span class="pl-s"><span class="pl-pds">"</span>h1<span class="pl-pds">"</span></span>, <span class="pl-c1">null</span>, <span class="pl-s"><span class="pl-pds">"</span>Hello, <span class="pl-pds">"</span></span>, subject, <span class="pl-s"><span class="pl-pds">"</span>!<span class="pl-pds">"</span></span>),</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC61" class="react-file-line html-div" data-testid="code-cell" data-line-number="61" style="position:relative">);</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC62" class="react-file-line html-div" data-testid="code-cell" data-line-number="62" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC63" class="react-file-line html-div" data-testid="code-cell" data-line-number="63" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC64" class="react-file-line html-div" data-testid="code-cell" data-line-number="64" style="position:relative">When ultimately rendered by the browser, the above snippet will produce HTML that looks like this:</div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC65" class="react-file-line html-div" data-testid="code-cell" data-line-number="65" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC66" class="react-file-line html-div" data-testid="code-cell" data-line-number="66" style="position:relative"><span class="pl-s">```</span><span class="pl-en">html</span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC67" class="react-file-line html-div" data-testid="code-cell" data-line-number="67" style="position:relative"><<span class="pl-ent">header</span>></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC68" class="react-file-line html-div" data-testid="code-cell" data-line-number="68" style="position:relative"> <<span class="pl-ent">h1</span>>Hello, World!</<span class="pl-ent">h1</span>></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC69" class="react-file-line html-div" data-testid="code-cell" data-line-number="69" style="position:relative"></<span class="pl-ent">header</span>></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC70" class="react-file-line html-div" data-testid="code-cell" data-line-number="70" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-35 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC71" class="react-file-line html-div" data-testid="code-cell" data-line-number="71" style="position:relative"> </div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC72" class="react-file-line html-div" data-testid="code-cell" data-line-number="72" style="position:relative"><span class="pl-mh">### <span class="pl-en">Handlebars</span></span></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC73" class="react-file-line html-div" data-testid="code-cell" data-line-number="73" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC74" class="react-file-line html-div" data-testid="code-cell" data-line-number="74" style="position:relative">The <span class="pl-s">[</span>Handlebars<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://handlebarsjs.com/</span><span class="pl-s">)</span> templating language is not specific to Ember applications, but it is heavily utilized in Ember apps. Handlebars code resembles HTML, but it has the option of pulling data in from elsewhere. This data can be used to influence the HTML that an application ultimately builds.</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC75" class="react-file-line html-div" data-testid="code-cell" data-line-number="75" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC76" class="react-file-line html-div" data-testid="code-cell" data-line-number="76" style="position:relative">Like JSX, Handlebars uses curly braces to inject the value of a variable. Handlebars uses a double-pair of curly braces, instead of a single pair.</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC77" class="react-file-line html-div" data-testid="code-cell" data-line-number="77" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC78" class="react-file-line html-div" data-testid="code-cell" data-line-number="78" style="position:relative">Given this Handlebars template:</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC79" class="react-file-line html-div" data-testid="code-cell" data-line-number="79" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC80" class="react-file-line html-div" data-testid="code-cell" data-line-number="80" style="position:relative"><span class="pl-s">```</span><span class="pl-en">html</span></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC81" class="react-file-line html-div" data-testid="code-cell" data-line-number="81" style="position:relative"><<span class="pl-ent">header</span>></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC82" class="react-file-line html-div" data-testid="code-cell" data-line-number="82" style="position:relative"> <<span class="pl-ent">h1</span>>Hello, \{{subject}}!</<span class="pl-ent">h1</span>></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC83" class="react-file-line html-div" data-testid="code-cell" data-line-number="83" style="position:relative"></<span class="pl-ent">header</span>></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC84" class="react-file-line html-div" data-testid="code-cell" data-line-number="84" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC85" class="react-file-line html-div" data-testid="code-cell" data-line-number="85" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC86" class="react-file-line html-div" data-testid="code-cell" data-line-number="86" style="position:relative">And this data:</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC87" class="react-file-line html-div" data-testid="code-cell" data-line-number="87" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC88" class="react-file-line html-div" data-testid="code-cell" data-line-number="88" style="position:relative"><span class="pl-s">```</span><span class="pl-en">js</span></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC89" class="react-file-line html-div" data-testid="code-cell" data-line-number="89" style="position:relative">{</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC90" class="react-file-line html-div" data-testid="code-cell" data-line-number="90" style="position:relative"> subject<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>World<span class="pl-pds">"</span></span>;</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC91" class="react-file-line html-div" data-testid="code-cell" data-line-number="91" style="position:relative">}</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC92" class="react-file-line html-div" data-testid="code-cell" data-line-number="92" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC93" class="react-file-line html-div" data-testid="code-cell" data-line-number="93" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC94" class="react-file-line html-div" data-testid="code-cell" data-line-number="94" style="position:relative">Handlebars will build HTML like this:</div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC95" class="react-file-line html-div" data-testid="code-cell" data-line-number="95" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC96" class="react-file-line html-div" data-testid="code-cell" data-line-number="96" style="position:relative"><span class="pl-s">```</span><span class="pl-en">html</span></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC97" class="react-file-line html-div" data-testid="code-cell" data-line-number="97" style="position:relative"><<span class="pl-ent">header</span>></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC98" class="react-file-line html-div" data-testid="code-cell" data-line-number="98" style="position:relative"> <<span class="pl-ent">h1</span>>Hello, World!</<span class="pl-ent">h1</span>></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC99" class="react-file-line html-div" data-testid="code-cell" data-line-number="99" style="position:relative"></<span class="pl-ent">header</span>></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC100" class="react-file-line html-div" data-testid="code-cell" data-line-number="100" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-71 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC101" class="react-file-line html-div" data-testid="code-cell" data-line-number="101" style="position:relative"> </div></div></div><div class="child-of-line-27 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC102" class="react-file-line html-div" data-testid="code-cell" data-line-number="102" style="position:relative"><span class="pl-mh">### <span class="pl-en">TypeScript</span></span></div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC103" class="react-file-line html-div" data-testid="code-cell" data-line-number="103" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC104" class="react-file-line html-div" data-testid="code-cell" data-line-number="104" style="position:relative"><span class="pl-s">[</span>TypeScript<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://www.typescriptlang.org/</span><span class="pl-s">)</span> is a <span class="pl-s">_</span>superset<span class="pl-s">_</span> of JavaScript, meaning it extends JavaScript — all JavaScript code is valid TypeScript, but not the other way around. TypeScript is useful for the strictness it allows developers to enforce on their code. For instance, consider a function <span class="pl-s">`</span><span class="pl-c1">add()</span><span class="pl-s">`</span>, which takes integers <span class="pl-s">`</span><span class="pl-c1">a</span><span class="pl-s">`</span> and <span class="pl-s">`</span><span class="pl-c1">b</span><span class="pl-s">`</span> and returns their sum.</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC105" class="react-file-line html-div" data-testid="code-cell" data-line-number="105" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC106" class="react-file-line html-div" data-testid="code-cell" data-line-number="106" style="position:relative">In JavaScript, that function could be written like this:</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC107" class="react-file-line html-div" data-testid="code-cell" data-line-number="107" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC108" class="react-file-line html-div" data-testid="code-cell" data-line-number="108" style="position:relative"><span class="pl-s">```</span><span class="pl-en">js</span></div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC109" class="react-file-line html-div" data-testid="code-cell" data-line-number="109" style="position:relative"><span class="pl-k">function</span> <span class="pl-en">add</span>(<span class="pl-smi">a</span>, <span class="pl-smi">b</span>) {</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC110" class="react-file-line html-div" data-testid="code-cell" data-line-number="110" style="position:relative"> <span class="pl-k">return</span> a <span class="pl-k">+</span> b;</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC111" class="react-file-line html-div" data-testid="code-cell" data-line-number="111" style="position:relative">}</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC112" class="react-file-line html-div" data-testid="code-cell" data-line-number="112" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC113" class="react-file-line html-div" data-testid="code-cell" data-line-number="113" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC114" class="react-file-line html-div" data-testid="code-cell" data-line-number="114" style="position:relative">This code might be trivial for someone accustomed to JavaScript, but it could still be clearer. JavaScript lets us use the <span class="pl-s">`</span><span class="pl-c1">+</span><span class="pl-s">`</span> operator to concatenate strings together, so this function would technically still work if <span class="pl-s">`</span><span class="pl-c1">a</span><span class="pl-s">`</span> and <span class="pl-s">`</span><span class="pl-c1">b</span><span class="pl-s">`</span> were strings — it just might not give you the result you'd expect. What if we wanted to only allow numbers to be passed into this function? TypeScript makes that possible:</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC115" class="react-file-line html-div" data-testid="code-cell" data-line-number="115" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC116" class="react-file-line html-div" data-testid="code-cell" data-line-number="116" style="position:relative"><span class="pl-s">```</span><span class="pl-en">ts</span></div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC117" class="react-file-line html-div" data-testid="code-cell" data-line-number="117" style="position:relative"><span class="pl-k">function</span> add(<span class="pl-v">a</span><span class="pl-k">:</span> <span class="pl-c1">number</span>, <span class="pl-v">b</span><span class="pl-k">:</span> <span class="pl-c1">number</span>) {</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC118" class="react-file-line html-div" data-testid="code-cell" data-line-number="118" style="position:relative"> <span class="pl-k">return</span> <span class="pl-smi">a</span> <span class="pl-k">+</span> <span class="pl-smi">b</span>;</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC119" class="react-file-line html-div" data-testid="code-cell" data-line-number="119" style="position:relative">}</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC120" class="react-file-line html-div" data-testid="code-cell" data-line-number="120" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC121" class="react-file-line html-div" data-testid="code-cell" data-line-number="121" style="position:relative"> </div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC122" class="react-file-line html-div" data-testid="code-cell" data-line-number="122" style="position:relative">The <span class="pl-s">`</span><span class="pl-c1">: number</span><span class="pl-s">`</span> written after each parameter here tells TypeScript that both <span class="pl-s">`</span><span class="pl-c1">a</span><span class="pl-s">`</span> and <span class="pl-s">`</span><span class="pl-c1">b</span><span class="pl-s">`</span> must be numbers. If we were to use this function and pass <span class="pl-s">`</span><span class="pl-c1">'2'</span><span class="pl-s">`</span> into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us.</div></div></div><div class="child-of-line-27 child-of-line-101 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC123" class="react-file-line html-div" data-testid="code-cell" data-line-number="123" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC124" class="react-file-line html-div" data-testid="code-cell" data-line-number="124" style="position:relative"><span class="pl-mh">## <span class="pl-en">Writing components</span></span></div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC125" class="react-file-line html-div" data-testid="code-cell" data-line-number="125" style="position:relative"> </div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC126" class="react-file-line html-div" data-testid="code-cell" data-line-number="126" style="position:relative">As mentioned in the previous chapter, most frameworks have some kind of component model. React components can be written with JSX, Ember components with Handlebars, and Angular and Vue components with a templating syntax that lightly extends HTML.</div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC127" class="react-file-line html-div" data-testid="code-cell" data-line-number="127" style="position:relative"> </div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC128" class="react-file-line html-div" data-testid="code-cell" data-line-number="128" style="position:relative">Regardless of their opinions on how components should be written, each framework's components offer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup.</div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC129" class="react-file-line html-div" data-testid="code-cell" data-line-number="129" style="position:relative"> </div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC130" class="react-file-line html-div" data-testid="code-cell" data-line-number="130" style="position:relative">The code snippets in the rest of this section will use React as an example, and are written with JSX.</div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC131" class="react-file-line html-div" data-testid="code-cell" data-line-number="131" style="position:relative"> </div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC132" class="react-file-line html-div" data-testid="code-cell" data-line-number="132" style="position:relative"><span class="pl-mh">### <span class="pl-en">Properties</span></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC133" class="react-file-line html-div" data-testid="code-cell" data-line-number="133" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC134" class="react-file-line html-div" data-testid="code-cell" data-line-number="134" style="position:relative">Properties, or <span class="pl-s">**</span>props<span class="pl-s">**</span>, are external data that a component needs in order to render. Suppose you're building a website for an online magazine, and you need to be sure that each contributing writer gets credit for their work. You might create an <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> component to go with each article. This component needs to display a portrait of the author and a short byline about them. In order to know what image to render, and what byline to print, <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> needs to accept some props.</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC135" class="react-file-line html-div" data-testid="code-cell" data-line-number="135" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC136" class="react-file-line html-div" data-testid="code-cell" data-line-number="136" style="position:relative">A React representation of this <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> component might look something like this:</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC137" class="react-file-line html-div" data-testid="code-cell" data-line-number="137" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC138" class="react-file-line html-div" data-testid="code-cell" data-line-number="138" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC139" class="react-file-line html-div" data-testid="code-cell" data-line-number="139" style="position:relative"><span class="pl-k">function</span> <span class="pl-en">AuthorCredit</span>(<span class="pl-smi">props</span>) {</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC140" class="react-file-line html-div" data-testid="code-cell" data-line-number="140" style="position:relative"> <span class="pl-k">return</span> (</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC141" class="react-file-line html-div" data-testid="code-cell" data-line-number="141" style="position:relative"> <span class="pl-k"><</span>figure<span class="pl-k">></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC142" class="react-file-line html-div" data-testid="code-cell" data-line-number="142" style="position:relative"> <span class="pl-k"><</span>img src<span class="pl-k">=</span>{<span class="pl-smi">props</span>.<span class="pl-smi">src</span>} alt<span class="pl-k">=</span>{<span class="pl-smi">props</span>.<span class="pl-c1">alt</span>} <span class="pl-k">/</span><span class="pl-k">></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC143" class="react-file-line html-div" data-testid="code-cell" data-line-number="143" style="position:relative"> <span class="pl-k"><</span>figcaption<span class="pl-k">></span>{<span class="pl-smi">props</span>.<span class="pl-smi">byline</span>}<span class="pl-k"><</span><span class="pl-k">/</span>figcaption<span class="pl-k">></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC144" class="react-file-line html-div" data-testid="code-cell" data-line-number="144" style="position:relative"> <span class="pl-k"><</span><span class="pl-k">/</span>figure<span class="pl-k">></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC145" class="react-file-line html-div" data-testid="code-cell" data-line-number="145" style="position:relative"> );</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC146" class="react-file-line html-div" data-testid="code-cell" data-line-number="146" style="position:relative">}</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC147" class="react-file-line html-div" data-testid="code-cell" data-line-number="147" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC148" class="react-file-line html-div" data-testid="code-cell" data-line-number="148" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC149" class="react-file-line html-div" data-testid="code-cell" data-line-number="149" style="position:relative"><span class="pl-s">`</span><span class="pl-c1">{props.src}</span><span class="pl-s">`</span>, <span class="pl-s">`</span><span class="pl-c1">{props.alt}</span><span class="pl-s">`</span>, and <span class="pl-s">`</span><span class="pl-c1">{props.byline}</span><span class="pl-s">`</span> represent where our props will be inserted into the component. To render this component, we would write code like this in the place where we want it rendered (which will probably be inside another component):</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC150" class="react-file-line html-div" data-testid="code-cell" data-line-number="150" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC151" class="react-file-line html-div" data-testid="code-cell" data-line-number="151" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC152" class="react-file-line html-div" data-testid="code-cell" data-line-number="152" style="position:relative"><span class="pl-k"><</span>AuthorCredit</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC153" class="react-file-line html-div" data-testid="code-cell" data-line-number="153" style="position:relative"> src<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>./assets/zelda.png<span class="pl-pds">"</span></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC154" class="react-file-line html-div" data-testid="code-cell" data-line-number="154" style="position:relative"> alt<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Portrait of Zelda Schiff<span class="pl-pds">"</span></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC155" class="react-file-line html-div" data-testid="code-cell" data-line-number="155" style="position:relative"> byline<span class="pl-k">=</span><span class="pl-s"><span class="pl-pds">"</span>Zelda Schiff is editor-in-chief of the Library Times.<span class="pl-pds">"</span></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC156" class="react-file-line html-div" data-testid="code-cell" data-line-number="156" style="position:relative"><span class="pl-k">/</span><span class="pl-k">></span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC157" class="react-file-line html-div" data-testid="code-cell" data-line-number="157" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC158" class="react-file-line html-div" data-testid="code-cell" data-line-number="158" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC159" class="react-file-line html-div" data-testid="code-cell" data-line-number="159" style="position:relative">This will ultimately render the following <span class="pl-s">[</span><span class="pl-s">`</span><span class="pl-c1"><figure></span><span class="pl-s">`</span><span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Web/HTML/Element/figure</span><span class="pl-s">)</span> element in the browser, with its structure as defined in the <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> component, and its content as defined in the props included on the <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> component call:</div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC160" class="react-file-line html-div" data-testid="code-cell" data-line-number="160" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC161" class="react-file-line html-div" data-testid="code-cell" data-line-number="161" style="position:relative"><span class="pl-s">```</span><span class="pl-en">html</span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC162" class="react-file-line html-div" data-testid="code-cell" data-line-number="162" style="position:relative"><<span class="pl-ent">figure</span>></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC163" class="react-file-line html-div" data-testid="code-cell" data-line-number="163" style="position:relative"> <<span class="pl-ent">img</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>assets/zelda.png<span class="pl-pds">"</span></span> <span class="pl-e">alt</span>=<span class="pl-s"><span class="pl-pds">"</span>Portrait of Zelda Schiff<span class="pl-pds">"</span></span> /></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC164" class="react-file-line html-div" data-testid="code-cell" data-line-number="164" style="position:relative"> <<span class="pl-ent">figcaption</span>>Zelda Schiff is editor-in-chief of the Library Times.</<span class="pl-ent">figcaption</span>></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC165" class="react-file-line html-div" data-testid="code-cell" data-line-number="165" style="position:relative"></<span class="pl-ent">figure</span>></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC166" class="react-file-line html-div" data-testid="code-cell" data-line-number="166" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-123 child-of-line-131 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC167" class="react-file-line html-div" data-testid="code-cell" data-line-number="167" style="position:relative"> </div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC168" class="react-file-line html-div" data-testid="code-cell" data-line-number="168" style="position:relative"><span class="pl-mh">### <span class="pl-en">State</span></span></div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC169" class="react-file-line html-div" data-testid="code-cell" data-line-number="169" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC170" class="react-file-line html-div" data-testid="code-cell" data-line-number="170" style="position:relative">We talked about the concept of <span class="pl-s">**</span>state<span class="pl-s">**</span> in the previous chapter — a robust state-handling mechanism is key to an effective framework, and each component may have data that needs its state controlled. This state will persist in some way as long as the component is in use. Like props, state can be used to affect how a component is rendered.</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC171" class="react-file-line html-div" data-testid="code-cell" data-line-number="171" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC172" class="react-file-line html-div" data-testid="code-cell" data-line-number="172" style="position:relative">As an example, consider a button that counts how many times it has been clicked. This component should be responsible for tracking its own <span class="pl-s">_</span>count<span class="pl-s">_</span> state, and could be written like this:</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC173" class="react-file-line html-div" data-testid="code-cell" data-line-number="173" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC174" class="react-file-line html-div" data-testid="code-cell" data-line-number="174" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC175" class="react-file-line html-div" data-testid="code-cell" data-line-number="175" style="position:relative"><span class="pl-k">function</span> <span class="pl-en">CounterButton</span>() {</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC176" class="react-file-line html-div" data-testid="code-cell" data-line-number="176" style="position:relative"> <span class="pl-k">const</span> [<span class="pl-c1">count</span>] <span class="pl-k">=</span> <span class="pl-en">useState</span>(<span class="pl-c1">0</span>);</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC177" class="react-file-line html-div" data-testid="code-cell" data-line-number="177" style="position:relative"> <span class="pl-k">return</span> <span class="pl-k"><</span>button<span class="pl-k">></span>Clicked {count} times<span class="pl-k"><</span><span class="pl-k">/</span>button<span class="pl-k">></span>;</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC178" class="react-file-line html-div" data-testid="code-cell" data-line-number="178" style="position:relative">}</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC179" class="react-file-line html-div" data-testid="code-cell" data-line-number="179" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC180" class="react-file-line html-div" data-testid="code-cell" data-line-number="180" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC181" class="react-file-line html-div" data-testid="code-cell" data-line-number="181" style="position:relative"><span class="pl-s">[</span><span class="pl-s">`</span><span class="pl-c1">useState()</span><span class="pl-s">`</span><span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://react.dev/reference/react/useState</span><span class="pl-s">)</span> is a <span class="pl-s">**</span><span class="pl-s">[</span>React hook<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://react.dev/reference/react</span><span class="pl-s">)</span><span class="pl-s">**</span> which, given an initial data value, will keep track of that value as it is updated. The code will be initially rendered like so in the browser:</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC182" class="react-file-line html-div" data-testid="code-cell" data-line-number="182" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC183" class="react-file-line html-div" data-testid="code-cell" data-line-number="183" style="position:relative"><span class="pl-s">```</span><span class="pl-en">html</span></div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC184" class="react-file-line html-div" data-testid="code-cell" data-line-number="184" style="position:relative"><<span class="pl-ent">button</span>>Clicked 0 times</<span class="pl-ent">button</span>></div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC185" class="react-file-line html-div" data-testid="code-cell" data-line-number="185" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC186" class="react-file-line html-div" data-testid="code-cell" data-line-number="186" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC187" class="react-file-line html-div" data-testid="code-cell" data-line-number="187" style="position:relative">The <span class="pl-s">`</span><span class="pl-c1">useState()</span><span class="pl-s">`</span> call keeps track of the <span class="pl-s">`</span><span class="pl-c1">count</span><span class="pl-s">`</span> value in a robust way across the app, without you needing to write code to do that yourself.</div></div></div><div class="child-of-line-123 child-of-line-167 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC188" class="react-file-line html-div" data-testid="code-cell" data-line-number="188" style="position:relative"> </div></div></div><div class="child-of-line-123 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC189" class="react-file-line html-div" data-testid="code-cell" data-line-number="189" style="position:relative"><span class="pl-mh">### <span class="pl-en">Events</span></span></div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC190" class="react-file-line html-div" data-testid="code-cell" data-line-number="190" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC191" class="react-file-line html-div" data-testid="code-cell" data-line-number="191" style="position:relative">In order to be interactive, components need ways to respond to browser events, so our applications can respond to our users. Frameworks each provide their own syntax for listening to browser events, which reference the names of the equivalent native browser events.</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC192" class="react-file-line html-div" data-testid="code-cell" data-line-number="192" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC193" class="react-file-line html-div" data-testid="code-cell" data-line-number="193" style="position:relative">In React, listening for the <span class="pl-s">[</span><span class="pl-s">`</span><span class="pl-c1">click</span><span class="pl-s">`</span><span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Web/API/Element/click_event</span><span class="pl-s">)</span> event requires a special property, <span class="pl-s">`</span><span class="pl-c1">onClick</span><span class="pl-s">`</span>. Let's update our <span class="pl-s">`</span><span class="pl-c1">CounterButton</span><span class="pl-s">`</span> code from above to allow it to count clicks:</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC194" class="react-file-line html-div" data-testid="code-cell" data-line-number="194" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC195" class="react-file-line html-div" data-testid="code-cell" data-line-number="195" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC196" class="react-file-line html-div" data-testid="code-cell" data-line-number="196" style="position:relative"><span class="pl-k">function</span> <span class="pl-en">CounterButton</span>() {</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC197" class="react-file-line html-div" data-testid="code-cell" data-line-number="197" style="position:relative"> <span class="pl-k">const</span> [<span class="pl-c1">count</span>, <span class="pl-c1">setCount</span>] <span class="pl-k">=</span> <span class="pl-en">useState</span>(<span class="pl-c1">0</span>);</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC198" class="react-file-line html-div" data-testid="code-cell" data-line-number="198" style="position:relative"> <span class="pl-k">return</span> (</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC199" class="react-file-line html-div" data-testid="code-cell" data-line-number="199" style="position:relative"> <span class="pl-k"><</span>button onClick<span class="pl-k">=</span>{() <span class="pl-k">=></span> <span class="pl-en">setCount</span>(count <span class="pl-k">+</span> <span class="pl-c1">1</span>)}<span class="pl-k">></span>Clicked {count} times<span class="pl-k"><</span><span class="pl-k">/</span>button<span class="pl-k">></span></div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC200" class="react-file-line html-div" data-testid="code-cell" data-line-number="200" style="position:relative"> );</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC201" class="react-file-line html-div" data-testid="code-cell" data-line-number="201" style="position:relative">}</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC202" class="react-file-line html-div" data-testid="code-cell" data-line-number="202" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC203" class="react-file-line html-div" data-testid="code-cell" data-line-number="203" style="position:relative"> </div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC204" class="react-file-line html-div" data-testid="code-cell" data-line-number="204" style="position:relative">In this version we are using additional <span class="pl-s">`</span><span class="pl-c1">useState()</span><span class="pl-s">`</span> functionality to create a special <span class="pl-s">`</span><span class="pl-c1">setCount()</span><span class="pl-s">`</span> function, which we can invoke to update the value of <span class="pl-s">`</span><span class="pl-c1">count</span><span class="pl-s">`</span>. We call this function inside the <span class="pl-s">`</span><span class="pl-c1">onClick</span><span class="pl-s">`</span> event handler to set <span class="pl-s">`</span><span class="pl-c1">count</span><span class="pl-s">`</span> to whatever its current value is, plus one.</div></div></div><div class="child-of-line-123 child-of-line-188 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC205" class="react-file-line html-div" data-testid="code-cell" data-line-number="205" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC206" class="react-file-line html-div" data-testid="code-cell" data-line-number="206" style="position:relative"><span class="pl-mh">## <span class="pl-en">Styling components</span></span></div></div></div><div class="child-of-line-205 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC207" class="react-file-line html-div" data-testid="code-cell" data-line-number="207" style="position:relative"> </div></div></div><div class="child-of-line-205 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC208" class="react-file-line html-div" data-testid="code-cell" data-line-number="208" style="position:relative">Each framework offers a way to define styles for your components — or for the application as a whole. Although each framework's approach to defining the styles of a component is slightly different, all of them give you multiple ways to do so. With the addition of some helper modules, you can style your framework apps in <span class="pl-s">[</span>Sass<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://sass-lang.com/</span><span class="pl-s">)</span> or <span class="pl-s">[</span>Less<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://lesscss.org/</span><span class="pl-s">)</span>, or transpile your CSS stylesheets with <span class="pl-s">[</span>PostCSS<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://postcss.org/</span><span class="pl-s">)</span>.</div></div></div><div class="child-of-line-205 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC209" class="react-file-line html-div" data-testid="code-cell" data-line-number="209" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC210" class="react-file-line html-div" data-testid="code-cell" data-line-number="210" style="position:relative"><span class="pl-mh">## <span class="pl-en">Handling dependencies</span></span></div></div></div><div class="child-of-line-209 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC211" class="react-file-line html-div" data-testid="code-cell" data-line-number="211" style="position:relative"> </div></div></div><div class="child-of-line-209 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC212" class="react-file-line html-div" data-testid="code-cell" data-line-number="212" style="position:relative">All major frameworks provide mechanisms for handling dependencies — using components inside other components, sometimes with multiple hierarchy levels. As with other features, the exact mechanism will differ between frameworks, but the end result is the same. Components tend to import components into other components using the standard <span class="pl-s">[</span>JavaScript module syntax<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Web/JavaScript/Guide/Modules</span><span class="pl-s">)</span>, or at least something similar.</div></div></div><div class="child-of-line-209 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC213" class="react-file-line html-div" data-testid="code-cell" data-line-number="213" style="position:relative"> </div></div></div><div class="child-of-line-209 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC214" class="react-file-line html-div" data-testid="code-cell" data-line-number="214" style="position:relative"><span class="pl-mh">### <span class="pl-en">Components in components</span></span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC215" class="react-file-line html-div" data-testid="code-cell" data-line-number="215" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC216" class="react-file-line html-div" data-testid="code-cell" data-line-number="216" style="position:relative">One key benefit of component-based UI architecture is that components can be composed together. Just like you can write HTML tags inside each other to build a website, you can use components inside other components to build a web application. Each framework allows you to write components that utilize (and thus depend on) other components.</div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC217" class="react-file-line html-div" data-testid="code-cell" data-line-number="217" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC218" class="react-file-line html-div" data-testid="code-cell" data-line-number="218" style="position:relative">For example, our <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> React component might be utilized inside an <span class="pl-s">`</span><span class="pl-c1">Article</span><span class="pl-s">`</span> component. That means that <span class="pl-s">`</span><span class="pl-c1">Article</span><span class="pl-s">`</span> would need to import <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span>.</div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC219" class="react-file-line html-div" data-testid="code-cell" data-line-number="219" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC220" class="react-file-line html-div" data-testid="code-cell" data-line-number="220" style="position:relative"><span class="pl-s">```</span><span class="pl-en">js</span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC221" class="react-file-line html-div" data-testid="code-cell" data-line-number="221" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">AuthorCredit</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./components/AuthorCredit<span class="pl-pds">"</span></span>;</div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC222" class="react-file-line html-div" data-testid="code-cell" data-line-number="222" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC223" class="react-file-line html-div" data-testid="code-cell" data-line-number="223" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC224" class="react-file-line html-div" data-testid="code-cell" data-line-number="224" style="position:relative">Once that's done, <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> could be used inside the <span class="pl-s">`</span><span class="pl-c1">Article</span><span class="pl-s">`</span> component like this:</div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC225" class="react-file-line html-div" data-testid="code-cell" data-line-number="225" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC226" class="react-file-line html-div" data-testid="code-cell" data-line-number="226" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC227" class="react-file-line html-div" data-testid="code-cell" data-line-number="227" style="position:relative"><span class="pl-k"><</span>Article<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC228" class="react-file-line html-div" data-testid="code-cell" data-line-number="228" style="position:relative"> <span class="pl-k"><</span>AuthorCredit <span class="pl-k">/</span><span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC229" class="react-file-line html-div" data-testid="code-cell" data-line-number="229" style="position:relative"><span class="pl-k"><</span><span class="pl-k">/</span>Article<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC230" class="react-file-line html-div" data-testid="code-cell" data-line-number="230" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-209 child-of-line-213 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC231" class="react-file-line html-div" data-testid="code-cell" data-line-number="231" style="position:relative"> </div></div></div><div class="child-of-line-209 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC232" class="react-file-line html-div" data-testid="code-cell" data-line-number="232" style="position:relative"><span class="pl-mh">### <span class="pl-en">Dependency injection</span></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC233" class="react-file-line html-div" data-testid="code-cell" data-line-number="233" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC234" class="react-file-line html-div" data-testid="code-cell" data-line-number="234" style="position:relative">Real-world applications can often involve component structures with multiple levels of nesting. An <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> component nested many levels deep might, for some reason, need data from the very root level of our application.</div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC235" class="react-file-line html-div" data-testid="code-cell" data-line-number="235" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC236" class="react-file-line html-div" data-testid="code-cell" data-line-number="236" style="position:relative">Let's say that the magazine site we're building is structured like this:</div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC237" class="react-file-line html-div" data-testid="code-cell" data-line-number="237" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC238" class="react-file-line html-div" data-testid="code-cell" data-line-number="238" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC239" class="react-file-line html-div" data-testid="code-cell" data-line-number="239" style="position:relative"><span class="pl-k"><</span>App<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC240" class="react-file-line html-div" data-testid="code-cell" data-line-number="240" style="position:relative"> <span class="pl-k"><</span>Home<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC241" class="react-file-line html-div" data-testid="code-cell" data-line-number="241" style="position:relative"> <span class="pl-k"><</span>Article<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC242" class="react-file-line html-div" data-testid="code-cell" data-line-number="242" style="position:relative"> <span class="pl-k"><</span>AuthorCredit {<span class="pl-c"><span class="pl-c">/*</span> props <span class="pl-c">*/</span></span>} <span class="pl-k">/</span><span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC243" class="react-file-line html-div" data-testid="code-cell" data-line-number="243" style="position:relative"> <span class="pl-k"><</span><span class="pl-k">/</span>Article<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC244" class="react-file-line html-div" data-testid="code-cell" data-line-number="244" style="position:relative"> <span class="pl-k"><</span><span class="pl-k">/</span>Home<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC245" class="react-file-line html-div" data-testid="code-cell" data-line-number="245" style="position:relative"><span class="pl-k"><</span><span class="pl-k">/</span>App<span class="pl-k">></span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC246" class="react-file-line html-div" data-testid="code-cell" data-line-number="246" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC247" class="react-file-line html-div" data-testid="code-cell" data-line-number="247" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC248" class="react-file-line html-div" data-testid="code-cell" data-line-number="248" style="position:relative">Our <span class="pl-s">`</span><span class="pl-c1">App</span><span class="pl-s">`</span> component has data that our <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span> component needs. We could rewrite <span class="pl-s">`</span><span class="pl-c1">Home</span><span class="pl-s">`</span> and <span class="pl-s">`</span><span class="pl-c1">Article</span><span class="pl-s">`</span> so that they know to pass props down, but this could get tedious if there are many, many levels between the origin and destination of our data. It's also excessive: <span class="pl-s">`</span><span class="pl-c1">Home</span><span class="pl-s">`</span> and <span class="pl-s">`</span><span class="pl-c1">Article</span><span class="pl-s">`</span> don't actually make use of the author's portrait or byline, but if we want to get that information into the <span class="pl-s">`</span><span class="pl-c1">AuthorCredit</span><span class="pl-s">`</span>, we will need to change <span class="pl-s">`</span><span class="pl-c1">Home</span><span class="pl-s">`</span> and <span class="pl-s">`</span><span class="pl-c1">Article</span><span class="pl-s">`</span> to accommodate it.</div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC249" class="react-file-line html-div" data-testid="code-cell" data-line-number="249" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC250" class="react-file-line html-div" data-testid="code-cell" data-line-number="250" style="position:relative">The problem of passing data through many layers of components is called prop drilling, and it's not ideal for large applications.</div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC251" class="react-file-line html-div" data-testid="code-cell" data-line-number="251" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC252" class="react-file-line html-div" data-testid="code-cell" data-line-number="252" style="position:relative">To circumvent prop drilling, frameworks provide functionality known as dependency injection, which is a way to get certain data directly to the components that need it, without passing it through intervening levels. Each framework implements dependency injection under a different name, and in a different way, but the effect is ultimately the same.</div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC253" class="react-file-line html-div" data-testid="code-cell" data-line-number="253" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC254" class="react-file-line html-div" data-testid="code-cell" data-line-number="254" style="position:relative">Angular calls this process <span class="pl-s">[</span>dependency injection<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://angular.io/guide/dependency-injection</span><span class="pl-s">)</span>; Vue has <span class="pl-s">[</span><span class="pl-s">`</span><span class="pl-c1">provide()</span><span class="pl-s">`</span> and <span class="pl-s">`</span><span class="pl-c1">inject()</span><span class="pl-s">`</span> component methods<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://v2.vuejs.org/v2/api/#provide-inject</span><span class="pl-s">)</span>; React has a <span class="pl-s">[</span>Context API<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://react.dev/learn/passing-data-deeply-with-context</span><span class="pl-s">)</span>; Ember shares state through <span class="pl-s">[</span>services<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://guides.emberjs.com/release/services/</span><span class="pl-s">)</span>.</div></div></div><div class="child-of-line-209 child-of-line-231 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC255" class="react-file-line html-div" data-testid="code-cell" data-line-number="255" style="position:relative"> </div></div></div><div class="child-of-line-209 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC256" class="react-file-line html-div" data-testid="code-cell" data-line-number="256" style="position:relative"><span class="pl-mh">### <span class="pl-en">Lifecycle</span></span></div></div></div><div class="child-of-line-209 child-of-line-255 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC257" class="react-file-line html-div" data-testid="code-cell" data-line-number="257" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-255 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC258" class="react-file-line html-div" data-testid="code-cell" data-line-number="258" style="position:relative">In the context of a framework, a component's <span class="pl-s">**</span>lifecycle<span class="pl-s">**</span> is a collection of phases a component goes through from the time it is appended to the DOM and then rendered by the browser (often called <span class="pl-s">_</span>mounting<span class="pl-s">_</span>) to the time that it is removed from the DOM (often called <span class="pl-s">_</span>unmounting<span class="pl-s">_</span>). Each framework names these lifecycle phases differently, and not all give developers access to the same phases. All of the frameworks follow the same general model: they allow developers to perform certain actions when the component <span class="pl-s">_</span>mounts<span class="pl-s">_</span>, when it <span class="pl-s">_</span>renders<span class="pl-s">_</span>, when it <span class="pl-s">_</span>unmounts<span class="pl-s">_</span>, and at many phases in between these.</div></div></div><div class="child-of-line-209 child-of-line-255 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC259" class="react-file-line html-div" data-testid="code-cell" data-line-number="259" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-255 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC260" class="react-file-line html-div" data-testid="code-cell" data-line-number="260" style="position:relative">The <span class="pl-s">_</span>render<span class="pl-s">_</span> phase is the most crucial to understand, because it is repeated the most times as your user interacts with your application. It's run every time the browser needs to render something new, whether that new information is an addition to what's in the browser, a deletion, or an edit of what's there.</div></div></div><div class="child-of-line-209 child-of-line-255 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC261" class="react-file-line html-div" data-testid="code-cell" data-line-number="261" style="position:relative"> </div></div></div><div class="child-of-line-209 child-of-line-255 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC262" class="react-file-line html-div" data-testid="code-cell" data-line-number="262" style="position:relative">This <span class="pl-s">[</span>diagram of a React component's lifecycle<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/</span><span class="pl-s">)</span> offers a general overview of the concept.</div></div></div><div class="child-of-line-209 child-of-line-255 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC263" class="react-file-line html-div" data-testid="code-cell" data-line-number="263" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC264" class="react-file-line html-div" data-testid="code-cell" data-line-number="264" style="position:relative"><span class="pl-mh">## <span class="pl-en">Rendering elements</span></span></div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC265" class="react-file-line html-div" data-testid="code-cell" data-line-number="265" style="position:relative"> </div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC266" class="react-file-line html-div" data-testid="code-cell" data-line-number="266" style="position:relative">Just as with lifecycles, frameworks take different-but-similar approaches to how they render your applications. All of them track the current rendered version of your browser's DOM, and each makes slightly different decisions about how the DOM should change as components in your application re-render. Because frameworks make these decisions for you, you typically don't interact with the DOM yourself. This abstraction away from the DOM is more complex and more memory-intensive than updating the DOM yourself, but without it, frameworks could not allow you to program in the declarative way they're known for.</div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC267" class="react-file-line html-div" data-testid="code-cell" data-line-number="267" style="position:relative"> </div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC268" class="react-file-line html-div" data-testid="code-cell" data-line-number="268" style="position:relative">The <span class="pl-s">**</span>Virtual DOM<span class="pl-s">**</span> is an approach whereby information about your browser's DOM is stored in JavaScript memory. Your application updates this copy of the DOM, then compares it to the "real" DOM — the DOM that is actually rendered for your users — in order to decide what to render. The application builds a "diff" to compare the differences between the updated virtual DOM and the currently rendered DOM, and uses that diff to apply updates to the real DOM. Both React and Vue utilize a virtual DOM model, but they do not apply the exact same logic when diffing or rendering.</div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC269" class="react-file-line html-div" data-testid="code-cell" data-line-number="269" style="position:relative"> </div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC270" class="react-file-line html-div" data-testid="code-cell" data-line-number="270" style="position:relative">You can <span class="pl-s">[</span>read more about the Virtual DOM in the React docs<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://legacy.reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom</span><span class="pl-s">)</span>.</div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC271" class="react-file-line html-div" data-testid="code-cell" data-line-number="271" style="position:relative"> </div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC272" class="react-file-line html-div" data-testid="code-cell" data-line-number="272" style="position:relative">The <span class="pl-s">**</span>Incremental DOM<span class="pl-s">**</span> is similar to the virtual DOM in that it builds a DOM diff to decide what to render, but different in that it doesn't create a complete copy of the DOM in JavaScript memory. It ignores the parts of the DOM that do not need to be changed. Angular is the only framework discussed so far in this module that uses an incremental DOM.</div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC273" class="react-file-line html-div" data-testid="code-cell" data-line-number="273" style="position:relative"> </div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC274" class="react-file-line html-div" data-testid="code-cell" data-line-number="274" style="position:relative">You can <span class="pl-s">[</span>read more about the Incremental DOM on the Auth0 blog<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://auth0.com/blog/incremental-dom/</span><span class="pl-s">)</span>.</div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC275" class="react-file-line html-div" data-testid="code-cell" data-line-number="275" style="position:relative"> </div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC276" class="react-file-line html-div" data-testid="code-cell" data-line-number="276" style="position:relative">The <span class="pl-s">**</span>Glimmer VM<span class="pl-s">**</span> is unique to Ember. It is not a virtual DOM nor an incremental DOM; it is a separate process through which Ember's templates are transpiled into a kind of "byte code" that is easier and faster to read than JavaScript.</div></div></div><div class="child-of-line-263 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC277" class="react-file-line html-div" data-testid="code-cell" data-line-number="277" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC278" class="react-file-line html-div" data-testid="code-cell" data-line-number="278" style="position:relative"><span class="pl-mh">## <span class="pl-en">Routing</span></span></div></div></div><div class="child-of-line-277 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC279" class="react-file-line html-div" data-testid="code-cell" data-line-number="279" style="position:relative"> </div></div></div><div class="child-of-line-277 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC280" class="react-file-line html-div" data-testid="code-cell" data-line-number="280" style="position:relative">As <span class="pl-s">[</span>mentioned in the previous chapter, routing<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#routing</span><span class="pl-s">)</span> is an important part of the web experience. To avoid a broken experience in sufficiently complex apps with lots of views, each of the frameworks covered in this module provides a library (or more than one library) that helps developers implement client-side routing in their applications.</div></div></div><div class="child-of-line-277 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC281" class="react-file-line html-div" data-testid="code-cell" data-line-number="281" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC282" class="react-file-line html-div" data-testid="code-cell" data-line-number="282" style="position:relative"><span class="pl-mh">## <span class="pl-en">Testing</span></span></div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC283" class="react-file-line html-div" data-testid="code-cell" data-line-number="283" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC284" class="react-file-line html-div" data-testid="code-cell" data-line-number="284" style="position:relative">All applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and web applications are no different. Each framework's ecosystem provides tooling that facilitates the writing of tests. Testing tools are not built into the frameworks themselves, but the command-line interface tools used to generate framework apps give you access to the appropriate testing tools.</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC285" class="react-file-line html-div" data-testid="code-cell" data-line-number="285" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC286" class="react-file-line html-div" data-testid="code-cell" data-line-number="286" style="position:relative">Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike.</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC287" class="react-file-line html-div" data-testid="code-cell" data-line-number="287" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC288" class="react-file-line html-div" data-testid="code-cell" data-line-number="288" style="position:relative"><span class="pl-s">[</span>Testing Library<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://testing-library.com/</span><span class="pl-s">)</span> is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the <span class="pl-s">[</span>testing of Ember apps<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">https://guides.emberjs.com/release/testing/</span><span class="pl-s">)</span>.</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC289" class="react-file-line html-div" data-testid="code-cell" data-line-number="289" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC290" class="react-file-line html-div" data-testid="code-cell" data-line-number="290" style="position:relative">Here's a quick test for our <span class="pl-s">`</span><span class="pl-c1">CounterButton</span><span class="pl-s">`</span> written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times:</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC291" class="react-file-line html-div" data-testid="code-cell" data-line-number="291" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC292" class="react-file-line html-div" data-testid="code-cell" data-line-number="292" style="position:relative"><span class="pl-s">```</span><span class="pl-en">jsx</span></div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC293" class="react-file-line html-div" data-testid="code-cell" data-line-number="293" style="position:relative"><span class="pl-k">import</span> { <span class="pl-smi">fireEvent</span>, <span class="pl-smi">render</span>, <span class="pl-smi">screen</span> } <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>@testing-library/react<span class="pl-pds">"</span></span>;</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC294" class="react-file-line html-div" data-testid="code-cell" data-line-number="294" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC295" class="react-file-line html-div" data-testid="code-cell" data-line-number="295" style="position:relative"><span class="pl-k">import</span> <span class="pl-smi">CounterButton</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">"</span>./CounterButton<span class="pl-pds">"</span></span>;</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC296" class="react-file-line html-div" data-testid="code-cell" data-line-number="296" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC297" class="react-file-line html-div" data-testid="code-cell" data-line-number="297" style="position:relative"><span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">"</span>Renders a semantic button with an initial state of 0<span class="pl-pds">"</span></span>, () <span class="pl-k">=></span> {</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC298" class="react-file-line html-div" data-testid="code-cell" data-line-number="298" style="position:relative"> <span class="pl-en">render</span>(<span class="pl-k"><</span>CounterButton <span class="pl-k">/</span><span class="pl-k">></span>);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC299" class="react-file-line html-div" data-testid="code-cell" data-line-number="299" style="position:relative"> <span class="pl-k">const</span> <span class="pl-c1">btn</span> <span class="pl-k">=</span> <span class="pl-c1">screen</span>.<span class="pl-en">getByRole</span>(<span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span>);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC300" class="react-file-line html-div" data-testid="code-cell" data-line-number="300" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC301" class="react-file-line html-div" data-testid="code-cell" data-line-number="301" style="position:relative"> <span class="pl-en">expect</span>(btn).<span class="pl-en">toBeInTheDocument</span>();</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC302" class="react-file-line html-div" data-testid="code-cell" data-line-number="302" style="position:relative"> <span class="pl-en">expect</span>(btn).<span class="pl-en">toHaveTextContent</span>(<span class="pl-s"><span class="pl-pds">"</span>Clicked 0 times<span class="pl-pds">"</span></span>);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC303" class="react-file-line html-div" data-testid="code-cell" data-line-number="303" style="position:relative">});</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC304" class="react-file-line html-div" data-testid="code-cell" data-line-number="304" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC305" class="react-file-line html-div" data-testid="code-cell" data-line-number="305" style="position:relative"><span class="pl-en">it</span>(<span class="pl-s"><span class="pl-pds">"</span>Increments the count when clicked<span class="pl-pds">"</span></span>, () <span class="pl-k">=></span> {</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC306" class="react-file-line html-div" data-testid="code-cell" data-line-number="306" style="position:relative"> <span class="pl-en">render</span>(<span class="pl-k"><</span>CounterButton <span class="pl-k">/</span><span class="pl-k">></span>);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC307" class="react-file-line html-div" data-testid="code-cell" data-line-number="307" style="position:relative"> <span class="pl-k">const</span> <span class="pl-c1">btn</span> <span class="pl-k">=</span> <span class="pl-c1">screen</span>.<span class="pl-en">getByRole</span>(<span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span>);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC308" class="react-file-line html-div" data-testid="code-cell" data-line-number="308" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC309" class="react-file-line html-div" data-testid="code-cell" data-line-number="309" style="position:relative"> <span class="pl-smi">fireEvent</span>.<span class="pl-c1">click</span>(btn);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC310" class="react-file-line html-div" data-testid="code-cell" data-line-number="310" style="position:relative"> <span class="pl-en">expect</span>(btn).<span class="pl-en">toHaveTextContent</span>(<span class="pl-s"><span class="pl-pds">"</span>Clicked 1 times<span class="pl-pds">"</span></span>);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC311" class="react-file-line html-div" data-testid="code-cell" data-line-number="311" style="position:relative"> </div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC312" class="react-file-line html-div" data-testid="code-cell" data-line-number="312" style="position:relative"> <span class="pl-smi">fireEvent</span>.<span class="pl-c1">click</span>(btn);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC313" class="react-file-line html-div" data-testid="code-cell" data-line-number="313" style="position:relative"> <span class="pl-en">expect</span>(btn).<span class="pl-en">toHaveTextContent</span>(<span class="pl-s"><span class="pl-pds">"</span>Clicked 2 times<span class="pl-pds">"</span></span>);</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC314" class="react-file-line html-div" data-testid="code-cell" data-line-number="314" style="position:relative">});</div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC315" class="react-file-line html-div" data-testid="code-cell" data-line-number="315" style="position:relative"><span class="pl-s">```</span></div></div></div><div class="child-of-line-281 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC316" class="react-file-line html-div" data-testid="code-cell" data-line-number="316" style="position:relative"> </div></div></div><div class="react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC317" class="react-file-line html-div" data-testid="code-cell" data-line-number="317" style="position:relative"><span class="pl-mh">## <span class="pl-en">Summary</span></span></div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC318" class="react-file-line html-div" data-testid="code-cell" data-line-number="318" style="position:relative"> </div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC319" class="react-file-line html-div" data-testid="code-cell" data-line-number="319" style="position:relative">At this point you should have more of an idea about the actual languages, features, and tools you'll be using as you create applications with frameworks. I'm sure you're enthusiastic to get going and actually do some coding, and that's what you are going to do next! At this point you can choose which framework you'd like to start learning first:</div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC320" class="react-file-line html-div" data-testid="code-cell" data-line-number="320" style="position:relative"> </div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC321" class="react-file-line html-div" data-testid="code-cell" data-line-number="321" style="position:relative"><span class="pl-v">-</span> <span class="pl-s">[</span>React<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started</span><span class="pl-s">)</span></div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC322" class="react-file-line html-div" data-testid="code-cell" data-line-number="322" style="position:relative"><span class="pl-v">-</span> <span class="pl-s">[</span>Ember<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started</span><span class="pl-s">)</span></div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC323" class="react-file-line html-div" data-testid="code-cell" data-line-number="323" style="position:relative"><span class="pl-v">-</span> <span class="pl-s">[</span>Vue<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started</span><span class="pl-s">)</span></div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC324" class="react-file-line html-div" data-testid="code-cell" data-line-number="324" style="position:relative"><span class="pl-v">-</span> <span class="pl-s">[</span>Svelte<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started</span><span class="pl-s">)</span></div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC325" class="react-file-line html-div" data-testid="code-cell" data-line-number="325" style="position:relative"><span class="pl-v">-</span> <span class="pl-s">[</span>Angular<span class="pl-s">]</span><span class="pl-s">(</span><span class="pl-corl">/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started</span><span class="pl-s">)</span></div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC326" class="react-file-line html-div" data-testid="code-cell" data-line-number="326" style="position:relative"> </div></div></div><div class="child-of-line-316 react-code-text react-code-line-contents" style="min-height:auto"><div><div id="LC327" class="react-file-line html-div" data-testid="code-cell" data-line-number="327" style="position:relative">{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div></div></div></div></div></div><div id="copilot-button-container"></div></div><div id="highlighted-line-menu-container"></div></div></div><button hidden="" data-testid="hotkey-button" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button></section></div></div></div> <!-- --> <!-- --> </div></div></div><div class="Box-sc-g0xbh4-0"></div></div></div></div></div><div id="find-result-marks-container" class="Box-sc-g0xbh4-0 cCoXib"></div><button hidden="" data-testid="" data-hotkey-scope="read-only-cursor-text-area"></button><button hidden=""></button></div> <!-- --> <!-- --> <script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-app> </turbo-frame> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2024 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>