CINXE.COM
<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="generator" content="Docusaurus v2.0.0-beta.14"> <link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Recoil RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Recoil Atom Feed"> <link rel="alternate" type="application/json" href="/blog/feed.json" title="Recoil JSON Feed"> <link rel="preconnect" href="https://www.google-analytics.com"> <script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-44373548-46","auto"),ga("send","pageview")</script> <script async src="https://www.google-analytics.com/analytics.js"></script> <link rel="search" type="application/opensearchdescription+xml" title="Recoil" href="/opensearch.xml"><title data-react-helmet="true">External Resources | Recoil</title><meta data-react-helmet="true" property="og:title" content="External Resources | Recoil"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:image" content="https://recoiljs.org/img/og-image.png"><meta data-react-helmet="true" name="twitter:image" content="https://recoiljs.org/img/og-image.png"><meta data-react-helmet="true" property="og:url" content="https://recoiljs.org/resources"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="default"><link data-react-helmet="true" rel="icon" href="/img/favicon.png"><link data-react-helmet="true" rel="canonical" href="https://recoiljs.org/resources"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/resources" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/fr/resources" hreflang="fr"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/ko/resources" hreflang="ko"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/zh-hans/resources" hreflang="zh-hans"><link data-react-helmet="true" rel="alternate" href="https://recoiljs.org/resources" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.d19c01d8.css"> <link rel="preload" href="/assets/js/runtime~main.f884d970.js" as="script"> <link rel="preload" href="/assets/js/main.d618b56e.js" as="script"> </head> <body> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"> <div><a href="#" class="skipToContent_OuoZ">Skip to main content</a></div><div class="announcementBar_axC9" style="background-color:#20232a;color:#fff" role="banner"><div class="announcementBarContent_6uhP">Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.fb.com/support-ukraine">Help Provide Humanitarian Aid to Ukraine</a>.</div></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" target="_self" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="Recoil" class="themedImage_TMUO themedImage--light_4Vu1"><img src="/img/logo--dark.svg" alt="Recoil" class="themedImage_TMUO themedImage--dark_uzRr"></div></a><a class="navbar__item navbar__link" href="/docs/introduction/installation">Docs</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/docs/recoil-sync/introduction">Recoil Sync</a><a class="navbar__item navbar__link" href="/docs/refine/Introduction">Refine</a><a class="navbar__item navbar__link" href="/docs/recoil-relay/introduction">GraphQL</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/resources">Tutorials</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/facebookexperimental/Recoil" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" class="navbar__link"><span><svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" class="iconLanguage_EbrZ"><path fill="currentColor" d="M19.753 10.909c-.624-1.707-2.366-2.726-4.661-2.726-.09 0-.176.002-.262.006l-.016-2.063 3.525-.607c.115-.019.133-.119.109-.231-.023-.111-.167-.883-.188-.976-.027-.131-.102-.127-.207-.109-.104.018-3.25.461-3.25.461l-.013-2.078c-.001-.125-.069-.158-.194-.156l-1.025.016c-.105.002-.164.049-.162.148l.033 2.307s-3.061.527-3.144.543c-.084.014-.17.053-.151.143.019.09.19 1.094.208 1.172.018.08.072.129.188.107l2.924-.504.035 2.018c-1.077.281-1.801.824-2.256 1.303-.768.807-1.207 1.887-1.207 2.963 0 1.586.971 2.529 2.328 2.695 3.162.387 5.119-3.06 5.769-4.715 1.097 1.506.256 4.354-2.094 5.98-.043.029-.098.129-.033.207l.619.756c.08.096.206.059.256.023 2.51-1.73 3.661-4.515 2.869-6.683zm-7.386 3.188c-.966-.121-.944-.914-.944-1.453 0-.773.327-1.58.876-2.156a3.21 3.21 0 011.229-.799l.082 4.277a2.773 2.773 0 01-1.243.131zm2.427-.553l.046-4.109c.084-.004.166-.01.252-.01.773 0 1.494.145 1.885.361.391.217-1.023 2.713-2.183 3.758zm-8.95-7.668a.196.196 0 00-.196-.145h-1.95a.194.194 0 00-.194.144L.008 16.916c-.017.051-.011.076.062.076h1.733c.075 0 .099-.023.114-.072l1.008-3.318h3.496l1.008 3.318c.016.049.039.072.113.072h1.734c.072 0 .078-.025.062-.076-.014-.05-3.083-9.741-3.494-11.04zm-2.618 6.318l1.447-5.25 1.447 5.25H3.226z"></path></svg><span>English</span></span></a><ul class="dropdown__menu"><li><a href="/resources" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active">English</a></li><li><a href="/fr/resources" target="_self" rel="noopener noreferrer" class="dropdown__link">Français</a></li><li><a href="/ko/resources" target="_self" rel="noopener noreferrer" class="dropdown__link">한국어</a></li><li><a href="/zh-hans/resources" target="_self" rel="noopener noreferrer" class="dropdown__link">简体中文</a></li></ul></div><div class="toggle_iYfV toggle_2i4l toggleDisabled_xj38"><div class="toggleTrack_t-f2" role="button" tabindex="-1"><div class="toggleTrackCheck_mk7D"><span class="toggleIcon_pHJ9">🌜</span></div><div class="toggleTrackX_dm8H"><span class="toggleIcon_pHJ9">🌞</span></div><div class="toggleTrackThumb_W6To"></div></div><input type="checkbox" class="toggleScreenReader_h9qa" aria-label="Switch between dark and light mode"></div><div class="searchBox_Utm0"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><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" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><div class="container margin-vert--lg"><div class="row"><div class="col col--8 col--offset-2 markdown"><h1 class="margin-bottom--sm">External Tutorials</h1><h2>SideGuide Interactive Tutorial</h2><p><a href="https://www.sideguide.dev/" target="_blank">SideGuide</a> <!-- -->has created an interactive tutorial for learning the basics with Recoil. Learn about creating your app and using atoms and selectors with live editable code samples.</p><a class="button button--outline button--secondary button--lg" href="https://app.sideguide.dev/recoil/tutorial/" target="_blank">Interactive Tutorial</a><h2>Learn Recoil Video Course</h2><p><a href="https://twitter.com/jacques_codes" target="_blank" rel="noopener noreferrer">Jacques Blom</a> <!-- -->has created a free Recoil video course, which takes you from setup to advanced usage. In the course you'll how to take full advantage of Recoil's powerful APIs.</p><p>Learn how to do data fetching with Suspense, how to use Recoil to solve common React performance bottlenecks, and much more.</p><a class="button button--outline button--secondary button--lg" href="https://learnrecoil.com/?utm_source=docs&utm_medium=organic&utm_campaign=na" target="_blank" rel="noopener noreferrer">Watch the course</a></div></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Learn</div><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/introduction/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/introduction/core-concepts">Core Concepts</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items"><li class="footer__item"><a href="https://twitter.com/recoiljs" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items"><li class="footer__item"><a href="https://github.com/facebookexperimental/Recoil" target="_blank" rel="noopener noreferrer" class="footer__link-item"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items"><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noreferrer noopener" class="footer__link-item"><span>Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noreferrer noopener" class="footer__link-item"><span>Terms<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_wgqa"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_SRtH"><img src="/img/oss_logo.png" alt="Facebook Open Source Logo" class="themedImage_TMUO themedImage--light_4Vu1 footer__logo"><img src="/img/oss_logo.png" alt="Facebook Open Source Logo" class="themedImage_TMUO themedImage--dark_uzRr footer__logo"></a></div><div class="footer__copyright">Copyright © 2023 Facebook, Inc. Built with Docusaurus.</div></div></div></footer></div> <script src="/assets/js/runtime~main.f884d970.js"></script> <script src="/assets/js/main.d618b56e.js"></script> </body> </html>