CINXE.COM
React
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charSet="utf-8"/><link rel="preconnect" href="https://1FCF9AYYAT-dsn.algolia.net"/><link rel="preload" as="style" href="/_next/static/css/f9c258fe25df9394.css"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-B1E83PJ3RT"></script><link rel="preload" as="script" href="/_next/static/chunks/webpack-0df9dc1159f7c1e3.js"/><link rel="preload" as="script" href="/_next/static/chunks/framework-1f5321399f6bc226.js"/><link rel="preload" as="script" href="/_next/static/chunks/main-78a3b4c2aa4e4850.js"/><link rel="preload" as="script" href="/_next/static/chunks/pages/_app-dd0b77ea7bd5b246.js"/><link rel="preload" as="script" href="/_next/static/chunks/181-214845cf9287d64e.js"/><link rel="preload" as="script" href="/_next/static/chunks/247-0d627fd9a5ae3514.js"/><link rel="preload" as="script" href="/_next/static/chunks/pages/%5B%5B...markdownPath%5D%5D-11b0a336f223865f.js"/><link rel="preload" as="script" href="/_next/static/XJwnbMqphJWph8J-Ud_BN/_buildManifest.js"/><link rel="preload" as="script" href="/_next/static/XJwnbMqphJWph8J-Ud_BN/_ssgManifest.js"/><link rel="preload" href="/fonts/Source-Code-Pro-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="https://react.dev/fonts/Optimistic_Display_W_Md.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="https://react.dev/fonts/Optimistic_Display_W_SBd.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="https://react.dev/fonts/Optimistic_Display_W_Bd.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="https://react.dev/fonts/Optimistic_Text_W_Md.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="https://react.dev/fonts/Optimistic_Text_W_Bd.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="https://react.dev/fonts/Optimistic_Text_W_Rg.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="https://react.dev/fonts/Optimistic_Text_W_It.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/f9c258fe25df9394.css" as="style"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>React</title><meta name="description" content="React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations."/><link rel="canonical" href="https://react.dev/"/><link rel="alternate" href="https://react.dev/" hrefLang="x-default"/><link rel="alternate" hrefLang="en" href="https://react.dev/"/><link rel="alternate" hrefLang="zh-hans" href="https://zh-hans.react.dev/"/><link rel="alternate" hrefLang="es" href="https://es.react.dev/"/><link rel="alternate" hrefLang="fr" href="https://fr.react.dev/"/><link rel="alternate" hrefLang="ja" href="https://ja.react.dev/"/><link rel="alternate" hrefLang="tr" href="https://tr.react.dev/"/><link rel="alternate" hrefLang="ko" href="https://ko.react.dev/"/><meta property="fb:app_id" content="623268441017527"/><meta property="og:type" content="website"/><meta property="og:url" content="https://react.dev/"/><meta property="og:title" content="React"/><meta property="og:description" content="React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations."/><meta property="og:image" content="https://react.dev/images/og-home.png"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@reactjs"/><meta name="twitter:creator" content="@reactjs"/><meta name="twitter:title" content="React"/><meta name="twitter:description" content="React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations."/><meta name="twitter:image" content="https://react.dev/images/og-home.png"/><meta name="google-site-verification" content="sIlAGs48RulR4DdP95YSWNKZIEtCqQmRjzn-Zq-CcD0"/><link rel="alternate" type="application/rss+xml" title="React Blog RSS Feed" href="/rss.xml"/><meta name="next-head-count" content="37"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/site.webmanifest"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#404756"/><meta name="msapplication-TileColor" content="#2b5797"/><meta name="theme-color" content="#23272f"/><link rel="preload" as="image" imageSrcSet="/_next/image?url=%2Fimages%2Fuwu.png&w=64&q=75 1x, /_next/image?url=%2Fimages%2Fuwu.png&w=128&q=75 2x" fetchPriority="high"/><link rel="stylesheet" href="/_next/static/css/f9c258fe25df9394.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" noModule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-0df9dc1159f7c1e3.js" defer=""></script><script src="/_next/static/chunks/framework-1f5321399f6bc226.js" defer=""></script><script src="/_next/static/chunks/main-78a3b4c2aa4e4850.js" defer=""></script><script src="/_next/static/chunks/pages/_app-dd0b77ea7bd5b246.js" defer=""></script><script src="/_next/static/chunks/181-214845cf9287d64e.js" defer=""></script><script src="/_next/static/chunks/247-0d627fd9a5ae3514.js" defer=""></script><script src="/_next/static/chunks/pages/%5B%5B...markdownPath%5D%5D-11b0a336f223865f.js" defer=""></script><script src="/_next/static/XJwnbMqphJWph8J-Ud_BN/_buildManifest.js" defer=""></script><script src="/_next/static/XJwnbMqphJWph8J-Ud_BN/_ssgManifest.js" defer=""></script></head><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-B1E83PJ3RT');</script><body class="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base"><script> (function () { try { let logShown = false; function setUwu(isUwu) { try { if (isUwu) { localStorage.setItem('uwu', true); document.documentElement.classList.add('uwu'); if (!logShown) { console.log('uwu mode! turn off with ?uwu=0'); console.log('logo credit to @sawaratsuki1004 via https://github.com/SAWARATSUKI/ServiceLogos'); logShown = true; } } else { localStorage.removeItem('uwu'); document.documentElement.classList.remove('uwu'); console.log('uwu mode off. turn on with ?uwu'); } } catch (err) { } } window.__setUwu = setUwu; function checkQueryParam() { const params = new URLSearchParams(window.location.search); const value = params.get('uwu'); switch(value) { case '': case 'true': case '1': return true; case 'false': case '0': return false; default: return null; } } function checkLocalStorage() { try { return localStorage.getItem('uwu') === 'true'; } catch (err) { return false; } } const uwuQueryParam = checkQueryParam(); if (uwuQueryParam != null) { setUwu(uwuQueryParam); } else if (checkLocalStorage()) { document.documentElement.classList.add('uwu'); } } catch (err) { } })(); </script><script> (function () { function setTheme(newTheme) { window.__theme = newTheme; if (newTheme === 'dark') { document.documentElement.classList.add('dark'); } else if (newTheme === 'light') { document.documentElement.classList.remove('dark'); } } var preferredTheme; try { preferredTheme = localStorage.getItem('theme'); } catch (err) { } window.__setPreferredTheme = function(newTheme) { preferredTheme = newTheme; setTheme(newTheme); try { localStorage.setItem('theme', newTheme); } catch (err) { } }; var initialTheme = preferredTheme; var darkQuery = window.matchMedia('(prefers-color-scheme: dark)'); if (!initialTheme) { initialTheme = darkQuery.matches ? 'dark' : 'light'; } setTheme(initialTheme); darkQuery.addEventListener('change', function (e) { if (!preferredTheme) { setTheme(e.matches ? 'dark' : 'light'); } }); // Detect whether the browser is Mac to display platform specific content // An example of such content can be the keyboard shortcut displayed in the search bar document.documentElement.classList.add( window.navigator.platform.includes('Mac') ? "platform-mac" : "platform-win" ); })(); </script><link rel="preload" href="/images/home/conf2019/cover.svg" as="image"/><link rel="preload" href="/images/home/conf2021/cover.svg" as="image"/><div id="__next"><div></div><div class="z-40 sticky top-0"><nav class="duration-300 backdrop-filter backdrop-blur-lg backdrop-saturate-200 transition-shadow bg-opacity-90 items-center w-full flex justify-between bg-wash dark:bg-wash-dark dark:bg-opacity-95 px-1.5 lg:pe-5 lg:ps-4 z-40"><div class="flex items-center justify-between w-full h-16 gap-0 sm:gap-3"><div class="flex flex-row 3xl:flex-1 items-centers"><button type="button" aria-label="Menu" class="active:scale-95 transition-transform flex lg:hidden w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link"><svg width="1.33em" height="1.33em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button><span data-state="closed" class="flex items-center" style="-webkit-touch-callout:none"><div class="flex items-center"><div class="uwu-visible flex items-center justify-center h-full"><a href="/"><img alt="logo by @sawaratsuki1004" title="logo by @sawaratsuki1004" fetchPriority="high" width="63" height="32" decoding="async" data-nimg="1" class="h-8" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fuwu.png&w=64&q=75 1x, /_next/image?url=%2Fimages%2Fuwu.png&w=128&q=75 2x" src="/_next/image?url=%2Fimages%2Fuwu.png&w=128&q=75"/></a></div><div class="uwu-hidden"><a class="active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2" href="/"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-sm me-0 w-10 h-10 text-brand dark:text-brand-dark flex origin-center transition-all ease-in-out"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg><span class="sr-only 3xl:not-sr-only">React</span></a></div></div></span><div class="flex flex-column justify-center items-center"><a class=" flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-30 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer" href="/versions">v<!-- -->18.3.1</a></div></div><div class="items-center justify-center flex-1 hidden w-full md:flex 3xl:w-auto 3xl:shrink-0 3xl:justify-center"><button type="button" class="flex 3xl:w-[56rem] 3xl:mx-0 relative ps-4 pe-1 py-1 h-10 bg-gray-30/20 dark:bg-gray-40/20 outline-none focus:outline-link betterhover:hover:bg-opacity-80 pointer items-center text-start w-full text-gray-30 rounded-full align-middle text-base"><svg width="1em" height="1em" viewBox="0 0 20 20" class="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg>Search<span class="hidden ms-auto sm:flex item-center me-1"><kbd class="w-5 h-5 border border-transparent me-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded-md" data-platform="mac">⌘</kbd><kbd class="w-10 h-5 border border-transparent me-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded-md" data-platform="win">Ctrl</kbd><kbd class="w-5 h-5 border border-transparent me-1 bg-wash dark:bg-wash-dark text-gray-30 align-middle p-0 inline-flex justify-center items-center text-xs text-center rounded-md">K</kbd></span></button></div><div class="text-base justify-center items-center gap-1.5 flex 3xl:flex-1 flex-row 3xl:justify-end"><div class="mx-2.5 gap-1.5 hidden lg:flex"><div class="flex flex-auto sm:flex-1"><a class="active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap hover:bg-primary/5 hover:dark:bg-primary-dark/5" href="/learn">Learn</a></div><div class="flex flex-auto sm:flex-1"><a class="active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap hover:bg-primary/5 hover:dark:bg-primary-dark/5" href="/reference/react">Reference</a></div><div class="flex flex-auto sm:flex-1"><a class="active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap hover:bg-primary/5 hover:dark:bg-primary-dark/5" href="/community">Community</a></div><div class="flex flex-auto sm:flex-1"><a class="active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap hover:bg-primary/5 hover:dark:bg-primary-dark/5" href="/blog">Blog</a></div></div><div class="flex w-full md:hidden"></div><div class="flex items-center -space-x-2.5 xs:space-x-0 "><div class="flex md:hidden"><button aria-label="Search" type="button" class="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 md:hidden hover:bg-secondary-button hover:dark:bg-secondary-button-dark outline-link"><svg width="1em" height="1em" viewBox="0 0 20 20" class="w-5 h-5 align-middle"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div><div class="flex dark:hidden"><button type="button" aria-label="Use Dark Mode" class="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(-440 -200)"><path fill="currentColor" fill-rule="nonzero" stroke="currentColor" stroke-width="0.5" d="M102,21 C102,18.1017141 103.307179,15.4198295 105.51735,13.6246624 C106.001939,13.2310647 105.821611,12.4522936 105.21334,12.3117518 C104.322006,12.1058078 103.414758,12 102.5,12 C95.8722864,12 90.5,17.3722864 90.5,24 C90.5,30.6277136 95.8722864,36 102.5,36 C106.090868,36 109.423902,34.4109093 111.690274,31.7128995 C112.091837,31.2348572 111.767653,30.5041211 111.143759,30.4810139 C106.047479,30.2922628 102,26.1097349 102,21 Z M102.5,34.5 C96.7007136,34.5 92,29.7992864 92,24 C92,18.2007136 96.7007136,13.5 102.5,13.5 C102.807386,13.5 103.113925,13.5136793 103.419249,13.5407785 C101.566047,15.5446378 100.5,18.185162 100.5,21 C100.5,26.3198526 104.287549,30.7714322 109.339814,31.7756638 L109.516565,31.8092927 C107.615276,33.5209452 105.138081,34.5 102.5,34.5 Z" transform="translate(354.5 192)"></path><polygon points="444 228 468 228 468 204 444 204"></polygon></g></svg></button></div><div class="hidden dark:flex"><button type="button" aria-label="Use Light Mode" class="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd" transform="translate(-442 -200)"><g fill="currentColor" transform="translate(356 144)"><path fill-rule="nonzero" d="M108.5 24C108.5 27.5902136 105.590214 30.5 102 30.5 98.4097864 30.5 95.5 27.5902136 95.5 24 95.5 20.4097864 98.4097864 17.5 102 17.5 105.590214 17.5 108.5 20.4097864 108.5 24zM107 24C107 21.2382136 104.761786 19 102 19 99.2382136 19 97 21.2382136 97 24 97 26.7617864 99.2382136 29 102 29 104.761786 29 107 26.7617864 107 24zM101 12.75L101 14.75C101 15.1642136 101.335786 15.5 101.75 15.5 102.164214 15.5 102.5 15.1642136 102.5 14.75L102.5 12.75C102.5 12.3357864 102.164214 12 101.75 12 101.335786 12 101 12.3357864 101 12.75zM95.7255165 14.6323616L96.7485165 16.4038616C96.9556573 16.7625614 97.4143618 16.8854243 97.7730616 16.6782835 98.1317614 16.4711427 98.2546243 16.0124382 98.0474835 15.6537384L97.0244835 13.8822384C96.8173427 13.5235386 96.3586382 13.4006757 95.9999384 13.6078165 95.6412386 13.8149573 95.5183757 14.2736618 95.7255165 14.6323616zM91.8822384 19.0244835L93.6537384 20.0474835C94.0124382 20.2546243 94.4711427 20.1317614 94.6782835 19.7730616 94.8854243 19.4143618 94.7625614 18.9556573 94.4038616 18.7485165L92.6323616 17.7255165C92.2736618 17.5183757 91.8149573 17.6412386 91.6078165 17.9999384 91.4006757 18.3586382 91.5235386 18.8173427 91.8822384 19.0244835zM90.75 25L92.75 25C93.1642136 25 93.5 24.6642136 93.5 24.25 93.5 23.8357864 93.1642136 23.5 92.75 23.5L90.75 23.5C90.3357864 23.5 90 23.8357864 90 24.25 90 24.6642136 90.3357864 25 90.75 25zM92.6323616 30.2744835L94.4038616 29.2514835C94.7625614 29.0443427 94.8854243 28.5856382 94.6782835 28.2269384 94.4711427 27.8682386 94.0124382 27.7453757 93.6537384 27.9525165L91.8822384 28.9755165C91.5235386 29.1826573 91.4006757 29.6413618 91.6078165 30.0000616 91.8149573 30.3587614 92.2736618 30.4816243 92.6323616 30.2744835zM97.0244835 34.1177616L98.0474835 32.3462616C98.2546243 31.9875618 98.1317614 31.5288573 97.7730616 31.3217165 97.4143618 31.1145757 96.9556573 31.2374386 96.7485165 31.5961384L95.7255165 33.3676384C95.5183757 33.7263382 95.6412386 34.1850427 95.9999384 34.3921835 96.3586382 34.5993243 96.8173427 34.4764614 97.0244835 34.1177616zM103 35.25L103 33.25C103 32.8357864 102.664214 32.5 102.25 32.5 101.835786 32.5 101.5 32.8357864 101.5 33.25L101.5 35.25C101.5 35.6642136 101.835786 36 102.25 36 102.664214 36 103 35.6642136 103 35.25zM108.274483 33.3676384L107.251483 31.5961384C107.044343 31.2374386 106.585638 31.1145757 106.226938 31.3217165 105.868239 31.5288573 105.745376 31.9875618 105.952517 32.3462616L106.975517 34.1177616C107.182657 34.4764614 107.641362 34.5993243 108.000062 34.3921835 108.358761 34.1850427 108.481624 33.7263382 108.274483 33.3676384zM112.117762 28.9755165L110.346262 27.9525165C109.987562 27.7453757 109.528857 27.8682386 109.321717 28.2269384 109.114576 28.5856382 109.237439 29.0443427 109.596138 29.2514835L111.367638 30.2744835C111.726338 30.4816243 112.185043 30.3587614 112.392183 30.0000616 112.599324 29.6413618 112.476461 29.1826573 112.117762 28.9755165zM113.25 23L111.25 23C110.835786 23 110.5 23.3357864 110.5 23.75 110.5 24.1642136 110.835786 24.5 111.25 24.5L113.25 24.5C113.664214 24.5 114 24.1642136 114 23.75 114 23.3357864 113.664214 23 113.25 23zM111.367638 17.7255165L109.596138 18.7485165C109.237439 18.9556573 109.114576 19.4143618 109.321717 19.7730616 109.528857 20.1317614 109.987562 20.2546243 110.346262 20.0474835L112.117762 19.0244835C112.476461 18.8173427 112.599324 18.3586382 112.392183 17.9999384 112.185043 17.6412386 111.726338 17.5183757 111.367638 17.7255165zM106.975517 13.8822384L105.952517 15.6537384C105.745376 16.0124382 105.868239 16.4711427 106.226938 16.6782835 106.585638 16.8854243 107.044343 16.7625614 107.251483 16.4038616L108.274483 14.6323616C108.481624 14.2736618 108.358761 13.8149573 108.000062 13.6078165 107.641362 13.4006757 107.182657 13.5235386 106.975517 13.8822384z" transform="translate(0 48)" stroke="currentColor" stroke-width="0.25"></path><path d="M98.6123,60.1372 C98.6123,59.3552 98.8753,58.6427 99.3368,58.0942 C99.5293,57.8657 99.3933,57.5092 99.0943,57.5017 C99.0793,57.5012 99.0633,57.5007 99.0483,57.5007 C97.1578,57.4747 95.5418,59.0312 95.5008,60.9217 C95.4578,62.8907 97.0408,64.5002 98.9998,64.5002 C99.7793,64.5002 100.4983,64.2452 101.0798,63.8142 C101.3183,63.6372 101.2358,63.2627 100.9478,63.1897 C99.5923,62.8457 98.6123,61.6072 98.6123,60.1372" transform="translate(3 11)"></path></g><polygon points="444 228 468 228 468 204 444 204"></polygon></g></svg></button></div><div class="flex"><a class="active:scale-95 transition-transform flex w-12 h-12 rounded-full items-center justify-center hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link" aria-label="Translations" href="/community/translations"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "></path></svg></a></div><div class="flex"><a class="flex items-center justify-center w-12 h-12 transition-transform rounded-full active:scale-95 hover:bg-primary/5 hover:dark:bg-primary-dark/5 outline-link" target="_blank" rel="noreferrer noopener" aria-label="Open on GitHub" href="https://github.com/facebook/react/releases"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path></g></svg></a></div></div></div></div></nav></div><div class=""><!--$--><main class="min-w-0 isolate"><article class="font-normal break-words text-primary dark:text-primary-dark"><div class="ps-0"><div class="mx-5 mt-12 lg:mt-24 mb-20 lg:mb-32 flex flex-col justify-center"><div class="uwu-visible flex justify-center"><img alt="logo by @sawaratsuki1004" title="logo by @sawaratsuki1004" loading="eager" width="313" height="160" decoding="async" data-nimg="1" style="color:transparent" srcSet="/_next/image?url=%2Fimages%2Fuwu.png&w=384&q=75 1x, /_next/image?url=%2Fimages%2Fuwu.png&w=640&q=75 2x" src="/_next/image?url=%2Fimages%2Fuwu.png&w=640&q=75"/></div><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="uwu-hidden mt-4 mb-3 text-brand dark:text-brand-dark w-24 lg:w-28 self-center text-sm me-0 flex origin-center transition-all ease-in-out"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg><h1 class="uwu-hidden text-5xl font-display lg:text-6xl self-center flex font-semibold leading-snug text-primary dark:text-primary-dark">React</h1><p class="text-4xl font-display max-w-lg md:max-w-full py-1 text-center text-secondary dark:text-primary-dark leading-snug self-center">The library for web and native user interfaces</p><div class="mt-5 self-center flex gap-2 w-full sm:w-auto flex-col sm:flex-row"><a class="w-full sm:w-auto justify-center active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80 text-lg py-3 rounded-full px-4 sm:px-6" aria-label="Learn React" target="_self" href="/learn">Learn React</a><a class="w-full sm:w-auto justify-center active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug text-primary dark:text-primary-dark shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 text-lg py-3 rounded-full px-4 sm:px-6" aria-label="API Reference" target="_self" href="/reference/react">API Reference</a></div></div><div class="mx-auto flex flex-col w-full bg-gradient-left dark:bg-gradient-left-dark border-t border-primary/10 dark:border-primary-dark/10 " style="contain:content"><div class="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center"><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Create user interfaces from components</h2><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">React lets you build user interfaces out of individual pieces called components. Create your own React components like<!-- --> <code dir="ltr" class="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1 text-left">Thumbnail</code>, <code dir="ltr" class="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1 text-left">LikeButton</code>, and<!-- --> <code dir="ltr" class="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1 text-left">Video</code>. Then combine them into entire screens, pages, and apps.</p></div><div class="max-w-7xl mx-auto flex flex-col w-full"><div class="lg:ps-10 lg:pe-5 w-full"><div class="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark"><div class="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right ltr:lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark"><div class="lg:-m-5 h-full shadow-nav dark:shadow-nav-dark lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col"><div class="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-black/5 dark:border-white/5"><h3 class="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none text-start">Video.js</h3></div><!--$--><div dir="ltr" class="sandpack sandpack--codeblock rounded-2xl h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg shadow-none rounded-2xl overflow-hidden w-full flex bg-transparent" style="contain:content"><div class="sp-wrapper"><div class="sp-stack"><div class="sp-code-editor"><pre class="sp-cm sp-pristine sp-javascript flex align-start"><code class="sp-pre-placeholder grow-[2]"><div class="cm-line "><span class="sp-syntax-keyword">function</span> <span class="sp-syntax-definition">Video</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-property">video</span> <span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">)</span> <span class="sp-syntax-punctuation">{</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">return</span> <span class="sp-syntax-punctuation">(</span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-tag">div</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">Thumbnail</span> <span class="sp-syntax-property">video</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">video</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-punctuation">/></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-tag">a</span> <span class="sp-syntax-property">href</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">video</span>.<span class="sp-syntax-property">url</span><span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-tag">h3</span><span class="sp-syntax-punctuation">></span><span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">video</span>.<span class="sp-syntax-property">title</span><span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation"></</span><span class="sp-syntax-tag">h3</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-tag">p</span><span class="sp-syntax-punctuation">></span><span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">video</span>.<span class="sp-syntax-property">description</span><span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation"></</span><span class="sp-syntax-tag">p</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"></</span><span class="sp-syntax-tag">a</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">LikeButton</span> <span class="sp-syntax-property">video</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">video</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-punctuation">/></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"></</span><span class="sp-syntax-tag">div</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><span class="sp-syntax-punctuation">}</span></div></code></pre></div></div></div></div><!--/$--></div><div class="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center"><div class="max-w-3xl rounded-2xl mx-auto text-secondary leading-normal bg-white overflow-hidden w-full overflow-y-auto shadow-nav dark:shadow-nav-dark" style="height:113px"><div class="p-4" style="content-visibility:auto"><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-yellow-50 via-blue-50 to-purple-60"><svg class="drop-shadow-xl" width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" fill="currentColor"></path></svg></a><a target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold" data-hover="h3">My video</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Video description</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div></div></div><div class="absolute z-10 inset-0 pointer-events-none transition-opacity transform-gpu opacity-0"></div></div></div></div></div></div><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly combine components written by independent people, teams, and organizations.</p></div></div></div><div class="mx-auto flex flex-col w-full bg-gradient-right dark:bg-gradient-right-dark border-t border-primary/5 dark:border-primary-dark/5" style="contain:content"><div class="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center"><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Write components with code and markup</h2><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">React components are JavaScript functions. Want to show some content conditionally? Use an <code dir="ltr" class="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1 text-left">if</code> statement. Displaying a list? Try array <code dir="ltr" class="font-mono inline rounded-lg bg-gray-15/40 dark:bg-secondary-button-dark py-0.5 px-1 text-left">map()</code>. Learning React is learning programming.</p></div><div class="max-w-7xl mx-auto flex flex-col w-full"><div class="lg:ps-10 lg:pe-5 w-full"><div class="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark"><div class="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right ltr:lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark"><div class="lg:-m-5 h-full shadow-nav dark:shadow-nav-dark lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col"><div class="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-black/5 dark:border-white/5"><h3 class="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none text-start">VideoList.js</h3></div><!--$--><div dir="ltr" class="sandpack sandpack--codeblock rounded-2xl h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg shadow-none rounded-2xl overflow-hidden w-full flex bg-transparent" style="contain:content"><div class="sp-wrapper"><div class="sp-stack"><div class="sp-code-editor"><pre class="sp-cm sp-pristine sp-javascript flex align-start"><code class="sp-pre-placeholder grow-[2]"><div class="cm-line "><span class="sp-syntax-keyword">function</span> <span class="sp-syntax-definition">VideoList</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-property">videos</span><span class="sp-syntax-punctuation">,</span> <span class="sp-syntax-property">emptyHeading</span> <span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">)</span> <span class="sp-syntax-punctuation">{</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">const</span> <span class="sp-syntax-plain">count</span> = <span class="sp-syntax-plain">videos</span>.<span class="sp-syntax-property">length</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">let</span> <span class="sp-syntax-plain">heading</span> = <span class="sp-syntax-plain">emptyHeading</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">if</span> <span class="sp-syntax-punctuation">(</span><span class="sp-syntax-plain">count</span> > <span class="sp-syntax-static">0</span><span class="sp-syntax-punctuation">)</span> <span class="sp-syntax-punctuation">{</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">const</span> <span class="sp-syntax-plain">noun</span> = <span class="sp-syntax-plain">count</span> > <span class="sp-syntax-static">1</span> ? <span class="sp-syntax-string">'Videos'</span> : <span class="sp-syntax-string">'Video'</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-plain">heading</span> = <span class="sp-syntax-plain">count</span> + <span class="sp-syntax-string">' '</span> + <span class="sp-syntax-plain">noun</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation">}</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">return</span> <span class="sp-syntax-punctuation">(</span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-tag">section</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-tag">h2</span><span class="sp-syntax-punctuation">></span><span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">heading</span><span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation"></</span><span class="sp-syntax-tag">h2</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">videos</span>.<span class="sp-syntax-property">map</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-plain">video</span> <span class="sp-syntax-punctuation">=></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">Video</span> <span class="sp-syntax-property">key</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">video</span>.<span class="sp-syntax-property">id</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-property">video</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">video</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-punctuation">/></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">}</span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"></</span><span class="sp-syntax-tag">section</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><span class="sp-syntax-punctuation">}</span></div></code></pre></div></div></div></div><!--/$--></div><div class="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center"><div class="max-w-3xl rounded-2xl mx-auto text-secondary leading-normal bg-white overflow-hidden w-full overflow-y-auto shadow-nav dark:shadow-nav-dark" style="height:22rem"><div class="p-0" style="content-visibility:auto"><div class="m-4"><section class="relative" data-hover="VideoList"><h2 class="font-bold text-xl text-primary mb-4 leading-snug" data-hover="h2">3 Videos</h2><div class="flex flex-col gap-4"><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-yellow-50 via-blue-50 to-purple-60"><svg class="drop-shadow-xl" width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" fill="currentColor"></path></svg></a><a target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold" data-hover="h3">First video</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Video description</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-yellow-50 via-red-50 to-purple-60"><svg class="drop-shadow-xl" width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" fill="currentColor"></path></svg></a><a target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold" data-hover="h3">Second video</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Video description</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-yellow-50 via-green-50 to-purple-60"><svg class="drop-shadow-xl" width="36" height="36" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 69C54.2254 69 69 54.2254 69 36C69 17.7746 54.2254 3 36 3C17.7746 3 3 17.7746 3 36C3 54.2254 17.7746 69 36 69ZM52.1716 38.6337L28.4366 51.5801C26.4374 52.6705 24 51.2235 24 48.9464V23.0536C24 20.7764 26.4374 19.3295 28.4366 20.4199L52.1716 33.3663C54.2562 34.5034 54.2562 37.4966 52.1716 38.6337Z" fill="currentColor"></path></svg></a><a target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold" data-hover="h3">Third video</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Video description</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div></div></section></div></div></div><div class="absolute z-10 inset-0 pointer-events-none transition-opacity transform-gpu opacity-0"></div></div></div></div></div></div><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">This markup syntax is called JSX. It is a JavaScript syntax extension popularized by React. Putting JSX markup close to related rendering logic makes React components easy to create, maintain, and delete.</p></div></div></div><div class="mx-auto flex flex-col w-full bg-gradient-left dark:bg-gradient-left-dark border-t border-primary/10 dark:border-primary-dark/10 " style="contain:content"><div class="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center"><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Add interactivity wherever you need it</h2><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">React components receive data and return what should appear on the screen. You can pass them new data in response to an interaction, like when the user types into an input. React will then update the screen to match the new data.</p></div><div class="max-w-7xl mx-auto flex flex-col w-full"><div class="lg:ps-10 lg:pe-5 w-full"><div class="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark"><div class="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right ltr:lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark"><div class="lg:-m-5 h-full shadow-nav dark:shadow-nav-dark lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col"><div class="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-black/5 dark:border-white/5"><h3 class="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none text-start">SearchableVideoList.js</h3></div><!--$--><div dir="ltr" class="sandpack sandpack--codeblock rounded-2xl h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg shadow-none rounded-2xl overflow-hidden w-full flex bg-transparent" style="contain:content"><div class="sp-wrapper"><div class="sp-stack"><div class="sp-code-editor"><pre class="sp-cm sp-pristine sp-javascript flex align-start"><code class="sp-pre-placeholder grow-[2]"><div class="cm-line "><span class="sp-syntax-keyword">import</span> <span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-plain">useState</span> <span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-keyword">from</span> <span class="sp-syntax-string">'react'</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><br/></div><div class="cm-line "><span class="sp-syntax-keyword">function</span> <span class="sp-syntax-definition">SearchableVideoList</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-property">videos</span> <span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">)</span> <span class="sp-syntax-punctuation">{</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">const</span> <span class="sp-syntax-punctuation">[</span><span class="sp-syntax-plain">searchText</span><span class="sp-syntax-punctuation">,</span> <span class="sp-syntax-plain">setSearchText</span><span class="sp-syntax-punctuation">]</span> = <span class="sp-syntax-definition">useState</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-string">''</span><span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">const</span> <span class="sp-syntax-plain">foundVideos</span> = <span class="sp-syntax-definition">filterVideos</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-plain">videos</span><span class="sp-syntax-punctuation">,</span> <span class="sp-syntax-plain">searchText</span><span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">return</span> <span class="sp-syntax-punctuation">(</span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">SearchInput</span><br/></div><div class="cm-line "> <span class="sp-syntax-property">value</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">searchText</span><span class="sp-syntax-punctuation">}</span><br/></div><div class="cm-line "> <span class="sp-syntax-property">onChange</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">newText</span> <span class="sp-syntax-punctuation">=></span> <span class="sp-syntax-definition">setSearchText</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-plain">newText</span><span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-punctuation">/></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">VideoList</span><br/></div><div class="cm-line "> <span class="sp-syntax-property">videos</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">foundVideos</span><span class="sp-syntax-punctuation">}</span><br/></div><div class="cm-line "> <span class="sp-syntax-property">emptyHeading</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-string">`No matches for “</span><span class="sp-syntax-punctuation">${</span><span class="sp-syntax-plain">searchText</span><span class="sp-syntax-punctuation">}</span><span class="sp-syntax-string">”`</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-punctuation">/></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"></</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><span class="sp-syntax-punctuation">}</span></div></code></pre></div></div></div></div><!--/$--></div><div class="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center"><div class="mx-auto max-w-3xl shadow-nav dark:shadow-nav-dark relative overflow-hidden w-full dark:border-opacity-10 rounded-2xl"><div class="w-full h-14 rounded-t-2xl shadow-outer-border backdrop-filter overflow-hidden backdrop-blur-lg backdrop-saturate-200 bg-white bg-opacity-90 z-10 absolute top-0 px-3 gap-2 flex flex-row items-center"><div class="select-none h-8 relative bg-gray-30/20 text-sm text-tertiary text-center rounded-full w-full flex-row flex space-between items-center"><div class="w-full leading-snug flex flex-row items-center justify-center"><svg class="text-tertiary me-1 opacity-60" width="12" height="12" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 4C17.0294 4 13 8.0294 13 13V16H12.3103C10.5296 16 8.8601 16.8343 8.2855 18.5198C7.6489 20.387 7 23.4148 7 28C7 32.5852 7.6489 35.613 8.2855 37.4802C8.8601 39.1657 10.5296 40 12.3102 40H31.6897C33.4704 40 35.1399 39.1657 35.7145 37.4802C36.3511 35.613 37 32.5852 37 28C37 23.4148 36.3511 20.387 35.7145 18.5198C35.1399 16.8343 33.4704 16 31.6897 16H31V13C31 8.0294 26.9706 4 22 4ZM25 16V13C25 11.3431 23.6569 10 22 10C20.3431 10 19 11.3431 19 13V16H25Z" fill="currentColor"></path></svg><span class="text-gray-30">example.com<!-- -->/</span>videos.html</div></div></div><div class="h-full flex flex-1"><div class="max-w-3xl rounded-2xl mx-auto text-secondary leading-normal bg-white overflow-hidden w-full overflow-y-auto shadow-nav dark:shadow-nav-dark" style="height:30rem"><div class="p-0" style="content-visibility:auto;margin-top:72px"><h1 class="mx-4 mb-1 font-bold text-3xl text-primary">React Videos</h1><p class="mx-4 mb-0 leading-snug text-secondary text-xl">A brief history of React</p><div class="px-4 pb-4"><div class="mt-3" data-hover="SearchableVideoList"><form class="mb-3 py-1" data-hover="SearchInput"><label for=":R1sq8q6:" class="sr-only">Search</label><div class="relative w-full"><div class="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none"><svg width="1em" height="1em" viewBox="0 0 20 20" class="text-gray-30 w-4"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><input type="text" id=":R1sq8q6:" class="flex ps-11 py-4 h-10 w-full text-start bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-primary rounded-full align-middle text-base" placeholder="Search" value=""/></div></form><section class="relative" data-hover="VideoList"><h2 class="font-bold text-xl text-primary mb-4 leading-snug" data-hover="h2">5 Videos</h2><div class="flex flex-col gap-4"><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=8pDqJVdNa44" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] hover:opacity-95 transition-opacity" style="background-image:url(/images/home/videos/documentary.webp)"></a><a href="https://www.youtube.com/watch?v=8pDqJVdNa44" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React: The Documentary</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">The origin story of React</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=x7cQ3mrcKaY" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] hover:opacity-95 transition-opacity" style="background-image:url(/images/home/videos/rethinking.jpg)"></a><a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Rethinking Best Practices</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Pete Hunt (2013)</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=KVZ-P-ZI6W4" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] hover:opacity-95 transition-opacity" style="background-image:url(/images/home/videos/rn.jpg)"></a><a href="https://www.youtube.com/watch?v=KVZ-P-ZI6W4" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Introducing React Native</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Tom Occhino (2015)</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=V-QO-KO90iQ" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] hover:opacity-95 transition-opacity" style="background-image:url(/images/home/videos/hooks.jpg)"></a><a href="https://www.youtube.com/watch?v=V-QO-KO90iQ" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Introducing React Hooks</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Sophie Alpert and Dan Abramov (2018)</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=TQQPAU21ZUw" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] hover:opacity-95 transition-opacity" style="background-image:url(/images/home/videos/rsc.jpg)"></a><a href="https://www.youtube.com/watch?v=TQQPAU21ZUw" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Introducing Server Components</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Dan Abramov and Lauren Tan (2020)</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div></div></section></div></div></div></div></div></div><div class="absolute z-10 inset-0 pointer-events-none transition-opacity transform-gpu opacity-0"></div></div></div></div></div></div><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">You don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.</p><div class="flex justify-start w-full lg:justify-center"><a class="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark" href="/learn/add-react-to-an-existing-project"><svg class="me-2.5 text-primary dark:text-primary-dark" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><g clip-path="url(#clip0_8_9064)"><path d="M44.7854 22.1142C45.4008 20.5759 44.6525 18.83 43.1142 18.2146C41.5758 17.5993 39.8299 18.3475 39.2146 19.8859L27.2146 49.8859C26.5992 51.4242 27.3475 53.1702 28.8858 53.7855C30.4242 54.4008 32.1701 53.6526 32.7854 52.1142L44.7854 22.1142Z" fill="currentColor"></path><path d="M9.87868 38.1214C8.70711 36.9498 8.70711 35.0503 9.87868 33.8787L18.8787 24.8787C20.0503 23.7072 21.9497 23.7072 23.1213 24.8787C24.2929 26.0503 24.2929 27.9498 23.1213 29.1214L16.2426 36.0001L23.1213 42.8787C24.2929 44.0503 24.2929 45.9498 23.1213 47.1214C21.9497 48.293 20.0503 48.293 18.8787 47.1214L9.87868 38.1214Z" fill="currentColor"></path><path d="M62.1213 33.8787L53.1213 24.8787C51.9497 23.7072 50.0503 23.7072 48.8787 24.8787C47.7071 26.0503 47.7071 27.9498 48.8787 29.1214L55.7574 36.0001L48.8787 42.8787C47.7071 44.0503 47.7071 45.9498 48.8787 47.1214C50.0503 48.293 51.9497 48.293 53.1213 47.1214L62.1213 38.1214C63.2929 36.9498 63.2929 35.0503 62.1213 33.8787Z" fill="currentColor"></path></g><defs><clipPath id="clip0_8_9064"><rect width="72" height="72" fill="white"></rect></clipPath></defs></svg>Add React to your page<svg class="text-primary dark:text-primary-dark rtl:rotate-180" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><path class="transition-transform ease-in-out translate-x-[-8px] group-hover:translate-x-[8px]" fill-rule="evenodd" clip-rule="evenodd" d="M40.0001 19.0245C41.0912 17.7776 42.9864 17.6513 44.2334 18.7423L58.9758 33.768C59.6268 34.3377 60.0002 35.1607 60.0002 36.0257C60.0002 36.8908 59.6268 37.7138 58.9758 38.2835L44.2335 53.3078C42.9865 54.3988 41.0913 54.2725 40.0002 53.0256C38.9092 51.7786 39.0355 49.8835 40.2824 48.7924L52.4445 36.0257L40.2823 23.2578C39.0354 22.1667 38.9091 20.2714 40.0001 19.0245Z" fill="currentColor"></path><path class="opacity-0 ease-in-out transition-opacity group-hover:opacity-100" d="M60 36.0273C60 37.6842 58.6569 39.0273 57 39.0273H15C13.3431 39.0273 12 37.6842 12 36.0273C12 34.3704 13.3431 33.0273 15 33.0273H57C58.6569 33.0273 60 34.3704 60 36.0273Z" fill="currentColor"></path></svg></a></div></div></div></div><div class="mx-auto flex flex-col w-full bg-gradient-right dark:bg-gradient-right-dark border-t border-primary/5 dark:border-primary-dark/5" style="contain:content"><div class="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center"><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Go full-stack <br class="hidden lg:inline"/>with a framework</h2><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like <a href="https://nextjs.org" target="_blank" rel="noopener" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">Next.js</a> or<!-- --> <a href="https://remix.run" target="_blank" rel="noopener" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">Remix</a>.</p></div><div class="max-w-7xl mx-auto flex flex-col w-full"><div class="lg:ps-10 lg:pe-5 w-full"><div class="mt-12 mb-2 lg:my-16 max-w-7xl mx-auto flex flex-col w-full lg:rounded-2xl lg:bg-card lg:dark:bg-card-dark"><div class="flex-col gap-0 lg:gap-5 lg:rounded-2xl lg:bg-gray-10 lg:dark:bg-gray-70 shadow-inner-border dark:shadow-inner-border-dark lg:flex-row flex grow w-full mx-auto items-center bg-cover bg-center lg:bg-right ltr:lg:bg-[length:60%_100%] bg-no-repeat bg-meta-gradient dark:bg-meta-gradient-dark"><div class="lg:-m-5 h-full shadow-nav dark:shadow-nav-dark lg:rounded-2xl bg-wash dark:bg-gray-95 w-full flex grow flex-col"><div class="w-full bg-card dark:bg-wash-dark lg:rounded-t-2xl border-b border-black/5 dark:border-white/5"><h3 class="text-sm my-1 mx-5 text-tertiary dark:text-tertiary-dark select-none text-start">confs/[slug].js</h3></div><!--$--><div dir="ltr" class="sandpack sandpack--codeblock rounded-2xl h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg shadow-none rounded-2xl overflow-hidden w-full flex bg-transparent" style="contain:content"><div class="sp-wrapper"><div class="sp-stack"><div class="sp-code-editor"><pre class="sp-cm sp-pristine sp-javascript flex align-start"><code class="sp-pre-placeholder grow-[2]"><div class="cm-line "><span class="sp-syntax-keyword">import</span> <span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-plain">db</span> <span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-keyword">from</span> <span class="sp-syntax-string">'./database.js'</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><span class="sp-syntax-keyword">import</span> <span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-plain">Suspense</span> <span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-keyword">from</span> <span class="sp-syntax-string">'react'</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><br/></div><div class="cm-line "><span class="sp-syntax-keyword">async</span> <span class="sp-syntax-keyword">function</span> <span class="sp-syntax-definition">ConferencePage</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-property">slug</span> <span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">)</span> <span class="sp-syntax-punctuation">{</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">const</span> <span class="sp-syntax-plain">conf</span> = <span class="sp-syntax-keyword">await</span> <span class="sp-syntax-plain">db</span>.<span class="sp-syntax-property">Confs</span>.<span class="sp-syntax-property">find</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-property">slug</span> <span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">return</span> <span class="sp-syntax-punctuation">(</span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">ConferenceLayout</span> <span class="sp-syntax-property">conf</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">conf</span><span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">Suspense</span> <span class="sp-syntax-property">fallback</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">TalksLoading</span> <span class="sp-syntax-punctuation">/></span><span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">Talks</span> <span class="sp-syntax-property">confId</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">conf</span>.<span class="sp-syntax-property">id</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-punctuation">/></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"></</span><span class="sp-syntax-definition">Suspense</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation"></</span><span class="sp-syntax-definition">ConferenceLayout</span><span class="sp-syntax-punctuation">></span><br/></div><div class="cm-line "> <span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><span class="sp-syntax-punctuation">}</span><br/></div><div class="cm-line "><br/></div><div class="cm-line "><span class="sp-syntax-keyword">async</span> <span class="sp-syntax-keyword">function</span> <span class="sp-syntax-definition">Talks</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-property">confId</span> <span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">)</span> <span class="sp-syntax-punctuation">{</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">const</span> <span class="sp-syntax-plain">talks</span> = <span class="sp-syntax-keyword">await</span> <span class="sp-syntax-plain">db</span>.<span class="sp-syntax-property">Talks</span>.<span class="sp-syntax-property">findAll</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-punctuation">{</span> <span class="sp-syntax-property">confId</span> <span class="sp-syntax-punctuation">}</span><span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">const</span> <span class="sp-syntax-plain">videos</span> = <span class="sp-syntax-plain">talks</span>.<span class="sp-syntax-property">map</span><span class="sp-syntax-punctuation">(</span><span class="sp-syntax-plain">talk</span> <span class="sp-syntax-punctuation">=></span> <span class="sp-syntax-plain">talk</span>.<span class="sp-syntax-property">video</span><span class="sp-syntax-punctuation">)</span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "> <span class="sp-syntax-keyword">return</span> <span class="sp-syntax-punctuation"><</span><span class="sp-syntax-definition">SearchableVideoList</span> <span class="sp-syntax-property">videos</span>=<span class="sp-syntax-punctuation">{</span><span class="sp-syntax-plain">videos</span><span class="sp-syntax-punctuation">}</span> <span class="sp-syntax-punctuation">/></span><span class="sp-syntax-punctuation">;</span><br/></div><div class="cm-line "><span class="sp-syntax-punctuation">}</span></div></code></pre></div></div></div></div><!--/$--></div><div class="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center"><div class="mx-auto max-w-3xl shadow-nav dark:shadow-nav-dark relative overflow-hidden w-full dark:border-opacity-10 rounded-2xl"><div class="w-full h-14 rounded-t-2xl shadow-outer-border backdrop-filter overflow-hidden backdrop-blur-lg backdrop-saturate-200 bg-white bg-opacity-90 z-10 absolute top-0 px-3 gap-2 flex flex-row items-center"><div class="select-none h-8 relative bg-gray-30/20 text-sm text-tertiary text-center rounded-full w-full flex-row flex space-between items-center"><div class="h-4 w-6"></div><div class="w-full leading-snug flex flex-row items-center justify-center"><svg class="text-tertiary me-1 opacity-60" width="12" height="12" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 4C17.0294 4 13 8.0294 13 13V16H12.3103C10.5296 16 8.8601 16.8343 8.2855 18.5198C7.6489 20.387 7 23.4148 7 28C7 32.5852 7.6489 35.613 8.2855 37.4802C8.8601 39.1657 10.5296 40 12.3102 40H31.6897C33.4704 40 35.1399 39.1657 35.7145 37.4802C36.3511 35.613 37 32.5852 37 28C37 23.4148 36.3511 20.387 35.7145 18.5198C35.1399 16.8343 33.4704 16 31.6897 16H31V13C31 8.0294 26.9706 4 22 4ZM25 16V13C25 11.3431 23.6569 10 22 10C20.3431 10 19 11.3431 19 13V16H25Z" fill="currentColor"></path></svg><span class="text-gray-30">example.com<!-- -->/</span>confs/react-conf-2021</div><div class="relative rounded-full flex justify-center items-center "><button aria-label="Reload" class="z-10 flex items-center p-1.5 rounded-full cursor-pointer justify-center bg-[#ebecef] hover:bg-[#d3d7de]"><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-tertiary text-lg"><path d="M13.8982 5.20844C12.4626 4.88688 10.9686 4.93769 9.55821 5.35604L11.8524 3.06184C11.8989 3.0154 11.9357 2.96028 11.9608 2.89961C11.986 2.83894 11.9989 2.77391 11.9989 2.70824C11.9989 2.64256 11.986 2.57754 11.9608 2.51686C11.9357 2.45619 11.8989 2.40107 11.8524 2.35464L11.1456 1.64784C11.0992 1.60139 11.0441 1.56455 10.9834 1.53942C10.9227 1.51428 10.8577 1.50134 10.792 1.50134C10.7263 1.50134 10.6613 1.51428 10.6006 1.53942C10.54 1.56455 10.4848 1.60139 10.4384 1.64784L6.14571 5.94054C6.00654 6.07969 5.89615 6.2449 5.82083 6.42673C5.74551 6.60855 5.70675 6.80343 5.70675 7.00024C5.70675 7.19704 5.74551 7.39192 5.82083 7.57374C5.89615 7.75557 6.00654 7.92078 6.14571 8.05994L10.4387 12.3529C10.5325 12.4465 10.6595 12.4991 10.792 12.4991C10.9245 12.4991 11.0516 12.4465 11.1453 12.3529L11.8527 11.6455C11.9463 11.5518 11.9989 11.4247 11.9989 11.2922C11.9989 11.1598 11.9463 11.0327 11.8527 10.9389L8.77481 7.86104C9.99795 7.16236 11.415 6.8801 12.8125 7.05678C14.21 7.23347 15.5122 7.85953 16.523 8.84064C17.5338 9.82176 18.1983 11.1048 18.4165 12.4964C18.6347 13.888 18.3947 15.3129 17.7328 16.5562C17.0708 17.7996 16.0227 18.7942 14.7463 19.3902C13.47 19.9861 12.0345 20.1511 10.6563 19.8603C9.27798 19.5695 8.03152 18.8387 7.10469 17.778C6.17786 16.7172 5.62086 15.384 5.51761 13.9791C5.51156 13.8512 5.45689 13.7303 5.36477 13.6413C5.27265 13.5522 5.15001 13.5017 5.02191 13.5H4.02081C3.95297 13.4996 3.88574 13.5129 3.8232 13.5392C3.76065 13.5655 3.70408 13.6042 3.6569 13.6529C3.60972 13.7017 3.57291 13.7595 3.54869 13.8228C3.52448 13.8862 3.51336 13.9538 3.51601 14.0216C3.61349 15.5965 4.1473 17.1132 5.0577 18.4019C5.9681 19.6906 7.21917 20.7006 8.6709 21.3188C10.1226 21.937 11.7178 22.139 13.2778 21.9022C14.8378 21.6654 16.3011 20.9992 17.504 19.978C18.7069 18.9569 19.6019 17.6212 20.0889 16.1203C20.5759 14.6195 20.6356 13.0128 20.2614 11.4799C19.8872 9.94705 19.0938 8.54858 17.97 7.44098C16.8462 6.33339 15.4363 5.56037 13.8982 5.20844V5.20844Z" fill="currentColor"></path></svg></button></div></div></div><div class="h-full flex flex-1"><div class="max-w-3xl rounded-2xl mx-auto text-secondary leading-normal bg-white overflow-hidden w-full overflow-y-auto shadow-none" style="height:35rem"><div class="p-0" style="content-visibility:auto;margin-top:56px"><!--$--><div><div class="transition-opacity delay-100 opacity-100" data-hover="ConferenceLayout"><div class="h-40 overflow-hidden relative items-center flex"><div class="absolute inset-0 px-4 py-2 flex items-end bg-gradient-to-t from-black/40 via-black/0"><select aria-label="Event" class="appearance-none pe-8 ps-2 bg-transparent text-primary-dark text-2xl font-bold mb-0.5" style="background-size:4px 4px, 4px 4px;background-repeat:no-repeat;background-position:calc(100% - 20px) calc(1px + 50%),calc(100% - 16px) calc(1px + 50%);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)"><option class="bg-wash dark:bg-wash-dark text-primary dark:text-primary-dark" value="react-conf-2021" selected="">React Conf 2021</option><option class="bg-wash dark:bg-wash-dark text-primary dark:text-primary-dark" value="react-conf-2019">React Conf 2019</option></select></div><img src="/images/home/conf2021/cover.svg" width="500" height="263" alt="" class="w-full object-cover"/></div><div class="px-4 pb-4"><div data-hover="Suspense"><!--$--><div class="mt-3" data-hover="SearchableVideoList"><form class="mb-3 py-1" data-hover="SearchInput"><label for=":R6sqaq6:" class="sr-only">Search</label><div class="relative w-full"><div class="absolute inset-y-0 start-0 flex items-center ps-4 pointer-events-none"><svg width="1em" height="1em" viewBox="0 0 20 20" class="text-gray-30 w-4"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><input type="text" id=":R6sqaq6:" class="flex ps-11 py-4 h-10 w-full text-start bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-primary rounded-full align-middle text-base" placeholder="Search" value=""/></div></form><section class="relative" data-hover="VideoList"><h2 class="font-bold text-xl text-primary mb-4 leading-snug" data-hover="h2">19 Videos</h2><div class="flex flex-col gap-4"><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/andrew.jpg" alt=""/><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/lauren.jpg" alt=""/><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/juan.jpg" alt=""/><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/rick.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React 18 Keynote</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">The React Team</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/shruti.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React 18 for App Developers</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Shruti Kapoor</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/shaundai.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Streaming Server Rendering with Suspense</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Shaundai Person</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/aakansha.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">The First React Working Group</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Aakansha Doshi</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/brian.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React Developer Tooling</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Brian Vaughn</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/xuan.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React without memo</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Xuan Huang (黄玄)</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=7" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/rachel.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=7" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React Docs Keynote</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Rachel Nabors</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=-7odLW_hG7s&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=8" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/debbie.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=-7odLW_hG7s&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=8" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Things I Learnt from the New React Docs</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Debbie O'Brien</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=5X-WEQflCL0&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=9" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/sarah.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=5X-WEQflCL0&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=9" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Learning in the Browser</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Sarah Rainsberger</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=7cPWmID5XAk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=10" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/linton.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=7cPWmID5XAk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=10" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">The ROI of Designing with React</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Linton Ye</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=zL8cz2W0z34&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=11" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/delba.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=zL8cz2W0z34&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=11" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Interactive Playgrounds with React</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Delba de Oliveira</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=lhVGdErZuN4&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=12" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/robert.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=lhVGdErZuN4&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=12" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Re-introducing Relay</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Robert Balicki</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=9L4FFrvwJwY&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=13" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/eric.jpg" alt=""/><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/steven.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=9L4FFrvwJwY&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=13" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React Native Desktop</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Eric Rozell and Steven Moyes</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=NLj73vrc2I8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=14" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/roman.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=NLj73vrc2I8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=14" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">On-device Machine Learning for React Native</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Roman Rädle</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=oPfSC5bQPR8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=15" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/daishi.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=oPfSC5bQPR8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=15" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">React 18 for External Store Libraries</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Daishi Kato</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=dcm8fjBfro8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=16" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/diego.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=dcm8fjBfro8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=16" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Building Accessible Components with React 18</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Diego Haz</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=S4a0QlsH0pU&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=17" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/tafu.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=S4a0QlsH0pU&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=17" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Accessible Japanese Form Components with React</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Tafu Nakazaki</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=b3l4WxipFsE&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=18" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/lyle.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=b3l4WxipFsE&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=18" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">UI Tools for Artists</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Lyle Troxell</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div><div class="flex flex-row items-center gap-3" data-hover="Video"><a data-hover="Thumbnail" href="https://www.youtube.com/watch?v=HS6vIYkSNks&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=19" target="_blank" rel="noreferrer" aria-hidden="true" tabindex="-1" class="outline-link dark:outline-link outline-offset-2 aspect-video w-32 xs:w-36 select-none flex-col shadow-inner-border rounded-lg flex items-center overflow-hidden justify-center align-middle text-white/50 bg-cover bg-white bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-80 via-gray-95 to-gray-70 hover:opacity-95 transition-opacity"><div class="transition-opacity mt-2.5 -space-x-2 flex flex-row w-full justify-center"><img class="h-8 w-8 border-2 shadow-md border-gray-70 object-cover rounded-full" src="/images/home/conf2021/helen.jpg" alt=""/></div><div class="mt-1"><span class="inline-flex text-xs font-normal items-center text-primary-dark py-1 whitespace-nowrap outline-link px-1.5 rounded-lg"><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-xs me-1 w-4 h-4 text-brand text-brand-dark"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg>React Conf</span></div></a><a href="https://www.youtube.com/watch?v=HS6vIYkSNks&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=19" target="_blank" rel="noreferrer" class="outline-link dark:outline-link outline-offset-4 group flex flex-col flex-1 gap-0.5" data-hover="a"><h3 class="text-base leading-tight text-primary font-bold group-hover:underline" data-hover="h3">Hydrogen + React 18</h3><p class="text-tertiary text-sm leading-snug" data-hover="p">Helen Lin</p></a><button data-hover="LikeButton" class="outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50 text-tertiary" aria-label="Save"><svg class="absolute overflow-visible" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="text-red-50/50 origin-center transition-all ease-in-out" cx="12" cy="12" r="11.5" fill="transparent" stroke-width="0" stroke="currentColor"></circle></svg><svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m12 5.184-.808-.771-.004-.004C11.065 4.299 8.522 2.003 6 2.003c-3.736 0-6 2.558-6 6.677 0 4.47 5.471 9.848 10 13.079.602.43 1.187.82 1.74 1.167A.497.497 0 0 0 12 23v-.003c.09 0 .182-.026.26-.074C16.977 19.97 24 13.737 24 8.677 24 4.557 21.743 2 18 2c-2.569 0-5.166 2.387-5.192 2.413L12 5.184zm-.002 15.525c2.071-1.388 4.477-3.342 6.427-5.47C20.72 12.733 22 10.401 22 8.677c0-1.708-.466-2.855-1.087-3.55C20.316 4.459 19.392 4 18 4c-.726 0-1.63.364-2.5.9-.67.412-1.148.82-1.266.92-.03.025-.037.031-.019.014l-.013.013L12 7.949 9.832 5.88a10.08 10.08 0 0 0-1.33-.977C7.633 4.367 6.728 4.003 6 4.003c-1.388 0-2.312.459-2.91 1.128C2.466 5.826 2 6.974 2 8.68c0 1.726 1.28 4.058 3.575 6.563 1.948 2.127 4.352 4.078 6.423 5.466z" fill="currentColor"></path></svg></button></div></div></section></div><!--/$--></div></div></div></div><!--/$--></div></div></div></div><div class="absolute z-10 inset-0 pointer-events-none transition-opacity transform-gpu opacity-0"></div></div></div></div></div></div><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">React is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components.</p><div class="flex justify-start w-full lg:justify-center"><a class="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark" href="/learn/start-a-new-react-project"><svg class="me-2.5 text-primary dark:text-primary-dark" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><g clip-path="url(#clip0_10_21081)"><path fill-rule="evenodd" clip-rule="evenodd" d="M44.9136 29.0343C46.8321 26.9072 48 24.09 48 21C48 14.3726 42.6274 9 36 9C29.3726 9 24 14.3726 24 21C24 24.0904 25.1682 26.9079 27.0871 29.0351L21.0026 39.3787C20.0429 39.1315 19.0368 39 18 39C11.3726 39 6 44.3726 6 51C6 57.6274 11.3726 63 18 63C23.5915 63 28.2898 59.1757 29.6219 54H42.3781C43.7102 59.1757 48.4085 63 54 63C60.6274 63 66 57.6274 66 51C66 44.3726 60.6274 39 54 39C52.9614 39 51.9537 39.1319 50.9926 39.38L44.9136 29.0343ZM42 21C42 24.3137 39.3137 27 36 27C32.6863 27 30 24.3137 30 21C30 17.6863 32.6863 15 36 15C39.3137 15 42 17.6863 42 21ZM39.9033 32.3509C38.6796 32.7716 37.3665 33 36 33C34.6338 33 33.321 32.7717 32.0975 32.3512L26.2523 42.288C27.8635 43.8146 29.0514 45.7834 29.6219 48H42.3781C42.9482 45.785 44.1348 43.8175 45.7441 42.2913L39.9033 32.3509ZM54 57C50.6863 57 48 54.3137 48 51C48 47.6863 50.6863 45 54 45C57.3137 45 60 47.6863 60 51C60 54.3137 57.3137 57 54 57ZM24 51C24 47.6863 21.3137 45 18 45C14.6863 45 12 47.6863 12 51C12 54.3137 14.6863 57 18 57C21.3137 57 24 54.3137 24 51Z" fill="currentColor"></path></g><defs><clipPath id="clip0_10_21081"><rect width="72" height="72" fill="white"></rect></clipPath></defs></svg>Get started with a framework<svg class="text-primary dark:text-primary-dark rtl:rotate-180" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><path class="transition-transform ease-in-out translate-x-[-8px] group-hover:translate-x-[8px]" fill-rule="evenodd" clip-rule="evenodd" d="M40.0001 19.0245C41.0912 17.7776 42.9864 17.6513 44.2334 18.7423L58.9758 33.768C59.6268 34.3377 60.0002 35.1607 60.0002 36.0257C60.0002 36.8908 59.6268 37.7138 58.9758 38.2835L44.2335 53.3078C42.9865 54.3988 41.0913 54.2725 40.0002 53.0256C38.9092 51.7786 39.0355 49.8835 40.2824 48.7924L52.4445 36.0257L40.2823 23.2578C39.0354 22.1667 38.9091 20.2714 40.0001 19.0245Z" fill="currentColor"></path><path class="opacity-0 ease-in-out transition-opacity group-hover:opacity-100" d="M60 36.0273C60 37.6842 58.6569 39.0273 57 39.0273H15C13.3431 39.0273 12 37.6842 12 36.0273C12 34.3704 13.3431 33.0273 15 33.0273H57C58.6569 33.0273 60 34.3704 60 36.0273Z" fill="currentColor"></path></svg></a></div></div></div></div><div class="mx-auto flex flex-col w-full bg-gradient-left dark:bg-gradient-left-dark border-t border-primary/10 dark:border-primary-dark/10 " style="contain:content"><div class="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center"><div class="mx-auto flex flex-col w-full"><div class="mx-auto max-w-4xl lg:text-center items-center px-5 flex flex-col"><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Use the best from every platform</h2><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform’s unique strengths to let your interfaces feel just right on every platform.</p></div><div class="max-w-7xl mx-auto flex flex-col lg:flex-row mt-16 mb-20 lg:mb-28 px-5 gap-20 lg:gap-5"><div class="relative lg:w-6/12 flex"><div class="absolute -bottom-8 lg:-bottom-10 z-10 w-full"><div class="flex items-center justify-center gap-3"><svg class="w-16 h-16 lg:w-20 lg:h-20 rounded-2xl lg:rounded-3xl shadow-nav bg-wash" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#ee)"><path d="m60 81.99c12.15 0 22-9.8497 22-22 0-12.15-9.8497-22-22-22s-22 9.8498-22 22c0 12.15 9.8497 22 22 22z" fill="#fff"></path><path d="m60 38h38.099c-3.8606-6.6892-9.4144-12.244-16.103-16.106-6.6884-3.862-14.276-5.8948-21.999-5.8943-7.7232 5e-4 -15.31 2.0345-21.998 5.8973-6.6879 3.8629-12.241 9.4184-16.101 16.108l19.05 32.995 0.017-0.0044c-1.9378-3.3417-2.9604-7.1352-2.9648-10.998-0.0043-3.8629 1.0098-7.6586 2.9401-11.005 1.9303-3.346 4.7086-6.124 8.0548-8.0539 3.3463-1.93 7.1422-2.9437 11.005-2.9389z" fill="url(#cc)"></path><path d="m60 77.417c9.619 0 17.417-7.7977 17.417-17.417 0-9.6189-7.7977-17.417-17.417-17.417-9.6189 0-17.417 7.7977-17.417 17.417 0 9.619 7.7977 17.417 17.417 17.417z" fill="#1A73E8"></path><path d="m79.05 71.006-19.05 32.994c7.7233 1e-3 15.311-2.031 21.999-5.8925 6.6886-3.8614 12.243-9.4158 16.104-16.105 3.8607-6.6888 5.8927-14.276 5.8917-22-1e-3 -7.7232-2.036-15.31-5.8996-21.997h-38.099l-0.0045 0.017c3.8629-0.0074 7.6595 1.0036 11.007 2.9313 3.3476 1.9277 6.1278 4.7038 8.0604 8.0485s2.9492 7.1398 2.9474 11.003c-0.0017 3.8629-1.0219 7.657-2.9575 11z" fill="url(#bb)"></path><path d="m40.949 71.006-19.049-32.995c-3.8626 6.688-5.8963 14.275-5.8966 21.998s2.0328 15.31 5.8949 21.999 9.4171 12.242 16.106 16.102c6.6893 3.8603 14.277 5.8913 22 5.8893l19.049-32.994-0.0123-0.0124c-1.925 3.349-4.699 6.1314-8.0422 8.0666s-7.1375 2.9549-11 2.9562-7.6579-1.0158-11.002-2.9488c-3.3445-1.9329-6.1203-4.7134-8.0476-8.0612z" fill="url(#aa)"></path></g><defs><linearGradient id="cc" x1="21.898" x2="98.099" y1="43.5" y2="43.5" gradientUnits="userSpaceOnUse"><stop stop-color="#D93025" offset="0"></stop><stop stop-color="#EA4335" offset="1"></stop></linearGradient><linearGradient id="bb" x1="53.99" x2="92.09" y1="103.41" y2="37.42" gradientUnits="userSpaceOnUse"><stop stop-color="#FCC934" offset="0"></stop><stop stop-color="#FBBC04" offset="1"></stop></linearGradient><linearGradient id="aa" x1="64.763" x2="26.663" y1="101.25" y2="35.261" gradientUnits="userSpaceOnUse"><stop stop-color="#1E8E3E" offset="0"></stop><stop stop-color="#34A853" offset="1"></stop></linearGradient><clipPath id="ee"><rect transform="translate(16 16)" width="88" height="88" fill="#fff"></rect></clipPath></defs></svg><svg class="w-16 h-16 lg:w-20 lg:h-20 rounded-2xl lg:rounded-3xl shadow-nav bg-wash" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m101.3 42.856c-1.9371-4.6598-5.8655-9.691-8.9417-11.282 2.1941 4.2494 3.7168 8.8131 4.5137 13.529l0.0081 0.0748c-5.0393-12.564-13.585-17.63-20.564-28.66-0.3605-0.5624-0.7106-1.1313-1.05-1.7066-0.175-0.3005-0.3388-0.6074-0.491-0.92-0.2895-0.5606-0.5126-1.153-0.6647-1.7653 2e-4 -0.0282-0.01-0.0556-0.0287-0.0768s-0.0445-0.0348-0.0725-0.0382c-0.0275-0.0075-0.0565-0.0075-0.084 0-0.0057 0-0.0149 0.0104-0.0218 0.0127s-0.0219 0.0126-0.0322 0.0172l0.0172-0.0299c-11.195 6.555-14.994 18.69-15.343 24.76-4.4708 0.3074-8.7453 1.9549-12.266 4.7277-0.3673-0.3111-0.7512-0.6021-1.15-0.8717-1.0156-3.5547-1.0588-7.3168-0.1253-10.894-4.1114 1.9917-7.7645 4.8151-10.728 8.2915h-0.0207c-1.7664-2.239-1.6422-9.622-1.541-11.164-0.5225 0.21-1.0214 0.4749-1.4881 0.7901-1.5593 1.1129-3.0171 2.3617-4.3562 3.7317-1.5259 1.5472-2.9196 3.2193-4.1664 4.9991v0.0069-0.0081c-2.8656 4.0625-4.898 8.6523-5.98 13.504l-0.0598 0.2944c-0.1644 0.9247-0.3105 1.8525-0.4382 2.783 0 0.0333-0.0069 0.0644-0.0103 0.0977-0.3902 2.0279-0.6319 4.0815-0.7234 6.1445v0.23c0.0098 11.16 4.2056 21.91 11.758 30.126 7.5526 8.216 17.912 13.3 29.032 14.247s22.19-2.312 31.023-9.132c8.8332-6.8204 14.786-16.706 16.683-27.704 0.075-0.575 0.136-1.1443 0.203-1.725 0.918-7.5875-0.076-15.284-2.891-22.389zm-51.371 34.889c0.2082 0.1001 0.4037 0.2082 0.6176 0.3036l0.031 0.0196c-0.2162-0.1035-0.4324-0.2112-0.6486-0.3232zm46.954-32.556v-0.0425l0.0081 0.0471-0.0081-0.0046z" fill="url(#l)"></path><path d="m101.3 42.856c-1.9371-4.6598-5.8655-9.691-8.9417-11.282 2.1941 4.2494 3.7168 8.8131 4.5137 13.529v0.0426l0.0081 0.0471c3.4349 9.8307 2.9384 20.609-1.3869 30.082-5.1083 10.961-17.473 22.195-36.828 21.649-20.913-0.5923-39.33-16.11-42.773-36.436-0.6268-3.205 0-4.83 0.3151-7.4347-0.4299 2.0233-0.6697 4.0823-0.7165 6.1502v0.23c0.0098 11.16 4.2056 21.91 11.758 30.126 7.5526 8.216 17.912 13.3 29.032 14.247s22.19-2.312 31.023-9.1321c8.8332-6.8204 14.786-16.706 16.683-27.704 0.075-0.575 0.136-1.1443 0.203-1.725 0.918-7.5875-0.076-15.284-2.891-22.389z" fill="url(#i)"></path><path d="m101.3 42.856c-1.9371-4.6598-5.8655-9.691-8.9417-11.282 2.1941 4.2494 3.7168 8.8131 4.5137 13.529v0.0426l0.0081 0.0471c3.4349 9.8307 2.9384 20.609-1.3869 30.082-5.1083 10.961-17.473 22.195-36.828 21.649-20.913-0.5923-39.33-16.11-42.773-36.436-0.6268-3.205 0-4.83 0.3151-7.4347-0.4299 2.0233-0.6697 4.0823-0.7165 6.1502v0.23c0.0098 11.16 4.2056 21.91 11.758 30.126 7.5526 8.216 17.912 13.3 29.032 14.247s22.19-2.312 31.023-9.1321c8.8332-6.8204 14.786-16.706 16.683-27.704 0.075-0.575 0.136-1.1443 0.203-1.725 0.918-7.5875-0.076-15.284-2.891-22.389z" fill="url(#h)"></path><path d="m79.644 48.095c0.0966 0.0678 0.1863 0.1357 0.2772 0.2035-1.1196-1.9852-2.5133-3.8028-4.14-5.3992-13.853-13.855-3.6306-30.042-1.9067-30.864l0.0172-0.0253c-11.195 6.555-14.994 18.69-15.343 24.76 0.5198-0.0357 1.035-0.0794 1.5663-0.0794 3.9723 0.0073 7.8719 1.0664 11.302 3.0696 3.4303 2.0031 6.2689 4.879 8.2272 8.335z" fill="url(#g)"></path><path d="m60.144 50.862c-0.0736 1.1086-3.9905 4.9323-5.3602 4.9323-12.674 0-14.732 7.6671-14.732 7.6671 0.5612 6.4561 5.06 11.774 10.498 14.587 0.2484 0.1288 0.5002 0.2449 0.7521 0.3588 0.4362 0.1932 0.8724 0.3718 1.3087 0.5359 1.8664 0.6605 3.8212 1.0377 5.7994 1.1189 22.215 1.0419 26.518-26.565 10.487-34.576 3.7818-0.492 7.6116 0.4378 10.747 2.6094-1.9583-3.4561-4.7969-6.3319-8.2272-8.3351-3.4302-2.0031-7.3298-3.0622-11.302-3.0695-0.529 0-1.0465 0.0437-1.5663 0.0794-4.4708 0.3073-8.7453 1.9548-12.266 4.7276 0.6797 0.575 1.4467 1.3432 3.0625 2.936 3.0245 2.9796 10.781 6.0662 10.798 6.4285z" fill="url(#f)"></path><path d="m60.144 50.862c-0.0736 1.1086-3.9905 4.9323-5.3602 4.9323-12.674 0-14.732 7.6671-14.732 7.6671 0.5612 6.4561 5.06 11.774 10.498 14.587 0.2484 0.1288 0.5002 0.2449 0.7521 0.3588 0.4362 0.1932 0.8724 0.3718 1.3087 0.5359 1.8664 0.6605 3.8212 1.0377 5.7994 1.1189 22.215 1.0419 26.518-26.565 10.487-34.576 3.7818-0.492 7.6116 0.4378 10.747 2.6094-1.9583-3.4561-4.7969-6.3319-8.2272-8.3351-3.4302-2.0031-7.3298-3.0622-11.302-3.0695-0.529 0-1.0465 0.0437-1.5663 0.0794-4.4708 0.3073-8.7453 1.9548-12.266 4.7276 0.6797 0.575 1.4467 1.3432 3.0625 2.936 3.0245 2.9796 10.781 6.0662 10.798 6.4285z" fill="url(#e)"></path><path d="m44.205 40.015c0.3611 0.23 0.6589 0.4301 0.92 0.6107-1.0156-3.5547-1.0589-7.3168-0.1254-10.894-4.1113 1.9917-7.7644 4.8151-10.728 8.2915 0.2173-0.0057 6.6826-0.1219 9.9337 1.9918z" fill="url(#d)"></path><path d="m15.902 60.487c3.4397 20.325 21.86 35.843 42.773 36.436 19.354 0.5474 31.719-10.688 36.828-21.649 4.3254-9.4729 4.8223-20.251 1.3869-30.082v-0.0425c0-0.0334-0.0069-0.0529 0-0.0426l0.0081 0.0748c1.5812 10.324-3.6697 20.325-11.878 27.088l-0.0253 0.0575c-15.994 13.026-31.301 7.8591-34.399 5.75-0.2162-0.1035-0.4324-0.2112-0.6486-0.3231-9.3253-4.4574-13.178-12.954-12.352-20.24-2.2137 0.0326-4.3893-0.5774-6.2632-1.7561-1.874-1.1788-3.3659-2.8757-4.295-4.8852 2.4479-1.4997 5.2391-2.3475 8.1075-2.4626 2.8685-0.1152 5.7186 0.5062 8.2789 1.8048 5.2783 2.3962 11.285 2.6323 16.735 0.6578-0.0173-0.3622-7.774-3.45-10.798-6.4285-1.6158-1.5927-2.3828-2.3598-3.0625-2.9359-0.3673-0.3112-0.7512-0.6022-1.15-0.8717-0.2645-0.1806-0.5623-0.3761-0.92-0.6107-3.251-2.1137-9.7163-1.9975-9.9302-1.9918h-0.0207c-1.7664-2.239-1.6422-9.622-1.541-11.164-0.5226 0.21-1.0214 0.4749-1.4881 0.7901-1.5594 1.1129-3.0171 2.3617-4.3562 3.7317-1.5314 1.5428-2.9309 3.2111-4.1837 4.9876v0.0069-0.0081c-2.8656 4.0624-4.898 8.6523-5.98 13.504-0.0219 0.0908-1.6054 7.0138-0.8246 10.604z" fill="url(#c)"></path><path d="m75.784 42.9c1.6271 1.5982 3.0208 3.4178 4.14 5.405 0.2449 0.1852 0.4738 0.3692 0.6681 0.5474 10.105 9.315 4.8105 22.482 4.416 23.42 8.2087-6.7632 13.455-16.765 11.878-27.088-5.0416-12.57-13.587-17.635-20.567-28.666-0.3605-0.5624-0.7106-1.1313-1.05-1.7066-0.175-0.3005-0.3388-0.6074-0.491-0.92-0.2895-0.5606-0.5126-1.153-0.6647-1.7653 2e-4 -0.0282-0.01-0.0556-0.0287-0.0768s-0.0445-0.0348-0.0725-0.0382c-0.0275-0.0075-0.0565-0.0075-0.084 0-0.0057 0-0.0149 0.0104-0.0218 0.0127s-0.0219 0.0126-0.0322 0.0172c-1.7239 0.8177-11.946 17.004 1.909 30.859z" fill="url(#b)"></path><path d="m80.585 48.846c-0.2142-0.1927-0.4371-0.3754-0.6682-0.5474-0.0908-0.0679-0.1805-0.1357-0.2771-0.2036-3.1351-2.1715-6.965-3.1014-10.747-2.6093 16.031 8.0155 11.73 35.618-10.487 34.576-1.9781-0.0812-3.933-0.4584-5.7994-1.119-0.4362-0.1633-0.8725-0.3419-1.3087-0.5359-0.2519-0.115-0.5037-0.23-0.7521-0.3588l0.031 0.0196c3.0981 2.1148 18.4 7.2818 34.399-5.75l0.0253-0.0575c0.399-0.9315 5.6936-14.102-4.416-23.414z" fill="url(#a)"></path><path d="m40.052 63.462s2.0573-7.667 14.732-7.667c1.3696 0 5.29-3.8238 5.3601-4.9324-5.4501 1.9745-11.456 1.7384-16.735-0.6578-2.5602-1.2986-5.4104-1.9199-8.2788-1.8048-2.8684 0.1152-5.6596 0.963-8.1075 2.4626 0.9291 2.0095 2.421 3.7064 4.2949 4.8852 1.874 1.1788 4.0496 1.7888 6.2632 1.7561-0.8257 7.2875 3.0268 15.784 12.352 20.24 0.2081 0.1 0.4036 0.2081 0.6175 0.3036-5.4429-2.8118-9.9371-8.1294-10.498-14.586z" fill="url(#k)"></path><path d="m101.3 42.856c-1.9371-4.6598-5.8655-9.691-8.9417-11.282 2.1941 4.2494 3.7168 8.8131 4.5137 13.529l0.0081 0.0748c-5.0393-12.564-13.585-17.63-20.564-28.66-0.3605-0.5624-0.7106-1.1313-1.05-1.7066-0.175-0.3005-0.3388-0.6074-0.491-0.92-0.2895-0.5606-0.5126-1.153-0.6647-1.7653 2e-4 -0.0282-0.01-0.0556-0.0287-0.0768s-0.0445-0.0348-0.0725-0.0382c-0.0275-0.0075-0.0565-0.0075-0.084 0-0.0057 0-0.0149 0.0104-0.0218 0.0127s-0.0219 0.0126-0.0322 0.0172l0.0172-0.0299c-11.195 6.555-14.994 18.69-15.343 24.76 0.5198-0.0356 1.035-0.0793 1.5663-0.0793 3.9723 0.0073 7.8719 1.0663 11.302 3.0695 3.4303 2.0032 6.2689 4.879 8.2272 8.335-3.1351-2.1715-6.9649-3.1014-10.747-2.6093 16.031 8.0155 11.73 35.618-10.487 34.576-1.9782-0.0813-3.933-0.4584-5.7994-1.119-0.4363-0.1633-0.8725-0.3419-1.3087-0.5359-0.2519-0.115-0.5037-0.23-0.7521-0.3588l0.031 0.0196c-0.2162-0.1035-0.4324-0.2112-0.6486-0.3232 0.2082 0.1001 0.4037 0.2082 0.6176 0.3036-5.443-2.8129-9.9372-8.1305-10.498-14.587 0 0 2.0574-7.667 14.732-7.667 1.3697 0 5.29-3.8238 5.3602-4.9324-0.0173-0.3622-7.774-3.45-10.798-6.4285-1.6158-1.5927-2.3828-2.3598-3.0625-2.9359-0.3673-0.3111-0.7512-0.6021-1.15-0.8717-1.0156-3.5547-1.0588-7.3168-0.1253-10.894-4.1114 1.9917-7.7645 4.8151-10.728 8.2915h-0.0207c-1.7664-2.239-1.6422-9.622-1.541-11.164-0.5225 0.21-1.0214 0.4749-1.4881 0.7901-1.5593 1.1129-3.0171 2.3617-4.3562 3.7317-1.5259 1.5472-2.9196 3.2193-4.1664 4.9991v0.0069-0.0081c-2.8656 4.0625-4.898 8.6523-5.98 13.504l-0.0598 0.2944c-0.084 0.3921-0.46 2.3839-0.5141 2.8117v0c-0.3439 2.0561-0.5636 4.131-0.6578 6.2135v0.23c0.0098 11.16 4.2056 21.91 11.758 30.126 7.5526 8.216 17.912 13.3 29.032 14.247s22.19-2.312 31.023-9.132c8.8332-6.8204 14.786-16.706 16.683-27.704 0.075-0.575 0.136-1.1443 0.203-1.725 0.918-7.5875-0.076-15.284-2.891-22.389z" fill="url(#j)"></path><defs><linearGradient id="l" x1="95.404" x2="21.414" y1="26.252" y2="97.638" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F" offset=".048"></stop><stop stop-color="#FFE847" offset=".111"></stop><stop stop-color="#FFC830" offset=".225"></stop><stop stop-color="#FF980E" offset=".368"></stop><stop stop-color="#FF8B16" offset=".401"></stop><stop stop-color="#FF672A" offset=".462"></stop><stop stop-color="#FF3647" offset=".534"></stop><stop stop-color="#E31587" offset=".705"></stop></linearGradient><radialGradient id="i" cx="0" cy="0" r="1" gradientTransform="translate(91.985 22.211) scale(92.916 92.917)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFBD4F" offset=".129"></stop><stop stop-color="#FFAC31" offset=".186"></stop><stop stop-color="#FF9D17" offset=".247"></stop><stop stop-color="#FF980E" offset=".283"></stop><stop stop-color="#FF563B" offset=".403"></stop><stop stop-color="#FF3750" offset=".467"></stop><stop stop-color="#F5156C" offset=".71"></stop><stop stop-color="#EB0878" offset=".782"></stop><stop stop-color="#E50080" offset=".86"></stop></radialGradient><radialGradient id="h" cx="0" cy="0" r="1" gradientTransform="translate(58.032 60.198) scale(92.916 92.917)" gradientUnits="userSpaceOnUse"><stop stop-color="#960E18" offset=".3"></stop><stop stop-color="#B11927" stop-opacity=".74" offset=".351"></stop><stop stop-color="#DB293D" stop-opacity=".343" offset=".435"></stop><stop stop-color="#F5334B" stop-opacity=".094" offset=".497"></stop><stop stop-color="#FF3750" stop-opacity="0" offset=".53"></stop></radialGradient><radialGradient id="g" cx="0" cy="0" r="1" gradientTransform="translate(69.234 1.1246) scale(67.314)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F" offset=".132"></stop><stop stop-color="#FFDC3E" offset=".252"></stop><stop stop-color="#FF9D12" offset=".506"></stop><stop stop-color="#FF980E" offset=".526"></stop></radialGradient><radialGradient id="f" cx="0" cy="0" r="1" gradientTransform="translate(47.755 84.468) scale(44.242 44.242)" gradientUnits="userSpaceOnUse"><stop stop-color="#3A8EE6" offset=".353"></stop><stop stop-color="#5C79F0" offset=".472"></stop><stop stop-color="#9059FF" offset=".669"></stop><stop stop-color="#C139E6" offset="1"></stop></radialGradient><radialGradient id="e" cx="0" cy="0" r="1" gradientTransform="translate(63.11 52.583) rotate(-13.592) scale(23.457 27.462)" gradientUnits="userSpaceOnUse"><stop stop-color="#9059FF" stop-opacity="0" offset=".206"></stop><stop stop-color="#8C4FF3" stop-opacity=".064" offset=".278"></stop><stop stop-color="#7716A8" stop-opacity=".45" offset=".747"></stop><stop stop-color="#6E008B" stop-opacity=".6" offset=".975"></stop></radialGradient><radialGradient id="d" cx="0" cy="0" r="1" gradientTransform="translate(56.859 18.409) scale(31.827)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE226" offset="0"></stop><stop stop-color="#FFDB27" offset=".121"></stop><stop stop-color="#FFC82A" offset=".295"></stop><stop stop-color="#FFA930" offset=".502"></stop><stop stop-color="#FF7E37" offset=".732"></stop><stop stop-color="#FF7139" offset=".792"></stop></radialGradient><radialGradient id="c" cx="0" cy="0" r="1" gradientTransform="translate(81.876 -1.7782) scale(135.79)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F" offset=".113"></stop><stop stop-color="#FF980E" offset=".456"></stop><stop stop-color="#FF5634" offset=".622"></stop><stop stop-color="#FF3647" offset=".716"></stop><stop stop-color="#E31587" offset=".904"></stop></radialGradient><radialGradient id="b" cx="0" cy="0" r="1" gradientTransform="translate(70.431 5.7724) rotate(83.976) scale(99.526 65.318)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F" offset="0"></stop><stop stop-color="#FFE847" offset=".06"></stop><stop stop-color="#FFC830" offset=".168"></stop><stop stop-color="#FF980E" offset=".304"></stop><stop stop-color="#FF8B16" offset=".356"></stop><stop stop-color="#FF672A" offset=".455"></stop><stop stop-color="#FF3647" offset=".57"></stop><stop stop-color="#E31587" offset=".737"></stop></radialGradient><radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="translate(56.11 30.198) scale(84.778)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F" offset=".137"></stop><stop stop-color="#FF980E" offset=".48"></stop><stop stop-color="#FF5634" offset=".592"></stop><stop stop-color="#FF3647" offset=".655"></stop><stop stop-color="#E31587" offset=".904"></stop></radialGradient><radialGradient id="k" cx="0" cy="0" r="1" gradientTransform="translate(78.488 35.16) scale(92.789)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F" offset=".094"></stop><stop stop-color="#FFE141" offset=".231"></stop><stop stop-color="#FFAF1E" offset=".509"></stop><stop stop-color="#FF980E" offset=".626"></stop></radialGradient><linearGradient id="j" x1="94.515" x2="31.557" y1="25.87" y2="88.827" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF44F" stop-opacity=".8" offset=".167"></stop><stop stop-color="#FFF44F" stop-opacity=".634" offset=".266"></stop><stop stop-color="#FFF44F" stop-opacity=".217" offset=".489"></stop><stop stop-color="#FFF44F" stop-opacity="0" offset=".6"></stop></linearGradient></defs></svg><svg class="w-16 h-16 lg:w-20 lg:h-20 rounded-2xl lg:rounded-3xl shadow-nav bg-wash" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m60 104c24.3 0 44-19.7 44-44s-19.7-44-44-44-44 19.7-44 44 19.7 44 44 44z" fill="url(#aaa)"></path><path d="m60.002 100.1v-6.756" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m60.002 26.624v-6.7563" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m53.018 99.512 1.1732-6.6536m11.585-65.704 1.1732-6.6536" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m46.278 97.689 2.3108-6.3488m22.819-62.694 2.3108-6.3488" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m39.91 94.765 3.3781-5.851m33.359-57.779 3.3782-5.8511" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m34.252 90.737 4.3428-5.1756m42.885-51.109 4.3429-5.1756" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m29.227 85.774 5.1756-4.3428m51.109-42.885 5.1756-4.3428" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m25.244 80.033 5.8511-3.3781m57.779-33.359 5.8511-3.3781" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m22.238 73.725 6.3488-2.3108m62.694-22.819 6.3488-2.3108" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m20.469 67.009 6.6535-1.1733m65.704-11.585 6.6536-1.1732" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m19.9 60.002h6.7563m66.718 0h6.7558" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m20.488 53.062 6.6536 1.1732m65.704 11.585 6.6536 1.1732" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m22.309 46.295 6.3488 2.3108m62.694 22.819 6.3488 2.3108" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m25.229 39.99 5.8511 3.3781m57.779 33.359 5.851 3.3781" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m29.24 34.19 5.1756 4.3428m51.109 42.885 5.1756 4.3429" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m34.166 29.281 4.3428 5.1756m42.885 51.109 4.3428 5.1755" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m39.918 25.256 3.3781 5.8511m33.359 57.779 3.3781 5.8511" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m46.28 22.3 2.3108 6.3487m22.819 62.694 2.3107 6.3488" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m52.992 20.554 1.1733 6.6536m11.585 65.704 1.1732 6.6536" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m56.484 99.953 0.2945-3.3653m6.4037-73.194 0.2944-3.3653" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m49.629 98.788 0.8743-3.263m19.016-70.97 0.8743-3.263" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m43.024 96.33 1.4276-3.0616m31.052-66.59 1.4277-3.0616" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m36.978 92.875 1.9376-2.7672m42.143-60.186 1.9376-2.7672" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m31.658 88.369 2.3887-2.3886m51.954-51.954 2.3887-2.3886" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m27.141 83.051 2.7672-1.9376m60.186-42.143 2.7672-1.9376" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m23.653 76.966 3.0616-1.4277m66.59-31.052 3.0617-1.4276" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m21.24 70.41 3.263-0.8744m70.97-19.016 3.263-0.8743" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m20 63.507 3.3653-0.2944m73.194-6.4037 3.3652-0.2944" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m20.03 56.514 3.3653 0.2944m73.194 6.4037 3.3653 0.2944" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m21.19 49.657 3.2631 0.8743m70.97 19.016 3.263 0.8744" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m23.624 43.042 3.0616 1.4276m66.59 31.052 3.0616 1.4277" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m27.127 37.029 2.7671 1.9376m60.186 42.143 2.7672 1.9376" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m31.654 31.661 2.3887 2.3887m51.954 51.954 2.3887 2.3887" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m36.935 27.134 1.9376 2.7672m42.143 60.186 1.9376 2.7672" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m43.044 23.676 1.4276 3.0616m31.052 66.59 1.4277 3.0616" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m49.59 21.297 0.8743 3.263m19.016 70.97 0.8743 3.263" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m56.449 20.063 0.2944 3.3653m6.4037 73.194 0.2944 3.3652" stroke="#fff" stroke-linecap="square" stroke-width=".84706"></path><path d="m91.222 33.87-34.71 22.211-27.785 30.15 34.879-21.704 27.616-30.656z" clip-rule="evenodd" fill="#fff" fill-rule="evenodd"></path><path d="m91.222 33.87-34.71 22.211 7.094 8.4453 27.616-30.656z" clip-rule="evenodd" fill="#FF3B30" fill-rule="evenodd"></path><defs><linearGradient id="aaa" x1="59.999" x2="59.999" y1="104.01" y2="15.992" gradientUnits="userSpaceOnUse"><stop stop-color="#1E6FF1" offset="0"></stop><stop stop-color="#28CEFB" offset="1"></stop></linearGradient></defs></svg></div></div><div class="mx-auto max-w-3xl shadow-nav dark:shadow-nav-dark relative overflow-hidden w-full dark:border-opacity-10 rounded-2xl"><div class="w-full h-14 rounded-t-2xl shadow-outer-border backdrop-filter overflow-hidden backdrop-blur-lg backdrop-saturate-200 bg-white bg-opacity-90 z-10 absolute top-0 px-3 gap-2 flex flex-row items-center"><div class="select-none h-8 relative bg-gray-30/20 text-sm text-tertiary text-center rounded-full w-full flex-row flex space-between items-center"><div class="w-full leading-snug flex flex-row items-center justify-center"><svg class="text-tertiary me-1 opacity-60" width="12" height="12" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 4C17.0294 4 13 8.0294 13 13V16H12.3103C10.5296 16 8.8601 16.8343 8.2855 18.5198C7.6489 20.387 7 23.4148 7 28C7 32.5852 7.6489 35.613 8.2855 37.4802C8.8601 39.1657 10.5296 40 12.3102 40H31.6897C33.4704 40 35.1399 39.1657 35.7145 37.4802C36.3511 35.613 37 32.5852 37 28C37 23.4148 36.3511 20.387 35.7145 18.5198C35.1399 16.8343 33.4704 16 31.6897 16H31V13C31 8.0294 26.9706 4 22 4ZM25 16V13C25 11.3431 23.6569 10 22 10C20.3431 10 19 11.3431 19 13V16H25Z" fill="currentColor"></path></svg><span class="text-gray-30">example.com</span></div></div></div><div class="h-full flex flex-1"><div class="relative overflow-hidden"><div class="absolute inset-0 bg-gradient-right"></div><div class="bg-wash relative h-14 w-full"></div><div class="relative flex items-start justify-center flex-col flex-1 pb-16 pt-5 gap-3 px-5 lg:px-10 lg:pt-8"><h4 class="leading-tight text-primary font-semibold text-3xl lg:text-4xl">Stay true to the web</h4><p class="lg:text-xl leading-normal text-secondary">People expect web app pages to load fast. On the server, React lets you start streaming HTML while you’re still fetching data, progressively filling in the remaining content before any JavaScript code loads. On the client, React can use standard web APIs to keep your UI responsive even in the middle of rendering.</p></div></div></div></div></div><div class="relative lg:w-6/12 flex"><div class="absolute -bottom-8 lg:-bottom-10 z-10 w-full"><div class="flex items-center justify-center gap-5"><svg class="w-16 h-16 lg:w-20 lg:h-20 rounded-2xl lg:rounded-3xl shadow-nav bg-wash" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M89.9356 44.0658C89.4752 44.4231 81.3451 49.0042 81.3451 59.1906C81.3451 70.9729 91.6903 75.1411 91.9999 75.2443C91.9523 75.4984 90.3564 80.9529 86.5455 86.5105C83.1474 91.4013 79.5984 96.2841 74.1995 96.2841C68.8006 96.2841 67.4112 93.148 61.1787 93.148C55.105 93.148 52.9454 96.3873 48.007 96.3873C43.0686 96.3873 39.6229 91.8618 35.6611 86.3041C31.072 79.7778 27.3643 69.639 27.3643 60.0163C27.3643 44.5819 37.3998 36.3963 47.2766 36.3963C52.5246 36.3963 56.8993 39.842 60.1942 39.842C63.3303 39.842 68.221 36.1898 74.1916 36.1898C76.4543 36.1898 84.5844 36.3963 89.9356 44.0658ZM71.3572 29.6556C73.8264 26.7259 75.573 22.6609 75.573 18.5958C75.573 18.0321 75.5254 17.4605 75.4222 17C71.4048 17.1509 66.6252 19.6756 63.7432 23.0182C61.4804 25.5906 59.3685 29.6556 59.3685 33.7762C59.3685 34.3955 59.4717 35.0148 59.5193 35.2133C59.7734 35.2609 60.1863 35.3165 60.5991 35.3165C64.2036 35.3165 68.7371 32.9029 71.3572 29.6556Z" fill="black"></path></svg><svg class="w-16 h-16 lg:w-20 lg:h-20 rounded-2xl lg:rounded-3xl shadow-nav bg-wash" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1378 84.6843C19.1119 84.6843 16 87.1151 16 91.363C16 95.259 18.7358 98 22.1378 98C24.9457 98 26.1963 96.1105 26.1963 96.1105V96.9286C26.2071 97.1436 26.2971 97.3469 26.4489 97.4991C26.6008 97.6513 26.8036 97.7416 27.018 97.7523H29.0473V84.9626H26.1963V86.5864C26.1963 86.5864 24.9346 84.6843 22.1378 84.6843ZM22.6458 87.3002C25.1359 87.3002 26.4434 89.4958 26.4434 91.3686C26.4434 93.4557 24.8916 95.4371 22.65 95.4371C20.7775 95.4371 18.9023 93.9163 18.9023 91.3422C18.9009 89.0102 20.5152 87.2932 22.6458 87.2932V87.3002Z" fill="black"></path><path d="M33.01 97.7636C32.9013 97.7667 32.793 97.7475 32.692 97.7072C32.5909 97.6669 32.4991 97.6063 32.4222 97.5292C32.3452 97.4521 32.2848 97.3601 32.2446 97.2587C32.2044 97.1574 32.1852 97.0489 32.1883 96.9399V84.9628H35.0407V86.5462C35.6861 85.5722 36.9478 84.6692 38.8855 84.6692C42.0529 84.6692 43.7435 87.1988 43.7435 89.5655V97.7636H41.7573C41.5268 97.7625 41.3061 97.6703 41.1431 97.5069C40.9801 97.3435 40.8881 97.1223 40.887 96.8912V90.2C40.887 88.8893 40.0861 87.2962 38.2317 87.2962C36.2316 87.2962 35.0393 89.1912 35.0393 90.975V97.7636H33.01Z" fill="black"></path><path d="M52.0506 84.6843C49.0248 84.6843 45.9128 87.1151 45.9128 91.363C45.9128 95.259 48.6486 98 52.0506 98C54.8641 98 56.1133 96.1105 56.1133 96.1105V96.9286C56.1241 97.1436 56.2141 97.3469 56.3659 97.4991C56.5178 97.6513 56.7206 97.7416 56.9351 97.7523H58.9643V78.5747H56.1133V86.5919C56.1133 86.5919 54.8475 84.6843 52.0506 84.6843ZM52.5586 87.3002C55.0487 87.3002 56.3562 89.4958 56.3562 91.3686C56.3562 93.4557 54.8045 95.4371 52.5628 95.4371C50.6904 95.4371 48.8152 93.9163 48.8152 91.3422C48.8138 89.0102 50.4225 87.2932 52.5586 87.2932V87.3002Z" fill="black"></path><path d="M62.9232 97.7634C62.8145 97.7665 62.7064 97.7473 62.6054 97.707C62.5044 97.6667 62.4126 97.6061 62.3358 97.5289C62.259 97.4518 62.1987 97.3598 62.1587 97.2584C62.1186 97.1571 62.0996 97.0487 62.1029 96.9397V84.9626H64.9539V87.0942C65.4438 85.9004 66.5029 84.8179 68.385 84.8179C68.7253 84.8211 69.0648 84.8532 69.3997 84.9139V87.8692C68.9654 87.7128 68.5078 87.631 68.0464 87.6271C66.0462 87.6271 64.9539 89.5222 64.9539 91.3073V97.7634H62.9232Z" fill="black"></path><path d="M86.6997 97.7635C86.591 97.7668 86.4826 97.7477 86.3815 97.7075C86.2803 97.6673 86.1884 97.6067 86.1114 97.5295C86.0345 97.4524 85.9741 97.3603 85.9339 97.2589C85.8938 97.1574 85.8748 97.0489 85.878 96.9398V84.9626H88.7318V97.7635H86.6997Z" fill="black"></path><path d="M97.089 84.6843C94.0632 84.6843 90.9526 87.1151 90.9526 91.363C90.9526 95.259 93.6884 98 97.089 98C99.897 98 101.149 96.1105 101.149 96.1105V96.9286C101.16 97.1436 101.25 97.3469 101.402 97.4991C101.553 97.6513 101.756 97.7416 101.971 97.7523H104V78.5747H101.149V86.5919C101.149 86.5919 99.8873 84.6843 97.089 84.6843ZM97.5971 87.3002C100.095 87.3002 101.395 89.4958 101.395 91.3686C101.395 93.4557 99.8429 95.4371 97.6026 95.4371C95.7288 95.4371 93.855 93.9163 93.855 91.3422C93.8536 89.0102 95.4678 87.2932 97.5971 87.2932V87.3002Z" fill="black"></path><path d="M87.2813 82.2103C88.3231 82.2103 89.1676 81.3637 89.1676 80.3194C89.1676 79.2751 88.3231 78.4285 87.2813 78.4285C86.2395 78.4285 85.395 79.2751 85.395 80.3194C85.395 81.3637 86.2395 82.2103 87.2813 82.2103Z" fill="black"></path><path d="M76.9184 84.6731C73.7496 84.6731 70.2712 87.0496 70.2712 91.3407C70.2712 95.2547 73.236 97.9999 76.9143 97.9999C81.4475 97.9999 83.66 94.3475 83.66 91.3643C83.66 87.705 80.8104 84.6731 76.9212 84.6731H76.9184ZM76.9282 87.3432C79.1198 87.3432 80.7549 89.1131 80.7549 91.3476C80.7549 93.6226 79.0199 95.3827 76.9351 95.3827C75.0002 95.3827 73.1194 93.8035 73.1194 91.3922C73.1194 88.9405 74.9086 87.3488 76.9282 87.3488V87.3432Z" fill="black"></path><path d="M81.4769 35.895L88.7723 23.2263C88.9677 22.8863 89.021 22.4826 88.9207 22.1034C88.8203 21.7241 88.5743 21.4 88.2365 21.2018C88.0696 21.1035 87.8848 21.0394 87.693 21.0133C87.5011 20.9871 87.306 20.9993 87.119 21.0493C86.9319 21.0992 86.7566 21.1859 86.6031 21.3043C86.4497 21.4227 86.3213 21.5704 86.2253 21.7389L78.8355 34.5704C73.196 31.988 66.85 30.5493 60.0237 30.5493C53.1975 30.5493 46.8501 31.988 41.212 34.5704L33.8208 21.7389C33.7265 21.565 33.5983 21.4118 33.4439 21.2884C33.2895 21.165 33.1119 21.0739 32.9217 21.0205C32.7316 20.9671 32.5326 20.9524 32.3367 20.9774C32.1408 21.0025 31.9519 21.0666 31.7811 21.1661C31.6104 21.2656 31.4613 21.3984 31.3427 21.5567C31.224 21.715 31.1383 21.8955 31.0904 22.0876C31.0426 22.2797 31.0337 22.4794 31.0643 22.675C31.0948 22.8706 31.1642 23.0581 31.2683 23.2263L38.5623 35.895C25.9827 42.7268 17.4645 55.4915 16.0557 70.4337H104C102.587 55.4915 94.0661 42.7268 81.4769 35.895ZM39.8365 58.053C39.1072 58.0533 38.3943 57.8368 37.7878 57.4308C37.1814 57.0248 36.7086 56.4477 36.4294 55.7723C36.1502 55.097 36.0771 54.3538 36.2193 53.6368C36.3615 52.9199 36.7126 52.2612 37.2283 51.7443C37.744 51.2274 38.401 50.8754 39.1162 50.7329C39.8315 50.5903 40.5728 50.6636 41.2465 50.9435C41.9202 51.2234 42.496 51.6973 42.9009 52.3052C43.3059 52.9131 43.5219 53.6278 43.5217 54.3589C43.5209 55.3389 43.132 56.2785 42.4405 56.9712C41.749 57.6639 40.8113 58.053 39.8337 58.053H39.8365ZM80.2068 58.053C79.4776 58.053 78.7648 57.8363 78.1585 57.4301C77.5523 57.024 77.0798 56.4467 76.8008 55.7714C76.5218 55.096 76.4488 54.3529 76.5912 53.636C76.7336 52.9191 77.0848 52.2606 77.6005 51.7438C78.1162 51.2271 78.7733 50.8752 79.4885 50.7328C80.2037 50.5903 80.945 50.6637 81.6186 50.9436C82.2922 51.2235 82.8679 51.6974 83.2728 52.3053C83.6777 52.9133 83.8937 53.6279 83.8934 54.3589C83.8932 54.8443 83.7976 55.3249 83.6121 55.7733C83.4266 56.2217 83.1548 56.629 82.8122 56.9721C82.4695 57.3152 82.0629 57.5872 81.6154 57.7727C81.1679 57.9581 80.6883 58.0534 80.2041 58.053H80.2068Z" fill="#32DE84"></path></svg></div></div><figure class="mx-auto max-w-3xl h-auto"><div class="p-2.5 bg-gray-95 dark:bg-black rounded-2xl shadow-nav dark:shadow-nav-dark"><div class="bg-gradient-right dark:bg-gradient-right-dark px-3 sm:px-3 pb-12 lg:pb-20 rounded-lg overflow-hidden"><div class="select-none w-full h-14 flex flex-row items-start pt-3 -mb-2.5 justify-between text-tertiary dark:text-tertiary-dark"><span class="uppercase tracking-wide leading-none font-bold text-sm text-tertiary dark:text-tertiary-dark"><span>8:46 PM</span></span><div class="gap-2 flex -mt-0.5"><svg width="16" height="20" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M34.852 6.22836C35.973 5.76401 37.2634 6.02068 38.1214 6.87868L53.1214 21.8787C53.7485 22.5058 54.066 23.3782 53.9886 24.2617C53.9113 25.1451 53.447 25.9491 52.7205 26.4577L39.0886 36.0003L52.7204 45.5423C53.447 46.0508 53.9113 46.8548 53.9886 47.7383C54.066 48.6218 53.7485 49.4942 53.1214 50.1213L38.1214 65.1213C37.2634 65.9793 35.973 66.236 34.852 65.7716C33.731 65.3073 33.0001 64.2134 33.0001 63V40.2624L22.7205 47.4583C21.3632 48.4085 19.4926 48.0784 18.5424 46.721C17.5922 45.3637 17.9223 43.4931 19.2797 42.543L28.6258 36.0004L19.2797 29.4583C17.9224 28.5082 17.5922 26.6376 18.5424 25.2803C19.4925 23.9229 21.3631 23.5928 22.7204 24.5429L33.0001 31.7384V9C33.0001 7.78661 33.731 6.6927 34.852 6.22836ZM39.0001 43.2622L46.3503 48.4072L39.0001 55.7574V43.2622ZM39.0001 28.7382V16.2426L46.3503 23.5929L39.0001 28.7382Z" fill="currentColor"></path></svg><svg width="16" height="20" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 27C9.82864 27 10.5788 26.664 11.1217 26.1209C11.2116 26.0355 11.3037 25.9526 11.397 25.871C11.625 25.6714 11.9885 25.3677 12.4871 24.9938C13.4847 24.2455 15.0197 23.219 17.0912 22.1833C21.2243 20.1167 27.5179 18 35.9996 18C44.4813 18 50.7748 20.1167 54.9079 22.1833C56.9794 23.219 58.5144 24.2455 59.5121 24.9938C59.6056 25.0639 60.8802 26.1233 60.8802 26.1233C61.423 26.6652 62.1724 27 63 27C64.6569 27 66 25.6569 66 24C66 22.8871 65.3475 22.0506 64.5532 21.3556C64.2188 21.0629 63.7385 20.6635 63.1121 20.1938C61.8597 19.2545 60.0197 18.031 57.5912 16.8167C52.7243 14.3833 45.5179 12 35.9996 12C26.4813 12 19.2748 14.3833 14.4079 16.8167C11.9794 18.031 10.1394 19.2545 8.88706 20.1938C8.26066 20.6635 7.78035 21.0629 7.44593 21.3556C7.2605 21.5178 7.07794 21.6834 6.9016 21.8555C6.33334 22.417 6 23.1999 6 24C6 25.6569 7.34315 27 9 27Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M26.1116 48.631C24.2868 50.4378 21 49.0661 21 46.5C21 45.6707 21.3365 44.92 21.8804 44.3769C21.9856 44.2702 22.0973 44.1695 22.209 44.0697C22.3915 43.9065 22.6466 43.6885 22.9713 43.4344C23.6195 42.9271 24.5536 42.2694 25.7509 41.6163C28.1445 40.3107 31.6365 39 35.9999 39C40.3634 39 43.8554 40.3107 46.249 41.6163C47.4463 42.2694 48.3804 42.9271 49.0286 43.4344C50.0234 44.213 51 45.134 51 46.5C51 48.1569 49.6569 49.5 48 49.5C47.1724 49.5 46.4231 49.1649 45.8803 48.623C45.7028 48.4617 45.5197 48.3073 45.3307 48.1594C44.9007 47.8229 44.2411 47.3556 43.3759 46.8837C41.6445 45.9393 39.1365 45 35.9999 45C32.8634 45 30.3554 45.9393 28.624 46.8837C27.7588 47.3556 27.0992 47.8229 26.6692 48.1594C26.3479 48.4109 26.155 48.5899 26.1116 48.631Z" fill="currentColor"></path><path d="M36 63C39.3137 63 42 60.3137 42 57C42 53.6863 39.3137 51 36 51C32.6863 51 30 53.6863 30 57C30 60.3137 32.6863 63 36 63Z" fill="currentColor"></path><path d="M15 39C13.3431 39 12 37.6569 12 36C12 34.3892 13.3933 33.3427 14.5534 32.4503C15.5841 31.6574 17.0871 30.6231 19.04 29.5952C22.9506 27.537 28.6773 25.5 35.9997 25.5C43.3222 25.5 49.0488 27.537 52.9595 29.5952C54.9123 30.6231 56.4154 31.6574 57.4461 32.4503C57.9619 32.847 58.361 33.1846 58.6407 33.4324C59.4024 34.1073 60 34.9345 60 36C60 37.6569 58.6569 39 57 39C56.1737 39 55.4255 38.6662 54.8829 38.1258C54.5371 37.7978 54.1653 37.4964 53.7878 37.206C52.9903 36.5926 51.7746 35.7519 50.165 34.9048C46.9506 33.213 42.1773 31.5 35.9997 31.5C29.8222 31.5 25.0488 33.213 21.8345 34.9048C20.2248 35.7519 19.0091 36.5926 18.2117 37.206C17.6144 37.6654 17.2549 37.9951 17.1459 38.098C16.5581 38.6591 15.8222 39 15 39Z" fill="currentColor"></path></svg><svg width="20" height="20" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9533 26.0038C13.224 24.7829 14.3285 24 15.579 24H50.421C51.6715 24 52.776 24.7829 53.0467 26.0038C53.4754 27.937 54 31.2691 54 36C54 40.7309 53.4754 44.063 53.0467 45.9962C52.776 47.2171 51.6715 48 50.421 48H15.579C14.3285 48 13.224 47.2171 12.9533 45.9962C12.5246 44.063 12 40.7309 12 36C12 31.2691 12.5246 27.937 12.9533 26.0038Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7887 15C8.77039 15 5.23956 17.668 4.48986 21.6158C3.74326 25.5473 3 30.7737 3 36C3 41.2263 3.74326 46.4527 4.48986 50.3842C5.23956 54.332 8.77039 57 12.7887 57H53.2113C57.2296 57 60.7604 54.332 61.5101 50.3842C61.8155 48.7765 62.1202 46.9522 62.3738 45H63.7918C64.5731 45 65.3283 44.8443 66 44.5491C67.2821 43.9857 68.2596 42.9142 68.5322 41.448C68.7927 40.0466 69 38.2306 69 36C69 33.7694 68.7927 31.9534 68.5322 30.552C68.2596 29.0858 67.2821 28.0143 66 27.4509C65.3283 27.1557 64.5731 27 63.7918 27H62.3738C62.1202 25.0478 61.8155 23.2235 61.5101 21.6158C60.7604 17.668 57.2296 15 53.2113 15H12.7887ZM53.2113 21H12.7887C11.3764 21 10.5466 21.8816 10.3845 22.7352C9.67563 26.4681 9 31.29 9 36C9 40.71 9.67563 45.5319 10.3845 49.2648C10.5466 50.1184 11.3764 51 12.7887 51H53.2113C54.6236 51 55.4534 50.1184 55.6155 49.2648C56.3244 45.5319 57 40.71 57 36C57 31.29 56.3244 26.4681 55.6155 22.7352C55.4534 21.8816 54.6236 21 53.2113 21Z" fill="currentColor"></path></svg></div></div><div class="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8"><h4 class="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">Go truly native</h4><p class="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">People expect native apps to look and feel like their platform.<!-- --> <a href="https://reactnative.dev" target="_blank" rel="noopener" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">React Native</a> <!-- -->and<!-- --> <a href="https://github.com/expo/expo" target="_blank" rel="noopener" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">Expo</a> <!-- -->let you build apps in React for Android, iOS, and more. They look and feel native because their UIs<!-- --> <i>are</i> truly native. It’s not a web view—your React components render real Android and iOS views provided by the platform.</p></div></div></div></figure></div></div><div class="px-5 lg:px-0 max-w-4xl mx-auto lg:text-center text-secondary dark:text-secondary-dark"><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">With React, you can be a web <i>and</i> a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.</p><div class="flex justify-start w-full lg:justify-center"><a href="https://reactnative.dev/" target="_blank" rel="noopener" class="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark"><svg class="me-2.5 text-primary dark:text-primary-dark" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><g clip-path="url(#clip0_8_10998)"><path d="M54.0001 15H18.0001C16.3432 15 15.0001 16.3431 15.0001 18V42H33V48H12.9567L9.10021 57L24.0006 57C24.0006 55.3431 25.3437 54 27.0006 54H33V57.473C33 59.3786 33.3699 61.2582 34.0652 63H9.10021C4.79287 63 1.88869 58.596 3.5852 54.6368L9.0001 42V18C9.0001 13.0294 13.0295 9 18.0001 9H54.0001C58.9707 9 63.0001 13.0294 63.0001 18V25.4411C62.0602 25.0753 61.0589 24.8052 60.0021 24.6458C59.0567 24.5032 58.0429 24.3681 57.0001 24.2587V18C57.0001 16.3431 55.6569 15 54.0001 15Z" fill="currentColor"></path><path d="M48 42C48 40.3431 49.3431 39 51 39H54C55.6569 39 57 40.3431 57 42C57 43.6569 55.6569 45 54 45H51C49.3431 45 48 43.6569 48 42Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M45.8929 30.5787C41.8093 31.1947 39 34.8257 39 38.9556V57.473C39 61.6028 41.8093 65.2339 45.8929 65.8499C48.0416 66.174 50.3981 66.4286 52.5 66.4286C54.6019 66.4286 56.9584 66.174 59.1071 65.8499C63.1907 65.2339 66 61.6028 66 57.473V38.9556C66 34.8258 63.1907 31.1947 59.1071 30.5787C56.9584 30.2545 54.6019 30 52.5 30C50.3981 30 48.0416 30.2545 45.8929 30.5787ZM60 57.473V38.9556C60 37.4615 59.0438 36.637 58.2121 36.5116C56.2014 36.2082 54.1763 36 52.5 36C50.8237 36 48.7986 36.2082 46.7879 36.5116C45.9562 36.637 45 37.4615 45 38.9556V57.473C45 58.9671 45.9562 59.7916 46.7879 59.917C48.7986 60.2203 50.8237 60.4286 52.5 60.4286C54.1763 60.4286 56.2014 60.2203 58.2121 59.917C59.0438 59.7916 60 58.9671 60 57.473Z" fill="currentColor"></path></g><defs><clipPath id="clip0_8_10998"><rect width="72" height="72" fill="white"></rect></clipPath></defs></svg>Build for native platforms<svg class="text-primary dark:text-primary-dark rtl:rotate-180" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><path class="transition-transform ease-in-out translate-x-[-8px] group-hover:translate-x-[8px]" fill-rule="evenodd" clip-rule="evenodd" d="M40.0001 19.0245C41.0912 17.7776 42.9864 17.6513 44.2334 18.7423L58.9758 33.768C59.6268 34.3377 60.0002 35.1607 60.0002 36.0257C60.0002 36.8908 59.6268 37.7138 58.9758 38.2835L44.2335 53.3078C42.9865 54.3988 41.0913 54.2725 40.0002 53.0256C38.9092 51.7786 39.0355 49.8835 40.2824 48.7924L52.4445 36.0257L40.2823 23.2578C39.0354 22.1667 38.9091 20.2714 40.0001 19.0245Z" fill="currentColor"></path><path class="opacity-0 ease-in-out transition-opacity group-hover:opacity-100" d="M60 36.0273C60 37.6842 58.6569 39.0273 57 39.0273H15C13.3431 39.0273 12 37.6842 12 36.0273C12 34.3704 13.3431 33.0273 15 33.0273H57C58.6569 33.0273 60 34.3704 60 36.0273Z" fill="currentColor"></path></svg></a></div></div></div></div></div><div class="mx-auto flex flex-col w-full bg-gradient-right dark:bg-gradient-right-dark border-t border-primary/5 dark:border-primary-dark/5" style="contain:content"><div class="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center"><div class="max-w-7xl mx-auto flex flex-col lg:flex-row px-5"><div class="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5"><div class="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10"><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Upgrade when the future is ready</h2><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.</p><div class="order-last pt-5"><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.</p><div class="hidden lg:flex justify-start w-full"><a class="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark" href="/blog"><svg class="me-2.5 text-primary dark:text-primary-dark" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7101 56.3758C13.0724 56.7251 13.6324 57 14.3887 57H57.6113C58.3676 57 58.9276 56.7251 59.2899 56.3758C59.6438 56.0346 59.8987 55.5407 59.9086 54.864C59.9354 53.022 59.9591 50.7633 59.9756 48H12.0244C12.0409 50.7633 12.0645 53.022 12.0914 54.864C12.1013 55.5407 12.3562 56.0346 12.7101 56.3758ZM12.0024 42H59.9976C59.9992 41.0437 60 40.0444 60 39C60 29.5762 59.9327 22.5857 59.8589 17.7547C59.8359 16.2516 58.6168 15 56.9938 15L15.0062 15C13.3832 15 12.1641 16.2516 12.1411 17.7547C12.0673 22.5857 12 29.5762 12 39C12 40.0444 12.0008 41.0437 12.0024 42ZM65.8582 17.6631C65.7843 12.8227 61.8348 9 56.9938 9H15.0062C10.1652 9 6.21572 12.8227 6.1418 17.6631C6.06753 22.5266 6 29.5477 6 39C6 46.2639 6.03988 51.3741 6.09205 54.9515C6.15893 59.537 9.80278 63 14.3887 63H57.6113C62.1972 63 65.8411 59.537 65.9079 54.9515C65.9601 51.3741 66 46.2639 66 39C66 29.5477 65.9325 22.5266 65.8582 17.6631ZM39 21C37.3431 21 36 22.3431 36 24C36 25.6569 37.3431 27 39 27H51C52.6569 27 54 25.6569 54 24C54 22.3431 52.6569 21 51 21H39ZM36 33C36 31.3431 37.3431 30 39 30H51C52.6569 30 54 31.3431 54 33C54 34.6569 52.6569 36 51 36H39C37.3431 36 36 34.6569 36 33ZM24 33C27.3137 33 30 30.3137 30 27C30 23.6863 27.3137 21 24 21C20.6863 21 18 23.6863 18 27C18 30.3137 20.6863 33 24 33Z" fill="currentColor"></path></svg>Read more React news<svg class="text-primary dark:text-primary-dark rtl:rotate-180" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><path class="transition-transform ease-in-out translate-x-[-8px] group-hover:translate-x-[8px]" fill-rule="evenodd" clip-rule="evenodd" d="M40.0001 19.0245C41.0912 17.7776 42.9864 17.6513 44.2334 18.7423L58.9758 33.768C59.6268 34.3377 60.0002 35.1607 60.0002 36.0257C60.0002 36.8908 59.6268 37.7138 58.9758 38.2835L44.2335 53.3078C42.9865 54.3988 41.0913 54.2725 40.0002 53.0256C38.9092 51.7786 39.0355 49.8835 40.2824 48.7924L52.4445 36.0257L40.2823 23.2578C39.0354 22.1667 38.9091 20.2714 40.0001 19.0245Z" fill="currentColor"></path><path class="opacity-0 ease-in-out transition-opacity group-hover:opacity-100" d="M60 36.0273C60 37.6842 58.6569 39.0273 57 39.0273H15C13.3431 39.0273 12 37.6842 12 36.0273C12 34.3704 13.3431 33.0273 15 33.0273H57C58.6569 33.0273 60 34.3704 60 36.0273Z" fill="currentColor"></path></svg></a></div></div></div><div class="w-full lg:w-6/12"><p class="uppercase tracking-wide font-bold text-sm text-tertiary dark:text-tertiary-dark flex flex-row gap-2 items-center mt-5 lg:-mt-2 w-full"><svg class="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none" fill-rule="evenodd" transform="translate(-446 -398)"><path fill="currentColor" fill-rule="nonzero" d="M95.8838835,240.366117 C95.3957281,239.877961 94.6042719,239.877961 94.1161165,240.366117 C93.6279612,240.854272 93.6279612,241.645728 94.1161165,242.133883 L98.6161165,246.633883 C99.1042719,247.122039 99.8957281,247.122039 100.383883,246.633883 L104.883883,242.133883 C105.372039,241.645728 105.372039,240.854272 104.883883,240.366117 C104.395728,239.877961 103.604272,239.877961 103.116117,240.366117 L99.5,243.982233 L95.8838835,240.366117 Z" transform="translate(356.5 164.5)"></path><polygon points="446 418 466 418 466 398 446 398"></polygon></g></svg>Latest React News</p><div class="flex-col sm:flex-row flex-wrap flex gap-5 text-start my-5"><div class="flex-1 min-w-[40%] text-start"><a class="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark" href="/blog/2024/10/21/react-compiler-beta-release"><div class="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed"><div class="flex flex-row gap-3 w-full"><h2 class="font-semibold flex-1 text-2xl lg:text-3xl hover:underline leading-snug mb-4">React Compiler Beta Release and Roadmap</h2></div><div><div class="flex flex-row justify-start gap-2 items-center text-base text-tertiary dark:text-tertiary-dark"><svg class="w-6 h-6 text-tertiary dark:text-tertiary-dark" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7101 56.3758C13.0724 56.7251 13.6324 57 14.3887 57H57.6113C58.3676 57 58.9276 56.7251 59.2899 56.3758C59.6438 56.0346 59.8987 55.5407 59.9086 54.864C59.9354 53.022 59.9591 50.7633 59.9756 48H12.0244C12.0409 50.7633 12.0645 53.022 12.0914 54.864C12.1013 55.5407 12.3562 56.0346 12.7101 56.3758ZM12.0024 42H59.9976C59.9992 41.0437 60 40.0444 60 39C60 29.5762 59.9327 22.5857 59.8589 17.7547C59.8359 16.2516 58.6168 15 56.9938 15L15.0062 15C13.3832 15 12.1641 16.2516 12.1411 17.7547C12.0673 22.5857 12 29.5762 12 39C12 40.0444 12.0008 41.0437 12.0024 42ZM65.8582 17.6631C65.7843 12.8227 61.8348 9 56.9938 9H15.0062C10.1652 9 6.21572 12.8227 6.1418 17.6631C6.06753 22.5266 6 29.5477 6 39C6 46.2639 6.03988 51.3741 6.09205 54.9515C6.15893 59.537 9.80278 63 14.3887 63H57.6113C62.1972 63 65.8411 59.537 65.9079 54.9515C65.9601 51.3741 66 46.2639 66 39C66 29.5477 65.9325 22.5266 65.8582 17.6631ZM39 21C37.3431 21 36 22.3431 36 24C36 25.6569 37.3431 27 39 27H51C52.6569 27 54 25.6569 54 24C54 22.3431 52.6569 21 51 21H39ZM36 33C36 31.3431 37.3431 30 39 30H51C52.6569 30 54 31.3431 54 33C54 34.6569 52.6569 36 51 36H39C37.3431 36 36 34.6569 36 33ZM24 33C27.3137 33 30 30.3137 30 27C30 23.6863 27.3137 21 24 21C20.6863 21 18 23.6863 18 27C18 30.3137 20.6863 33 24 33Z" fill="currentColor"></path></svg>October 21, 2024</div><span class="text-base text-secondary dark:text-secondary-dark"></span></div></div></a></div><div class="flex-1 min-w-[40%] text-start"><a class="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark" href="/blog/2024/05/22/react-conf-2024-recap"><div class="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed"><div class="flex flex-row gap-3 w-full"><h2 class="font-semibold flex-1 text-2xl lg:text-3xl hover:underline leading-snug mb-4">React Conf 2024 Recap</h2></div><div><div class="flex flex-row justify-start gap-2 items-center text-base text-tertiary dark:text-tertiary-dark"><svg class="w-6 h-6 text-tertiary dark:text-tertiary-dark" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7101 56.3758C13.0724 56.7251 13.6324 57 14.3887 57H57.6113C58.3676 57 58.9276 56.7251 59.2899 56.3758C59.6438 56.0346 59.8987 55.5407 59.9086 54.864C59.9354 53.022 59.9591 50.7633 59.9756 48H12.0244C12.0409 50.7633 12.0645 53.022 12.0914 54.864C12.1013 55.5407 12.3562 56.0346 12.7101 56.3758ZM12.0024 42H59.9976C59.9992 41.0437 60 40.0444 60 39C60 29.5762 59.9327 22.5857 59.8589 17.7547C59.8359 16.2516 58.6168 15 56.9938 15L15.0062 15C13.3832 15 12.1641 16.2516 12.1411 17.7547C12.0673 22.5857 12 29.5762 12 39C12 40.0444 12.0008 41.0437 12.0024 42ZM65.8582 17.6631C65.7843 12.8227 61.8348 9 56.9938 9H15.0062C10.1652 9 6.21572 12.8227 6.1418 17.6631C6.06753 22.5266 6 29.5477 6 39C6 46.2639 6.03988 51.3741 6.09205 54.9515C6.15893 59.537 9.80278 63 14.3887 63H57.6113C62.1972 63 65.8411 59.537 65.9079 54.9515C65.9601 51.3741 66 46.2639 66 39C66 29.5477 65.9325 22.5266 65.8582 17.6631ZM39 21C37.3431 21 36 22.3431 36 24C36 25.6569 37.3431 27 39 27H51C52.6569 27 54 25.6569 54 24C54 22.3431 52.6569 21 51 21H39ZM36 33C36 31.3431 37.3431 30 39 30H51C52.6569 30 54 31.3431 54 33C54 34.6569 52.6569 36 51 36H39C37.3431 36 36 34.6569 36 33ZM24 33C27.3137 33 30 30.3137 30 27C30 23.6863 27.3137 21 24 21C20.6863 21 18 23.6863 18 27C18 30.3137 20.6863 33 24 33Z" fill="currentColor"></path></svg>May 22, 2024</div><span class="text-base text-secondary dark:text-secondary-dark"></span></div></div></a></div><div class="flex-1 min-w-[40%] text-start"><a class="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark" href="/blog/2024/04/25/react-19"><div class="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed"><div class="flex flex-row gap-3 w-full"><h2 class="font-semibold flex-1 text-2xl lg:text-3xl hover:underline leading-snug mb-4">React 19 RC</h2></div><div><div class="flex flex-row justify-start gap-2 items-center text-base text-tertiary dark:text-tertiary-dark"><svg class="w-6 h-6 text-tertiary dark:text-tertiary-dark" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7101 56.3758C13.0724 56.7251 13.6324 57 14.3887 57H57.6113C58.3676 57 58.9276 56.7251 59.2899 56.3758C59.6438 56.0346 59.8987 55.5407 59.9086 54.864C59.9354 53.022 59.9591 50.7633 59.9756 48H12.0244C12.0409 50.7633 12.0645 53.022 12.0914 54.864C12.1013 55.5407 12.3562 56.0346 12.7101 56.3758ZM12.0024 42H59.9976C59.9992 41.0437 60 40.0444 60 39C60 29.5762 59.9327 22.5857 59.8589 17.7547C59.8359 16.2516 58.6168 15 56.9938 15L15.0062 15C13.3832 15 12.1641 16.2516 12.1411 17.7547C12.0673 22.5857 12 29.5762 12 39C12 40.0444 12.0008 41.0437 12.0024 42ZM65.8582 17.6631C65.7843 12.8227 61.8348 9 56.9938 9H15.0062C10.1652 9 6.21572 12.8227 6.1418 17.6631C6.06753 22.5266 6 29.5477 6 39C6 46.2639 6.03988 51.3741 6.09205 54.9515C6.15893 59.537 9.80278 63 14.3887 63H57.6113C62.1972 63 65.8411 59.537 65.9079 54.9515C65.9601 51.3741 66 46.2639 66 39C66 29.5477 65.9325 22.5266 65.8582 17.6631ZM39 21C37.3431 21 36 22.3431 36 24C36 25.6569 37.3431 27 39 27H51C52.6569 27 54 25.6569 54 24C54 22.3431 52.6569 21 51 21H39ZM36 33C36 31.3431 37.3431 30 39 30H51C52.6569 30 54 31.3431 54 33C54 34.6569 52.6569 36 51 36H39C37.3431 36 36 34.6569 36 33ZM24 33C27.3137 33 30 30.3137 30 27C30 23.6863 27.3137 21 24 21C20.6863 21 18 23.6863 18 27C18 30.3137 20.6863 33 24 33Z" fill="currentColor"></path></svg>April 25, 2024</div><span class="text-base text-secondary dark:text-secondary-dark"></span></div></div></a></div><div class="hidden sm:flex-1 sm:inline"><a class="block h-full w-full rounded-2xl outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark" href="/blog/2024/04/25/react-19-upgrade-guide"><div class="justify-between p-5 sm:p-5 cursor-pointer w-full h-full flex flex-col flex-1 shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 rounded-2xl text-xl text-primary dark:text-primary-dark leading-relaxed"><div class="flex flex-row gap-3 w-full"><h2 class="font-semibold flex-1 text-2xl lg:text-3xl hover:underline leading-snug mb-4">React 19 RC Upgrade Guide</h2></div><div><div class="flex flex-row justify-start gap-2 items-center text-base text-tertiary dark:text-tertiary-dark"><svg class="w-6 h-6 text-tertiary dark:text-tertiary-dark" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7101 56.3758C13.0724 56.7251 13.6324 57 14.3887 57H57.6113C58.3676 57 58.9276 56.7251 59.2899 56.3758C59.6438 56.0346 59.8987 55.5407 59.9086 54.864C59.9354 53.022 59.9591 50.7633 59.9756 48H12.0244C12.0409 50.7633 12.0645 53.022 12.0914 54.864C12.1013 55.5407 12.3562 56.0346 12.7101 56.3758ZM12.0024 42H59.9976C59.9992 41.0437 60 40.0444 60 39C60 29.5762 59.9327 22.5857 59.8589 17.7547C59.8359 16.2516 58.6168 15 56.9938 15L15.0062 15C13.3832 15 12.1641 16.2516 12.1411 17.7547C12.0673 22.5857 12 29.5762 12 39C12 40.0444 12.0008 41.0437 12.0024 42ZM65.8582 17.6631C65.7843 12.8227 61.8348 9 56.9938 9H15.0062C10.1652 9 6.21572 12.8227 6.1418 17.6631C6.06753 22.5266 6 29.5477 6 39C6 46.2639 6.03988 51.3741 6.09205 54.9515C6.15893 59.537 9.80278 63 14.3887 63H57.6113C62.1972 63 65.8411 59.537 65.9079 54.9515C65.9601 51.3741 66 46.2639 66 39C66 29.5477 65.9325 22.5266 65.8582 17.6631ZM39 21C37.3431 21 36 22.3431 36 24C36 25.6569 37.3431 27 39 27H51C52.6569 27 54 25.6569 54 24C54 22.3431 52.6569 21 51 21H39ZM36 33C36 31.3431 37.3431 30 39 30H51C52.6569 30 54 31.3431 54 33C54 34.6569 52.6569 36 51 36H39C37.3431 36 36 34.6569 36 33ZM24 33C27.3137 33 30 30.3137 30 27C30 23.6863 27.3137 21 24 21C20.6863 21 18 23.6863 18 27C18 30.3137 20.6863 33 24 33Z" fill="currentColor"></path></svg>April 25, 2024</div><span class="text-base text-secondary dark:text-secondary-dark"></span></div></div></a></div></div><div class="flex lg:hidden justify-start w-full"><a class="focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark group cursor-pointer w-auto justify-center inline-flex font-bold items-center mt-10 outline-none hover:bg-gray-40/5 active:bg-gray-40/10 hover:dark:bg-gray-60/5 active:dark:bg-gray-60/10 leading-tight hover:bg-opacity-80 text-lg py-2.5 rounded-full px-4 sm:px-6 ease-in-out shadow-secondary-button-stroke dark:shadow-secondary-button-stroke-dark text-primary dark:text-primary-dark" href="/blog"><svg class="me-2.5 text-primary dark:text-primary-dark" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7101 56.3758C13.0724 56.7251 13.6324 57 14.3887 57H57.6113C58.3676 57 58.9276 56.7251 59.2899 56.3758C59.6438 56.0346 59.8987 55.5407 59.9086 54.864C59.9354 53.022 59.9591 50.7633 59.9756 48H12.0244C12.0409 50.7633 12.0645 53.022 12.0914 54.864C12.1013 55.5407 12.3562 56.0346 12.7101 56.3758ZM12.0024 42H59.9976C59.9992 41.0437 60 40.0444 60 39C60 29.5762 59.9327 22.5857 59.8589 17.7547C59.8359 16.2516 58.6168 15 56.9938 15L15.0062 15C13.3832 15 12.1641 16.2516 12.1411 17.7547C12.0673 22.5857 12 29.5762 12 39C12 40.0444 12.0008 41.0437 12.0024 42ZM65.8582 17.6631C65.7843 12.8227 61.8348 9 56.9938 9H15.0062C10.1652 9 6.21572 12.8227 6.1418 17.6631C6.06753 22.5266 6 29.5477 6 39C6 46.2639 6.03988 51.3741 6.09205 54.9515C6.15893 59.537 9.80278 63 14.3887 63H57.6113C62.1972 63 65.8411 59.537 65.9079 54.9515C65.9601 51.3741 66 46.2639 66 39C66 29.5477 65.9325 22.5266 65.8582 17.6631ZM39 21C37.3431 21 36 22.3431 36 24C36 25.6569 37.3431 27 39 27H51C52.6569 27 54 25.6569 54 24C54 22.3431 52.6569 21 51 21H39ZM36 33C36 31.3431 37.3431 30 39 30H51C52.6569 30 54 31.3431 54 33C54 34.6569 52.6569 36 51 36H39C37.3431 36 36 34.6569 36 33ZM24 33C27.3137 33 30 30.3137 30 27C30 23.6863 27.3137 21 24 21C20.6863 21 18 23.6863 18 27C18 30.3137 20.6863 33 24 33Z" fill="currentColor"></path></svg>Read more React news<svg class="text-primary dark:text-primary-dark rtl:rotate-180" fill="none" width="24" height="24" viewBox="0 0 72 72" aria-hidden="true"><path class="transition-transform ease-in-out translate-x-[-8px] group-hover:translate-x-[8px]" fill-rule="evenodd" clip-rule="evenodd" d="M40.0001 19.0245C41.0912 17.7776 42.9864 17.6513 44.2334 18.7423L58.9758 33.768C59.6268 34.3377 60.0002 35.1607 60.0002 36.0257C60.0002 36.8908 59.6268 37.7138 58.9758 38.2835L44.2335 53.3078C42.9865 54.3988 41.0913 54.2725 40.0002 53.0256C38.9092 51.7786 39.0355 49.8835 40.2824 48.7924L52.4445 36.0257L40.2823 23.2578C39.0354 22.1667 38.9091 20.2714 40.0001 19.0245Z" fill="currentColor"></path><path class="opacity-0 ease-in-out transition-opacity group-hover:opacity-100" d="M60 36.0273C60 37.6842 58.6569 39.0273 57 39.0273H15C13.3431 39.0273 12 37.6842 12 36.0273C12 34.3704 13.3431 33.0273 15 33.0273H57C58.6569 33.0273 60 34.3704 60 36.0273Z" fill="currentColor"></path></svg></a></div></div></div></div></div></div><div class="mx-auto flex flex-col w-full bg-gradient-left dark:bg-gradient-left-dark border-t border-primary/10 dark:border-primary-dark/10 " style="contain:content"><div class="flex-col gap-2 flex grow w-full my-20 lg:my-32 mx-auto items-center"><div class="w-full"><div class="mx-auto flex flex-col max-w-4xl"><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Join a community <br class="hidden lg:inline"/>of millions</h2><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">You’re not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.</p></div></div><div class="relative flex overflow-x-hidden overflow-y-visible w-auto"><div class="w-full py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee lg:animate-large-marquee" style="animation-play-state:paused"><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_fun.webp" alt="People singing karaoke at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_sunil.webp" alt="Sunil Pai speaking at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_hallway.webp" alt="A hallway conversation between two people at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_hallway.webp" alt="A hallway conversation at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_elizabet.webp" alt="Elizabet Oliveira speaking at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_selfie.webp" alt="People taking a group selfie at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_nat.webp" alt="Nat Alison speaking at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_team.webp" alt="Organizers greeting attendees at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div></div><div aria-hidden="true" class="w-full absolute top-0 py-12 lg:py-20 whitespace-nowrap flex flex-row animate-marquee2 lg:animate-large-marquee2" style="animation-play-state:paused"><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_fun.webp" alt="People singing karaoke at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_sunil.webp" alt="Sunil Pai speaking at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_hallway.webp" alt="A hallway conversation between two people at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_hallway.webp" alt="A hallway conversation at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_elizabet.webp" alt="Elizabet Oliveira speaking at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_selfie.webp" alt="People taking a group selfie at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 rotate-2 group-hover:rotate-[-1deg] group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl"><img loading="lazy" src="/images/home/community/react_conf_nat.webp" alt="Nat Alison speaking at React Conf" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div><div class="group flex justify-center px-5 min-w-[50%] lg:min-w-[25%] rounded-2xl relative"><div class="h-auto relative rounded-2xl overflow-hidden before:-skew-x-12 before:absolute before:inset-0 before:-translate-x-full group-hover:before:animate-[shimmer_1s_forwards] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent transition-all ease-in-out duration-300 group-hover:rotate-1 group-hover:scale-110 group-hover:shadow-lg lg:group-hover:shadow-2xl rotate-[-2deg]"><img loading="lazy" src="/images/home/community/react_india_team.webp" alt="Organizers greeting attendees at React India" class="aspect-[4/3] h-full w-full flex object-cover rounded-2xl bg-gray-10 dark:bg-gray-80"/></div></div></div></div><div class="mx-auto flex flex-col max-w-4xl"><div class="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center"><p class="max-w-3xl mx-auto text-lg lg:text-xl text-secondary dark:text-secondary-dark leading-normal">This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It’s a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.</p></div></div></div><div class="mt-20 px-5 lg:px-0 mb-6 max-w-4xl text-center text-opacity-80"><div class="uwu-visible flex justify-center"><img alt="logo by @sawaratsuki1004" title="logo by @sawaratsuki1004" class="uwu-visible mb-10 lg:mb-8 h-24 lg:h-32" src="/images/uwu.png"/></div><svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" class="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start"><circle cx="0" cy="0" r="2" fill="currentColor"></circle><g stroke="currentColor" stroke-width="1" fill="none"><ellipse rx="10" ry="4.5"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse><ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse></g></svg><h2 class="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">Welcome to the <br class="hidden lg:inline"/>React community</h2><a class="active:scale-[.98] transition-transform inline-flex font-bold items-center outline-none focus:outline-none focus-visible:outline focus-visible:outline-link focus:outline-offset-2 focus-visible:dark:focus:outline-link-dark leading-snug bg-link text-white dark:bg-brand-dark dark:text-secondary hover:bg-opacity-80 text-lg py-3 rounded-full px-4 sm:px-6" aria-label="Take the Tutorial" target="_self" href="/learn">Get Started</a></div></div></div></div></article><div class="self-stretch w-full bg-wash dark:bg-gray-95 mt-[-1px]"><div class="py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14 lg:pt-0"><footer class="text-secondary dark:text-secondary-dark"><div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto"><div class="col-span-2 md:col-span-1 justify-items-start mt-3.5"><a href="https://opensource.fb.com/" target="_blank" rel="noopener" aria-label="Meta Open Source"><div><svg width="160" height="19" viewBox="0 0 160 19" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-primary dark:text-primary-dark"><path d="M22.0605 3.62598H24.3349L28.202 10.6212L32.0691 3.62598H34.2942V15.1206H32.4387V6.31077L29.0476 12.4111H27.307L23.9162 6.31077V15.1206H22.0605V3.62598Z" fill="currentColor"></path><path d="M40.2785 15.3259C39.4191 15.3259 38.6638 15.1357 38.0124 14.7554C37.367 14.3812 36.8394 13.8336 36.4895 13.1747C36.1253 12.5015 35.9433 11.7297 35.9434 10.8594C35.9434 9.97825 36.1213 9.19824 36.4771 8.5194C36.8329 7.84077 37.3269 7.30982 37.9592 6.92653C38.5913 6.54347 39.3179 6.3519 40.139 6.35181C40.9546 6.35181 41.6566 6.54477 42.2449 6.9307C42.8334 7.31658 43.2863 7.85713 43.6038 8.55232C43.9212 9.24748 44.08 10.063 44.0801 10.9989V11.5081H37.7826C37.8975 12.2088 38.1808 12.7602 38.6323 13.1625C39.0839 13.5648 39.6546 13.7659 40.3443 13.766C40.8971 13.766 41.3733 13.6839 41.7729 13.5196C42.1723 13.3554 42.5473 13.1063 42.8977 12.7724L43.8831 13.9794C42.9031 14.8771 41.7016 15.326 40.2785 15.3259ZM41.6334 8.50718C41.2447 8.11027 40.7356 7.91184 40.1062 7.91189C39.4931 7.91189 38.9799 8.11439 38.5667 8.51941C38.1533 8.92464 37.8919 9.46931 37.7826 10.1534H42.2984C42.2436 9.45273 42.0219 8.90398 41.6334 8.50716V8.50718Z" fill="currentColor"></path><path d="M46.3308 8.07609H44.623V6.55715H46.3308V4.04468H48.1209V6.55715H50.7153V8.07609H48.1209V11.9267C48.1209 12.5672 48.2303 13.0243 48.4492 13.298C48.6682 13.5717 49.0431 13.7086 49.5741 13.7084C49.7742 13.7102 49.9743 13.7006 50.1734 13.6797C50.3376 13.6606 50.5183 13.6346 50.7153 13.6017V15.1043C50.4905 15.1692 50.2614 15.2186 50.0297 15.252C49.7647 15.2911 49.4971 15.3103 49.2292 15.3095C47.2969 15.3095 46.3308 14.2531 46.3308 12.1403L46.3308 8.07609Z" fill="currentColor"></path><path d="M60.0415 15.1207H58.2844V13.9219C57.9815 14.3629 57.572 14.7202 57.094 14.9606C56.6123 15.204 56.0649 15.3258 55.4519 15.3259C54.6966 15.3259 54.0274 15.133 53.4444 14.7472C52.8614 14.3611 52.4029 13.8302 52.0692 13.1543C51.7353 12.4784 51.5684 11.7052 51.5684 10.8348C51.5684 9.95904 51.738 9.1845 52.0774 8.5112C52.4167 7.83795 52.8861 7.30972 53.4855 6.92653C54.0847 6.54347 54.773 6.3519 55.5503 6.35181C56.1361 6.35181 56.6616 6.46538 57.1269 6.69253C57.5858 6.91465 57.9833 7.24591 58.2844 7.65731V6.55718H60.0415V15.1207ZM58.2516 9.55395C58.06 9.06686 57.7576 8.68232 57.3444 8.40033C56.9311 8.11861 56.4535 7.97771 55.9116 7.97762C55.1452 7.97762 54.5349 8.23487 54.0807 8.74939C53.6264 9.2639 53.3993 9.95905 53.3993 10.8349C53.3993 11.7162 53.6182 12.4141 54.0561 12.9285C54.4939 13.443 55.0877 13.7003 55.8377 13.7003C56.3906 13.7003 56.8833 13.5579 57.3156 13.2733C57.7405 12.9979 58.068 12.5957 58.2516 12.1238V9.55395Z" fill="currentColor"></path><path d="M64.4113 11.7585C64.1266 11.0332 63.9843 10.2382 63.9844 9.3733C63.9844 8.50853 64.1267 7.71351 64.4113 6.98824C64.6823 6.28392 65.0929 5.6416 65.6182 5.09981C66.1399 4.56496 66.7659 4.14298 67.4573 3.86003C68.1634 3.56716 68.9379 3.4207 69.7808 3.42065C70.6238 3.42065 71.3984 3.56711 72.1045 3.86003C72.796 4.14302 73.422 4.56499 73.9437 5.09981C74.4689 5.64171 74.8795 6.284 75.1507 6.98824C75.4351 7.71351 75.5774 8.50853 75.5776 9.3733C75.5776 10.2382 75.4353 11.0333 75.1507 11.7585C74.8795 12.4627 74.4689 13.105 73.9437 13.6469C73.422 14.1818 72.796 14.6038 72.1045 14.8867C71.3984 15.1794 70.6239 15.3259 69.7808 15.3259C68.938 15.3259 68.1635 15.1795 67.4573 14.8867C66.7658 14.6038 66.1399 14.1818 65.6182 13.6469C65.0929 13.1051 64.6823 12.4628 64.4113 11.7585ZM73.6152 9.3733C73.6152 8.54697 73.451 7.81763 73.1226 7.18529C72.7942 6.55303 72.3413 6.05904 71.7637 5.70331C71.1862 5.34753 70.5252 5.16962 69.7808 5.16958C69.0365 5.16958 68.3756 5.34749 67.7981 5.70331C67.2205 6.05909 66.7676 6.55308 66.4392 7.18529C66.1108 7.81741 65.9466 8.54674 65.9466 9.3733C65.9466 10.1999 66.1108 10.9293 66.4392 11.5615C66.7677 12.1937 67.2206 12.6877 67.7981 13.0434C68.3755 13.3993 69.0364 13.5773 69.7808 13.5772C70.5252 13.5772 71.1862 13.3993 71.7637 13.0434C72.3413 12.6877 72.7942 12.1937 73.1226 11.5615C73.451 10.9292 73.6152 10.1998 73.6152 9.3733V9.3733Z" fill="currentColor"></path><path d="M77.2188 6.55718H78.9839V7.74763C79.2856 7.30796 79.6938 6.95201 80.1705 6.71309C80.6492 6.47237 81.1952 6.35194 81.8084 6.35181C82.5637 6.35181 83.2342 6.54477 83.8199 6.9307C84.4056 7.31658 84.8641 7.84615 85.1952 8.5194C85.5263 9.19264 85.6919 9.96719 85.6919 10.843C85.6919 11.7133 85.5223 12.4865 85.1829 13.1625C84.8436 13.8386 84.3742 14.3681 83.7747 14.7512C83.1755 15.1343 82.4873 15.3258 81.71 15.3259C81.1353 15.3259 80.618 15.2165 80.1581 14.9976C79.7045 14.7837 79.31 14.4624 79.0087 14.0616V18.569H77.2188V6.55718ZM79.9159 13.2774C80.3291 13.5594 80.8067 13.7004 81.3487 13.7003C82.1148 13.7003 82.7251 13.443 83.1796 12.9285C83.6339 12.414 83.861 11.7188 83.861 10.843C83.861 9.96172 83.6421 9.26383 83.2042 8.74937C82.7662 8.23486 82.1723 7.9776 81.4226 7.9776C80.8697 7.9776 80.377 8.11989 79.9447 8.40448C79.5197 8.67987 79.1923 9.08202 79.0087 9.55393V12.1238C79.2002 12.611 79.5026 12.9956 79.9159 13.2774Z" fill="currentColor"></path><path d="M91.177 15.3259C90.3176 15.3259 89.5622 15.1357 88.9109 14.7554C88.2654 14.3812 87.7377 13.8336 87.3878 13.1747C87.0236 12.5015 86.8417 11.7297 86.8418 10.8594C86.8418 9.97825 87.0197 9.19824 87.3754 8.5194C87.7312 7.84077 88.2252 7.30982 88.8574 6.92653C89.4896 6.54347 90.2163 6.3519 91.0373 6.35181C91.8528 6.35181 92.5548 6.54477 93.1434 6.9307C93.7317 7.31658 94.1846 7.85713 94.5022 8.55232C94.8196 9.24748 94.9782 10.063 94.9783 10.9989V11.5081H88.6809C88.7958 12.2088 89.0791 12.7602 89.5308 13.1625C89.9824 13.5648 90.553 13.7659 91.2426 13.766C91.7954 13.766 92.2716 13.6839 92.6712 13.5196C93.0708 13.3554 93.4457 13.1063 93.796 12.7724L94.7812 13.9794C93.8014 14.8771 92.6 15.326 91.177 15.3259ZM92.5315 8.50718C92.1428 8.11027 91.6338 7.91184 91.0044 7.91189C90.3914 7.91189 89.8782 8.11439 89.465 8.51941C89.0517 8.92464 88.7903 9.46931 88.6809 10.1534H93.1966C93.1419 9.45273 92.9202 8.90398 92.5315 8.50716V8.50718Z" fill="currentColor"></path><path d="M96.4883 6.55718H98.2536V7.80515C98.9158 6.83621 99.8381 6.35176 101.021 6.35181C102.039 6.35181 102.821 6.66928 103.369 7.30422C103.916 7.93929 104.19 8.84793 104.19 10.0301V15.1207H102.4V10.2436C102.4 9.44454 102.258 8.85615 101.973 8.47842C101.688 8.10074 101.242 7.9119 100.635 7.9119C100.104 7.9119 99.6356 8.04872 99.2307 8.32238C98.8255 8.59617 98.508 8.97932 98.2783 9.47183V15.1207H96.4883L96.4883 6.55718Z" fill="currentColor"></path><path d="M116.875 11.8694C116.875 12.9586 116.499 13.8071 115.746 14.4147C114.994 15.0222 113.914 15.3259 112.507 15.3259C111.451 15.3259 110.511 15.1262 109.687 14.7266C108.863 14.3272 108.221 13.7469 107.762 12.9859L109.157 11.8858C109.54 12.466 110.019 12.8971 110.594 13.1789C111.169 13.4609 111.829 13.6018 112.573 13.6018C113.323 13.6018 113.906 13.4594 114.322 13.1747C114.738 12.8902 114.946 12.5043 114.946 12.0171C114.946 11.5957 114.801 11.2468 114.511 10.9703C114.221 10.694 113.728 10.4846 113.033 10.3422L111.309 9.98094C109.196 9.54304 108.139 8.47567 108.139 6.77883C108.139 6.10558 108.315 5.51714 108.665 5.01352C109.015 4.51002 109.512 4.11867 110.155 3.83947C110.798 3.56031 111.552 3.4207 112.417 3.42065C114.338 3.42065 115.775 4.16509 116.727 5.65397L115.315 6.66391C114.976 6.14939 114.572 5.76759 114.104 5.51849C113.636 5.26943 113.068 5.14492 112.401 5.14497C111.662 5.14497 111.088 5.28041 110.681 5.55128C110.273 5.82225 110.069 6.20952 110.069 6.7131C110.069 7.09629 110.202 7.40557 110.467 7.64091C110.732 7.87626 111.196 8.0651 111.859 8.20744L113.583 8.56874C115.778 9.02855 116.875 10.1288 116.875 11.8694Z" fill="currentColor"></path><path d="M118.677 13.1831C118.308 12.5097 118.123 11.7297 118.123 10.843C118.123 9.95083 118.308 9.16809 118.677 8.4948C119.034 7.83483 119.569 7.28851 120.221 6.91833C120.88 6.54065 121.645 6.3518 122.516 6.35181C123.386 6.35181 124.151 6.54065 124.81 6.91833C125.463 7.28862 125.998 7.83491 126.354 8.4948C126.724 9.16805 126.908 9.95079 126.908 10.843C126.908 11.7297 126.724 12.5097 126.354 13.1831C125.998 13.8429 125.463 14.3892 124.81 14.7594C124.151 15.1371 123.386 15.3259 122.516 15.3259C121.651 15.3259 120.887 15.1371 120.225 14.7594C119.571 14.3902 119.034 13.8438 118.677 13.1831ZM125.077 10.843C125.077 9.98377 124.843 9.29408 124.375 8.77396C123.907 8.25393 123.288 7.99394 122.516 7.994C121.744 7.994 121.124 8.25398 120.656 8.77396C120.188 9.29399 119.954 9.98368 119.954 10.843C119.954 11.6969 120.188 12.3839 120.656 12.9039C121.124 13.4239 121.744 13.6839 122.516 13.6839C123.288 13.6839 123.907 13.4239 124.375 12.9039C124.843 12.3839 125.077 11.6969 125.077 10.843Z" fill="currentColor"></path><path d="M135.907 15.1206H134.141V13.8891C133.484 14.847 132.576 15.3259 131.415 15.3259C130.408 15.3259 129.635 15.0084 129.096 14.3735C128.557 13.7385 128.287 12.8299 128.287 11.6475V6.55713H130.077V11.4341C130.077 12.2278 130.217 12.8148 130.496 13.1953C130.775 13.5758 131.213 13.766 131.809 13.7659C132.324 13.7659 132.781 13.6305 133.18 13.3595C133.58 13.0885 133.892 12.7095 134.116 12.2223V6.55713H135.907L135.907 15.1206Z" fill="currentColor"></path><path d="M137.877 6.55733H139.642V7.8709C140.195 6.91311 140.95 6.43417 141.908 6.43408C142.22 6.43408 142.475 6.46146 142.672 6.5162V8.16659C142.403 8.12858 142.131 8.10936 141.859 8.10907C140.786 8.10907 140.055 8.59074 139.667 9.55408V15.1208H137.877L137.877 6.55733Z" fill="currentColor"></path><path d="M143.737 8.49063C144.079 7.83229 144.601 7.28535 145.244 6.9143C145.889 6.53944 146.645 6.35194 147.51 6.35181C149.119 6.35181 150.318 6.98952 151.106 8.26496L149.71 9.20918C149.431 8.78768 149.119 8.47975 148.774 8.2854C148.429 8.09118 148.013 7.99405 147.526 7.994C146.782 7.994 146.18 8.25534 145.72 8.778C145.26 9.30085 145.03 9.98647 145.03 10.8348C145.03 11.727 145.255 12.4249 145.703 12.9285C146.152 13.4321 146.785 13.6839 147.6 13.6839C148.034 13.6874 148.463 13.5845 148.848 13.3841C149.218 13.1962 149.536 12.9215 149.776 12.5836L151.024 13.6839C150.186 14.7786 149.031 15.326 147.559 15.3259C146.678 15.3259 145.91 15.1412 145.256 14.7718C144.609 14.4099 144.081 13.8679 143.737 13.2117C143.378 12.5413 143.199 11.7544 143.199 10.8512C143.199 9.95352 143.378 9.16666 143.737 8.49063Z" fill="currentColor"></path><path d="M156.195 15.3259C155.335 15.3259 154.58 15.1357 153.928 14.7554C153.283 14.3812 152.755 13.8336 152.405 13.1747C152.041 12.5015 151.859 11.7297 151.859 10.8594C151.859 9.97825 152.037 9.19824 152.393 8.5194C152.749 7.84077 153.243 7.30982 153.875 6.92653C154.507 6.54347 155.234 6.3519 156.055 6.35181C156.87 6.35181 157.572 6.54477 158.161 6.9307C158.749 7.31658 159.202 7.85713 159.52 8.55232C159.837 9.24748 159.996 10.063 159.996 10.9989V11.5081H153.698C153.814 12.2088 154.097 12.7602 154.548 13.1625C155 13.5648 155.571 13.7659 156.26 13.766C156.813 13.766 157.289 13.6839 157.689 13.5196C158.088 13.3554 158.463 13.1063 158.814 12.7724L159.799 13.9794C158.819 14.8771 157.618 15.326 156.195 15.3259ZM157.549 8.50718C157.161 8.11027 156.651 7.91184 156.022 7.91189C155.409 7.91189 154.896 8.11439 154.483 8.51941C154.069 8.92464 153.808 9.46931 153.698 10.1534H158.214C158.159 9.45273 157.938 8.90398 157.549 8.50716V8.50718Z" fill="currentColor"></path><path d="M5.26022 3.23511C5.25436 3.23511 5.24854 3.23513 5.24268 3.23516L5.21875 5.21191C5.22423 5.21185 5.22969 5.2118 5.23518 5.2118C6.53629 5.2118 7.54551 6.23768 9.73906 9.93252L9.87278 10.1575L9.88153 10.1722L11.1094 8.32979L11.1009 8.31556C10.812 7.84556 10.5344 7.41312 10.2681 7.01826C9.95934 6.56075 9.66404 6.15204 9.37746 5.78713C7.92635 3.93952 6.71249 3.23511 5.26022 3.23511Z" fill="url(#paint0_linear_627_396207)"></path><path d="M5.24198 3.23516C3.78266 3.24267 2.49251 4.18633 1.56092 5.63032C1.55819 5.63455 1.55546 5.63879 1.55273 5.64302L3.26279 6.57377C3.26556 6.56957 3.26836 6.56535 3.27114 6.56117C3.81514 5.7421 4.49212 5.21969 5.21805 5.21191C5.22353 5.21185 5.229 5.21181 5.23448 5.21181L5.2595 3.23511C5.25364 3.23511 5.24783 3.23513 5.24198 3.23516Z" fill="url(#paint1_linear_627_396207)"></path><path d="M1.56088 5.63037C1.55816 5.6346 1.55543 5.63884 1.5527 5.64307C0.94054 6.596 0.484192 7.76537 0.237567 9.02689C0.236499 9.03235 0.235435 9.03781 0.234375 9.04329L2.15555 9.49659C2.15655 9.49111 2.15756 9.48562 2.15857 9.48015C2.36393 8.37149 2.75488 7.34323 3.26274 6.57382C3.26552 6.56962 3.26831 6.5654 3.2711 6.56122L1.56088 5.63037Z" fill="url(#paint2_linear_627_396207)"></path><path d="M2.15979 9.48011L0.238778 9.02686C0.23771 9.03231 0.236646 9.03778 0.235585 9.04325C0.101104 9.73704 0.0326863 10.442 0.03125 11.1487C0.03125 11.1544 0.03125 11.1601 0.03125 11.1658L2.00149 11.3421C2.00133 11.3364 2.00117 11.3307 2.00103 11.3249C2.00007 11.284 1.99958 11.2424 1.99956 11.2003C2.00054 10.6288 2.05316 10.0586 2.15678 9.49655C2.15776 9.49107 2.15878 9.48558 2.15979 9.48011Z" fill="url(#paint3_linear_627_396207)"></path><path d="M2.06148 11.9568C2.02614 11.7537 2.00611 11.5482 2.00156 11.3421C2.0014 11.3363 2.00124 11.3307 2.0011 11.3249L0.031335 11.1487C0.031335 11.1544 0.031335 11.1601 0.031335 11.1658V11.1669C0.0292535 11.5801 0.0653944 11.9925 0.139296 12.399C0.140327 12.4045 0.14134 12.4099 0.142386 12.4154L2.06448 11.9732C2.06345 11.9678 2.06247 11.9623 2.06148 11.9568Z" fill="url(#paint4_linear_627_396207)"></path><path d="M2.50976 12.9765C2.29536 12.7425 2.14362 12.405 2.06386 11.9732C2.06285 11.9678 2.06187 11.9623 2.06088 11.9568L0.138672 12.399C0.139703 12.4045 0.140716 12.4099 0.141762 12.4154C0.28705 13.1782 0.571996 13.8139 0.980035 14.2949C0.983663 14.2991 0.987305 14.3034 0.990959 14.3077L2.52121 12.9888C2.51738 12.9848 2.51355 12.9807 2.50976 12.9765Z" fill="url(#paint5_linear_627_396207)"></path><path d="M8.20487 7.50854C7.04655 9.28523 6.34486 10.3996 6.34486 10.3996C4.80187 12.8183 4.26806 13.3604 3.409 13.3604C3.05054 13.3604 2.75107 13.2328 2.52164 12.9888C2.51782 12.9848 2.51398 12.9807 2.51019 12.9765L0.980469 14.2949C0.984097 14.2991 0.987738 14.3034 0.991392 14.3077C1.5548 14.9644 2.35009 15.3288 3.33393 15.3288C4.82242 15.3288 5.89296 14.6271 7.79608 11.3004C7.79608 11.3004 8.58943 9.8994 9.1352 8.93436C8.79713 8.38854 8.48948 7.91597 8.20487 7.50854Z" fill="#0082FB"></path><path d="M10.2688 4.7041C10.2649 4.70825 10.261 4.71248 10.2571 4.71664C9.94322 5.05596 9.64935 5.41323 9.37695 5.78663C9.66354 6.15154 9.95939 6.56105 10.2682 7.01855C10.6321 6.45684 10.9718 6.00189 11.3048 5.6532C11.3087 5.64907 11.3126 5.64504 11.3166 5.64094L10.2688 4.7041Z" fill="url(#paint6_linear_627_396207)"></path><path d="M15.8912 4.53007C15.0834 3.71396 14.1202 3.23511 13.0905 3.23511C12.0047 3.23511 11.0914 3.83012 10.2677 4.70423C10.2637 4.70837 10.2598 4.71261 10.2559 4.71677L11.3036 5.65333C11.3075 5.6492 11.3114 5.64517 11.3154 5.64107C11.858 5.0766 12.3832 4.79478 12.9654 4.79478H12.9654C13.592 4.79478 14.1786 5.08975 14.6867 5.60687C14.6906 5.61092 14.6946 5.61494 14.6986 5.61902L15.9032 4.54221C15.8992 4.53815 15.8952 4.53412 15.8912 4.53007Z" fill="#0082FB"></path><path d="M18.2273 10.8885C18.1821 8.26813 17.2651 5.92556 15.904 4.54218C15.9 4.53811 15.896 4.53408 15.892 4.53003L14.6875 5.60684C14.6915 5.61089 14.6954 5.61491 14.6994 5.61899C15.7233 6.67077 16.4256 8.6271 16.4895 10.8879C16.4897 10.8936 16.4898 10.8993 16.49 10.905L18.2276 10.9056C18.2275 10.8999 18.2274 10.8942 18.2273 10.8885Z" fill="url(#paint7_linear_627_396207)"></path><path d="M18.2262 10.9056C18.2261 10.8999 18.226 10.8942 18.2259 10.8885L16.4881 10.8879C16.4883 10.8936 16.4884 10.8993 16.4886 10.905C16.4914 11.0111 16.4928 11.1179 16.4928 11.2253C16.4928 11.8417 16.4007 12.34 16.2135 12.6997C16.2107 12.705 16.2079 12.7104 16.2051 12.7157L17.5007 14.0632C17.504 14.0583 17.5071 14.0535 17.5103 14.0486C17.9807 13.3228 18.2276 12.3145 18.2276 11.0918C18.2276 11.0296 18.2272 10.9675 18.2262 10.9056Z" fill="url(#paint8_linear_627_396207)"></path><path d="M16.2158 12.6997C16.213 12.705 16.2102 12.7104 16.2074 12.7157C16.0453 13.0189 15.814 13.2212 15.5117 13.3096L16.1024 15.1711C16.1806 15.1445 16.2567 15.1147 16.3308 15.0816C16.353 15.0718 16.3749 15.0616 16.3967 15.0512C16.4092 15.0452 16.4217 15.0391 16.4341 15.0329C16.8281 14.8341 17.1672 14.5417 17.4217 14.1812C17.438 14.1587 17.4541 14.1359 17.47 14.1127C17.4811 14.0963 17.4921 14.0798 17.5031 14.0632C17.5063 14.0583 17.5094 14.0534 17.5126 14.0485L16.2158 12.6997Z" fill="url(#paint9_linear_627_396207)"></path><path d="M15.1349 13.3603C14.9481 13.3648 14.7626 13.3286 14.5911 13.2544L13.9863 15.1602C14.3262 15.2763 14.6889 15.3287 15.0932 15.3287C15.4415 15.3319 15.7878 15.2768 16.1179 15.1654L15.5273 13.3046C15.4001 13.3427 15.2678 13.3615 15.1349 13.3603Z" fill="url(#paint10_linear_627_396207)"></path><path d="M13.9243 12.7085C13.9206 12.7042 13.9168 12.6999 13.9131 12.6956L12.5215 14.1429C12.5254 14.147 12.5293 14.1512 12.5332 14.1553C13.0167 14.6706 13.4784 14.9903 14.0021 15.1657L14.6064 13.2613C14.3857 13.1665 14.1723 12.9947 13.9243 12.7085Z" fill="url(#paint11_linear_627_396207)"></path><path d="M13.9142 12.6956C13.4968 12.2101 12.9804 11.4019 12.1682 10.095L11.1097 8.32966L11.1012 8.31543L9.87305 10.1573L9.8818 10.172L10.6318 11.4337C11.3588 12.6503 11.9511 13.5304 12.5226 14.1428C12.5265 14.147 12.5304 14.1512 12.5343 14.1553L13.9254 12.7085C13.9217 12.7042 13.918 12.6999 13.9142 12.6956Z" fill="url(#paint12_linear_627_396207)"></path><defs><linearGradient id="paint0_linear_627_396207" x1="10.2933" y1="9.42293" x2="6.21654" y2="4.08099" gradientUnits="userSpaceOnUse"><stop offset="0.0006" stop-color="#0867DF"></stop><stop offset="0.4539" stop-color="#0668E1"></stop><stop offset="0.8591" stop-color="#0064E0"></stop></linearGradient><linearGradient id="paint1_linear_627_396207" x1="2.35598" y1="5.96246" x2="5.15084" y2="3.84063" gradientUnits="userSpaceOnUse"><stop offset="0.1323" stop-color="#0064DF"></stop><stop offset="0.9988" stop-color="#0064E0"></stop></linearGradient><linearGradient id="paint2_linear_627_396207" x1="1.17132" y1="9.07623" x2="2.29244" y2="6.25404" gradientUnits="userSpaceOnUse"><stop offset="0.0147" stop-color="#0072EC"></stop><stop offset="0.6881" stop-color="#0064DF"></stop></linearGradient><linearGradient id="paint3_linear_627_396207" x1="1.02028" y1="11.115" x2="1.15" y2="9.39138" gradientUnits="userSpaceOnUse"><stop offset="0.0731" stop-color="#007CF6"></stop><stop offset="0.9943" stop-color="#0072EC"></stop></linearGradient><linearGradient id="paint4_linear_627_396207" x1="1.0917" y1="12.0512" x2="0.998912" y2="11.3606" gradientUnits="userSpaceOnUse"><stop offset="0.0731" stop-color="#007FF9"></stop><stop offset="1" stop-color="#007CF6"></stop></linearGradient><linearGradient id="paint5_linear_627_396207" x1="1.03663" y1="12.2326" x2="1.61491" y2="13.4591" gradientUnits="userSpaceOnUse"><stop offset="0.0731" stop-color="#007FF9"></stop><stop offset="1" stop-color="#0082FB"></stop></linearGradient><linearGradient id="paint6_linear_627_396207" x1="9.92449" y1="6.29781" x2="10.689" y2="5.24046" gradientUnits="userSpaceOnUse"><stop offset="0.2799" stop-color="#007FF8"></stop><stop offset="0.9141" stop-color="#0082FB"></stop></linearGradient><linearGradient id="paint7_linear_627_396207" x1="15.7367" y1="4.92752" x2="17.3361" y2="10.8108" gradientUnits="userSpaceOnUse"><stop stop-color="#0082FB"></stop><stop offset="0.9995" stop-color="#0081FA"></stop></linearGradient><linearGradient id="paint8_linear_627_396207" x1="17.7208" y1="11.0359" x2="16.7086" y2="13.0813" gradientUnits="userSpaceOnUse"><stop offset="0.0619" stop-color="#0081FA"></stop><stop offset="1" stop-color="#0080F9"></stop></linearGradient><linearGradient id="paint9_linear_627_396207" x1="15.9065" y1="14.1657" x2="16.8526" y2="13.5213" gradientUnits="userSpaceOnUse"><stop stop-color="#027AF3"></stop><stop offset="1" stop-color="#0080F9"></stop></linearGradient><linearGradient id="paint10_linear_627_396207" x1="14.4218" y1="14.2915" x2="15.7366" y2="14.2915" gradientUnits="userSpaceOnUse"><stop stop-color="#0377EF"></stop><stop offset="0.9994" stop-color="#0279F1"></stop></linearGradient><linearGradient id="paint11_linear_627_396207" x1="13.2783" y1="13.5675" x2="14.2235" y2="14.1236" gradientUnits="userSpaceOnUse"><stop offset="0.0019" stop-color="#0471E9"></stop><stop offset="1" stop-color="#0377EF"></stop></linearGradient><linearGradient id="paint12_linear_627_396207" x1="10.3961" y1="9.46696" x2="13.424" y2="13.274" gradientUnits="userSpaceOnUse"><stop offset="0.2765" stop-color="#0867DF"></stop><stop offset="1" stop-color="#0471E9"></stop></linearGradient></defs></svg></div></a><div class="text-xs text-left rtl:text-right mt-2 pe-0.5" dir="ltr">Copyright © Meta Platforms, Inc</div><div class="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline">no uwu plz</div><div class="uwu-hidden text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline">uwu?</div><div class="uwu-visible text-xs">Logo by<a href="https://twitter.com/sawaratsuki1004" target="_blank" rel="noopener" class="ms-1">@sawaratsuki1004</a></div></div><div class="flex flex-col"><div><a class="border-b inline-block border-transparent text-md text-secondary dark:text-secondary-dark my-2 font-bold hover:border-gray-10" href="/learn">Learn React</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/learn">Quick Start</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/learn/installation">Installation</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/learn/describing-the-ui">Describing the UI</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/learn/adding-interactivity">Adding Interactivity</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/learn/managing-state">Managing State</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/learn/escape-hatches">Escape Hatches</a></div></div><div class="flex flex-col"><div><a class="border-b inline-block border-transparent text-md text-secondary dark:text-secondary-dark my-2 font-bold hover:border-gray-10" href="/reference/react">API Reference</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/reference/react">React APIs</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/reference/react-dom">React DOM APIs</a></div></div><div class="md:col-start-2 xl:col-start-4 flex flex-col"><div><a class="border-b inline-block border-transparent text-md text-secondary dark:text-secondary-dark my-2 font-bold hover:border-gray-10" href="/community">Community</a></div><div><a href="https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md" target="_blank" rel="noopener" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">Code of Conduct</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/community/team">Meet the Team</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/community/docs-contributors">Docs Contributors</a></div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/community/acknowledgements">Acknowledgements</a></div></div><div class="flex flex-col"><div class="border-b inline-block border-transparent text-md text-secondary dark:text-secondary-dark my-2 font-bold">More</div><div><a class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10" href="/blog">Blog</a></div><div><a href="https://reactnative.dev/" target="_blank" rel="noopener" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">React Native</a></div><div><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">Privacy</a></div><div><a href="https://opensource.fb.com/legal/terms/" target="_blank" rel="noopener" class="border-b inline-block border-transparent text-sm text-primary dark:text-primary-dark hover:border-gray-10">Terms</a></div><div class="flex flex-row items-center mt-8 gap-x-2"><a href="https://www.facebook.com/react" target="_blank" rel="noopener" aria-label="React on Facebook" class="hover:text-primary dark:text-primary-dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.33em" height="1.33em" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"></path></svg></a><a href="https://twitter.com/reactjs" target="_blank" rel="noopener" aria-label="React on Twitter" class="hover:text-primary dark:text-primary-dark"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="1.30em" width="1.30em" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"></path><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></a><a href="https://bsky.app/profile/react.dev" target="_blank" rel="noopener" aria-label="React on Bluesky" class="hover:text-primary dark:text-primary-dark"><svg aria-label="Bluesky" viewBox="0 0 16 16" height="1.25em" width="1.25em" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path class="x19hqcy" d="M3.468 1.948C5.303 3.325 7.276 6.118 8 7.616c.725-1.498 2.697-4.29 4.532-5.668C13.855.955 16 .186 16 2.632c0 .489-.28 4.105-.444 4.692-.572 2.04-2.653 2.561-4.504 2.246 3.236.551 4.06 2.375 2.281 4.2-3.376 3.464-4.852-.87-5.23-1.98-.07-.204-.103-.3-.103-.218 0-.081-.033.014-.102.218-.379 1.11-1.855 5.444-5.231 1.98-1.778-1.825-.955-3.65 2.28-4.2-1.85.315-3.932-.205-4.503-2.246C.28 6.737 0 3.12 0 2.632 0 .186 2.145.955 3.468 1.948Z"></path></svg></a><a href="https://github.com/facebook/react" target="_blank" rel="noopener" aria-label="React on Github" class="hover:text-primary dark:text-primary-dark"><svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 -2 24 24" fill="currentColor"><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path></svg></a></div></div></div></footer></div></div></main><!--/$--><div class="hidden -mt-16 lg:max-w-custom-xs 2xl:block"></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"toc":"[]","content":"[]","meta":{"id":"home","title":"React","permalink":"index.html"},"languages":null},"__N_SSG":true},"page":"/[[...markdownPath]]","query":{},"buildId":"XJwnbMqphJWph8J-Ud_BN","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>