PageSourceSearch

https://reactfordrupal.com/

html reactfordrupal.com collected 2026-10-06 06:21:42 UTC 42,517 bytes, 1 lines download raw bytes

1<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.22.0"/><meta name="theme-color" content="#F7FAFF"/>
1<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', 'GTM-M8RSCXQ');</script>
1<link rel="icon" href="/favicon-32x32.png?v=a43e8418938b0e6ba0a1dc450c127b33" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=a43e8418938b0e6ba0a1dc450c127b33"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=a43e8418938b0e6ba0a1dc450c127b33"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=a43e8418938b0e6ba0a1dc450c127b33"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=a43e8418938b0e6ba0a1dc450c127b33"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=a43e8418938b0e6ba0a1dc450c127b33"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=a43e8418938b0e6ba0a1dc450c127b33"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=a43e8418938b0e6ba0a1dc450c127b33"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=a43e8418938b0e6ba0a1dc450c127b33"/></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M8RSCXQ" height="0" width="0" style="display: none; visibility: hidden" aria-hidden="true"></iframe></noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><style data-emotion="css-global wn5l7r">html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,footer,header,nav,section{display:block;}h1{font-size:2em;margin:0.67em 0;}figcaption,figure,main{display:block;}figure{margin:1em 40px;}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;-webkit-text-decoration-skip:objects;}abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:inherit;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}dfn{font-style:italic;}mark{background-color:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}audio,video{display:inline-block;}audio:not([controls]){display:none;height:0;}img{border-style:none;}svg:not(:root){overflow:hidden;}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible;}button,select{text-transform:none;}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}fieldset{padding:0.35em 0.75em 0.625em;}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{display:inline-block;vertical-align:baseline;}textarea{overflow:auto;}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details,menu{display:block;}summary{display:-webkit-box;display:-webkit-list-item;display:-ms-list-itembox;display:list-item;}canvas{display:inline-block;}template{display:none;}[hidden]{display:none;}
1html{box-sizing:border-box;}*,*:before,*:after{box-sizing:inherit;}body{font-family:Helvetica,Verdana,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}img{display:block;position:relative;max-width:100%;height:auto;text-align:center;}img:before{display:block;content:'Sorry, the image below is broken :(';}a{color:#121E43;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}a:hover,a:focus{color:#276DE8;cursor:pointer;}svg{-webkit-transition:fill 0.2s ease-in-out;transition:fill 0.2s ease-in-out;}button{border-radius:0;}p,ul,ol,pre,code,blockquote,cite{margin:0;margin-bottom:1rem;padding:0;}p +ul,ul +ul,ol +ul,pre +ul,code +ul,blockquote +ul,cite +ul{margin:2rem 0;}p,li{font-family:Georgia,Times New Roman,serif;}p,pre,code,blockquote,cite{line-height:1.75rem;}li{margin-bottom:0.875rem;}h1,h2,h3,h4,h5,h6{margin:0;font-weight:normal;}h1{font-size:3.207230642437935rem;line-height:3.5rem;}h2{font-size:1.40625rem;margin-top:1rem;margin-bottom:1rem;}h3{font-size:0.8779149519890261rem;}figure{max-width:100%;margin:0;}blockquote{font-size:1.58203125rem;border-left:10px solid #EB62DD;padding-left:1em;}blockquote p{line-height:1.6em;}td,th{border-bottom:1px solid #b7bbc9;padding:0.5em 1em 0.5em 0;text-align:left;}</style><style data-emotion="css dkrb9l">.css-dkrb9l{display:grid;grid-template-columns:[full-start] minmax(1em, 1fr) [main-start] repeat(12, minmax(0, 3rem)) [main-end] minmax(1em, 1fr) [full-end];grid-column-gap:1em;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:1em 0;}.css-dkrb9l a{grid-column:2/6;}.css-dkrb9l div{grid-column:7/14;font-size:0.9em;text-align:right;}</style><header class="css-dkrb9l e1uv7vif0"><style data-emotion="css u2na5p">.css-u2na5p{background:no-repeat 0 0 url(/static/OsioLabs-a8552fbe84b24aac43e8203d5d595462.png);-webkit-background-size:contain;background-size:contain;min-height:50px;text-indent:-999em;width:100%;}</style><a aria-current="page" class="css-u2na5p" href="/">Osio Labs, Inc</a><div>Use React and Drupal to create amazing decoupled applications.</div></header><div><style data-emotion="css ggsdfb">.css-ggsdfb{display:grid;grid-template-columns:[full-start] minmax(1em, 1fr) [main-start] repeat(12, minmax(0, 3rem)) [main-end] minmax(1em, 1fr) [full-end];grid-column-gap:1em;}.css-ggsdfb >*{grid-column:main;}</style><div class="css-ggsdfb"><style data-emotion="css ik2pam">.css-ik2pam{display:inherit;grid-column:full;grid-template-columns:inherit;grid-column-gap:inherit;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
1background:no-repeat url(/static/rfd-logo-93e9dd2ff84b58714fc161e41bf098fd.svg) center 2em #121E43;color:#fff;font-size:1.4em;min-height:70vh;padding:17em 0 2em 0;text-align:center;}.css-ik2pam >*{grid-column:main;}.css-ik2pam div{grid-column:3/13;}.css-ik2pam div.cta{grid-column:2/14;}.css-ik2pam div.cta a{font-size:0.86em;margin:1em 0;width:100%;}@media (min-width: 600px){.css-ik2pam div.cta a{margin:0 1em;width:auto;}}.css-ik2pam h1{margin-bottom:0em;}.css-ik2pam h1 span{background:no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NSIgaGVpZ2h0PSI3OCIgdmlld0JveD0iMCAwIDg1IDc4Ij4KICA8ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDU0LjI4NCAzOC4wMikiPgogICAgPHBhdGggZD0iTTI0LjcwMTg2NzksMjQuNzAxODY3OSBMNDkuNDAzNzM1OSwyNC43MDE4Njc5IEw0OS40MDM3MzU5LDc0LjEwNTYwMzggTDI0LjcwMTg2NzksNzQuMTA1NjAzOCBDMTEuMDU5NDAzLDc0LjEwNTYwMzggMS42NzA3MjAxZS0xNSw2My4wNDYyMDA4IDAsNDkuNDAzNzM1OSBMMCw0OS40MDM3MzU5IEMtMS42NzA3MjAxZS0xNSwzNS43NjEyNzA5IDExLjA1OTQwMywyNC43MDE4Njc5IDI0LjcwMTg2NzksMjQuNzAxODY3OSBaIi8+CiAgICA8cGF0aCBkPSJNNDkuNDAzNzM1OSwwIEw0OS40MDM3MzU5LDAgQzYzLjA0NjIwMDgsLTIuNTA2MDgwMTZlLTE1IDc0LjEwNTYwMzgsMTEuMDU5NDAzIDc0LjEwNTYwMzgsMjQuNzAxODY3OSBMNzQuMTA1NjAzOCw3NC4xMDU2MDM4IEwyNC43MDE4Njc5LDc0LjEwNTYwMzggTDI0LjcwMTg2NzksMjQuNzAxODY3OSBMMjQuNzAxODY3OSwyNC43MDE4Njc5IEMyNC43MDE4Njc5LDExLjA1OTQwMyAzNS43NjEyNzA5LDIuNTA2MDgwMTZlLTE1IDQ5LjQwMzczNTksMCBaIi8+CiAgPC9nPgo8L3N2Zz4K) center center;color:#EB62DD;display:block;font-size:2em;padding:0.5em;text-indent:-999em;}@media (min-width: 600px){.css-ik2pam h1 span{display:inline-block;}}.css-ik2pam p{font-family:Helvetica,Verdana,sans-serif;margin-bottom:2em;}</style><section class="css-ik2pam"><div><h1>
1React <span>❤</span> Drupal</h1><p>React and Drupal can be used together to create amazing digital experiences. Knowing where to start and how to leverage the strengths of both can be challenging though. This page is a collection of the best articles, videos, and presentations we&#x27;ve found on the topic.</p></div><div class="cta"><style data-emotion="css 19mqf4w">.css-19mqf4w{background-color:#414b69;border:0;border-radius:5px;color:#fff;display:inline-block;font-weight:bold;margin:0 auto;max-width:400px;padding:1em;-webkit-text-decoration:none;text-decoration:none;background-color:#276DE8;color:#fff;}.css-19mqf4w:hover{background-color:#EB62DD;cursor:pointer;}.css-19mqf4w:hover{background-color:#67DAF9;}</style><a class="css-19mqf4w">Sign up for the latest news</a><style data-emotion="css 6zhwci">.css-6zhwci{background-color:#414b69;border:0;border-radius:5px;color:#fff;display:inline-block;font-weight:bold;margin:0 auto;max-width:400px;padding:1em;-webkit-text-decoration:none;text-decoration:none;}.css-6zhwci:hover{background-color:#EB62DD;cursor:pointer;}</style><a class="css-6zhwci" href="/react-and-drupal-series">Get started using React and Drupal</a></div></section><style data-emotion="css 5ld9ei">.css-5ld9ei{font-size:1.111111111111111rem;margin:4rem 0 1rem 0;}</style><section class="css-5ld9ei"><p>API-first, or “decoupled”, architecture is quickly becoming the most popular way to create world class digital experiences. The pattern gives developers the flexibility to rapidly innovate, while ensuring future-proof builds that don’t require re-creating the entire CMS for new features. API-first ar
1chitectures started to become mainstream with the publication of<!-- --> <a href="https://www.programmableweb.com/news/cope-create-once-publish-everywhere/2009/10/13">NPR’s Create Once, Publish Everywhere (COPE) series of articles</a>. Many other organizations<!-- --> <a href="https://www.lullabot.com/podcasts/insert-content-here/daniel-jacobson-on-nprs-cope-and-content-apis">including Netflix</a> <!-- -->have seen great benefits from a decoupled approach.</p><p>Sound good? React, a library for creating beautiful user experiences, and Drupal, an API-first content management system, make a great match. Experiences that users love, created using declarative, component based, and flexible JavaScript that front-end developers love to write. And a powerful, API-first CMS with endless flexibility to define robust content workflows and create joyful editorial experiences that allows your back-end developers to focus on improving your business and not reinventing the wheel.</p><p>We come across a lot of great articles on creating breakthrough experiences with React and Drupal. This page is a continuously updated list of our favorite articles that help explain how to get started with both, and then how to combine their powers to create something truly amazing. Have fun!</p></section><style data-emotion="css 1ykd1l1">.css-1ykd1l1{display:inherit;grid-column:full;grid-template-columns:inherit;grid-column-gap:inherit;background-color:#663399;}.css-1ykd1l1 >*{grid-column:main;}.css-1ykd1l1 div.left,.css-1ykd1l1 div.right{grid-column:full;padding:3em;text-align:center;}.css-1ykd1l1 div.left{background-color:#67DAF9;}.css-1ykd1l1 div.right{color:#fff;}.css-1ykd1l1 div.right a{background-color:white;color:#663399;border:1px solid #fff;}.css-1ykd1l1 div.right a:hover{background-color:#bfc3ff;}@media (min-width: 1000px){.css-1ykd1l1 div.left{grid-column:2/8;text-align:center;margin-left:-999em;padding:3em 6em 3em 992em;-webkit-transform:skewX(-6deg);-moz-transform:skewX(-6deg);-ms-transform:skewX(-6deg);transform:skewX(-6deg);}.css-1ykd1l1 div.left *{-webkit-transform:skewX(6deg);-moz-transform:skewX(6deg);-ms-transform:skewX(6deg);transform:skewX(6deg);}.css-1ykd1l1 div.right{grid-column:8/14;margin-right:-6em;padding:3em 0em 3em 6em;text-align:center;}.css-1ykd1l1 a{text-align:center;width:85%;}}</style><section class="css-1ykd1l1"><div class="left"><p>Learn everything you need to know to get started using React on the front-end and Drupal on the backend with this collection of 15 hands-on tutorials.</p><a class="css-6zhwci" href="/react-and-drupal-series">Learn React &amp; Drupal</a></div><div class="right"><p><strong>Gatsby</strong> is a blazing fast React application generator that integrates well with Drupal. It&#x27;s a great way to learn React &amp; GraphQL while working with real world data.</p><a href="https://gatsbyguides.com" class="css-6zhwci">Learn Gatsby &amp; Drupal</a></div></section><style data-emotion="css 11mbus">.css-11mbus{margin:1rem 0;}.css-11mbus h2{background-repeat:no-repeat;-webkit-background-position:left center;background-position:left center;padding-left:60px;line-height:50px;}.css-11mbus p,.css-11mbus ol{margin:0 0 2em 0;}@media (min-width: 600px){.css-11mbus p,.css-11mbus ol{margin:0 0 2em 60px;}}</style><section class="css-11mbus"><style data-emotion="css 13snegq">.css-13snegq{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0MSIgdmlld0JveD0iMCAwIDQ0IDQxIj4KICA8ZyBmaWxsPSJub25lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMyAtMikiPgogICAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTAuMTQ3MjY1NjI1LDIyLjQxMjEwOTQgQzAuMTQ3MjY1NjI1LDI2LjE2NTAzOTEgMy44MTE5MTQwNiwyOS42NjgzNTk0IDkuNTg5MjU3ODEsMzEuNjQzMTY0MSBDOC40MzU1NDY4OCwzNy40NTExNzE5IDkuMzgyNjE3MTksNDIuMTMyNjE3MiAxMi41NDU1MDc4LDQzLjk1NjY0MDYgQzE1Ljc5NjQ4NDQsNDUuODMxNjQwNiAyMC42Mzk4NDM3LDQ0LjUzMzc4OTEgMjUuMjM2OTE0MSw0MC41MTUyMzQ0IEMyOS43MTc5Njg4LDQ0LjM3MTQ4NDQgMzQuMjQ2Njc5Nyw0NS44ODkwNjI1IDM3LjQwNjgzNTksNDQuMDU5NzY1NiBDNDAuNjU0ODgyOCw0Mi4xNzk0OTIyIDQxLjY0MjU3ODEsMzcuMTgwNjY0MSA0MC40NTcwMzEzLDMxLjE5MTIxMDkgQzQ2LjQ3NDYwOTQsMjkuMjAxNzU3OCA0OS44NDA2MjUsMjYuMjE0NDUzMSA0OS44NDA2MjUsMjIuNDEyMTA5NCBDNDkuODQwNjI1LDE4Ljc0NjI4OTEgNDYuMTY5MzM1OSwxNS4
11NzUgNDAuNDY5NzI2NiwxMy42MTI4OTA2IEM0MS43NDYwOTM4LDcuMzc1OTc2NTYgNDAuNjY0NjQ4NCwyLjgwODIwMzEyIDM3LjM3MDcwMzEsMC45MDg3ODkwNjIgQzM0LjE5NTExNzIsLTAuOTIyNDYwOTM4IDI5LjYxMzY3MTksMC42NzM2MzI4MTIgMjUuMDY2Nzk2OSw0LjYzMDY2NDA2IEMyMC4zMzYzMjgxLDAuNDMwNjY0MDYzIDE1LjgwMDE5NTMsLTAuODUxNTYyNSAxMi41MDk3NjU2LDEuMDUzMTI1IEM5LjMzNzEwOTM3LDIuODg5NjQ4NDQgOC40MzE4MzU5NCw3LjY1NjI1IDkuNTg5MjU3ODEsMTMuNTcxNjc5NyBDNC4wMDY4MzU5NCwxNS41MTc5Njg3IDAuMTQ3MjY1NjI1LDE4Ljc2MTEzMjggMC4xNDcyNjU2MjUsMjIuNDEyMTA5NCBaIi8+CiAgICA8cGF0aCBmaWxsPSIjMDAwIiBkPSJNMzkuMjYyNjk1MywxNS41NjEzMjgxIEMzOC43OTI5NjI2LDE1LjQwMDIwMDcgMzguMzE5MjQ0NiwxNS4yNTA5MzQ2IDM3Ljg0MTk5MjIsMTUuMTEzNjcxOSBDMzcuOTIxMTM3OCwxNC43OTIwNzE0IDM3Ljk5NDMyNzQsMTQuNDY5MDM0NCAzOC4wNjE1MjM0LDE0LjE0NDcyNjYgQzM5LjEzNjkxNDEsOC45MjQ0MTQwNiAzOC40MzM3ODkxLDQuNzE4OTQ1MzEgMzYuMDMyNjE3MiwzLjMzNDU3MDMxIEMzMy43MzA0Njg3LDIuMDA2ODM1OTQgMjkuOTY1MjM0NCwzLjM5MTIxMDk0IDI2LjE2MjUsNi43MDAzOTA2MyBDMjUuNzg3Nzg5Nyw3LjAyNzIxNTQ1IDI1LjQyMTM5NjcsNy4zNjM0NTU1NSAyNS4wNjM2NzE5LDcuNzA4Nzg5MDYgQzI0LjgyNDExMzMsNy40NzkxNjI3NCAyNC41ODAzMjE1LDcuMjUzOTkzOSAyNC4zMzI0MjE5LDcuMDMzMzk4NDQgQzIwLjM0NzA3MDMsMy40OTQ3MjY1NiAxNi4zNTIzNDM3LDIuMDAzNzEwOTQgMTMuOTUzNzEwOSwzLjM5MjE4NzUgQzExLjY1MzcxMDksNC43MjM2MzI4MSAxMC45NzI0NjA5LDguNjc3MzQzNzUgMTEuOTQwNjI1LDEzLjYyNDYwOTQgQzEyLjAzNjk1MDYsMTQuMTE0NTMzIDEyLjE0NTcwOTYsMTQuNjAxOTI5OSAxMi4yNjY3OTY5LDE1LjA4NjMyODEgQzExLjcwMTU2MjUsMTUuMjQ2ODc1IDExLjE1NTY2NDEsMTUuNDE3OTY4NyAxMC42MzMzOTg0LDE1LjYgQzUuOTYxMTMyODEsMTcuMjI4OTA2MiAyLjk3NzE0ODQ0LDE5Ljc4MjAzMTIgMi45NzcxNDg0NCwyMi40MzAwNzgxIEMyLjk3NzE0ODQ0LDI1LjE2NTIzNDQgNi4xODAyNzM0NCwyNy45MDg1OTM3IDExLjA0NzA3MDMsMjkuNTcxODc1IEMxMS40NDE2OTU3LDI5LjcwNjExOTIgMTEuODM5NjA1NywyOS44MzA1MDY4IDEyLjI0MDQyOTcsMjkuOTQ0OTIxOSBDMTIuMTEwMjE1MiwzMC40NjY3ODUyIDExLjk5NDYxMDIsMzAuOTkyMTg1NiAxMS44OTM3NSwzMS41MjA1MDc4IEMxMC45NzA3MDMxLDM2LjM4MTgzNTkgMTEuNjkxNjAxNiw0MC4yNDE3OTY5IDEzLjk4NTU0NjksNDEuNTY1MDM5MSBDMTYuMzU0ODgyOCw0Mi45MzEyNSAyMC4zMzE0NDUzLDQxLjUyNjk1MzEgMjQuMjAzNzEwOSwzOC4xNDIxODc1IEMyNC41MDk3NjU2LDM3Ljg3NDYwOTQgMjQuODE2OTkyMiwzNy41OTA4MjAzIDI1LjEyNDYwOTQsMzcuMjkzMzU5NCBDMjUuNTEyMDc0NiwzNy42NjcxOTkxIDI1LjkwOTg4NTMsMzguMDMwMTY1NiAyNi4zMTc1NzgxLDM4LjM4MTgzNTkgQzMwLjA2ODM1OTQsNDEuNjA5Mzc1IDMzLjc3MjY1NjIsNDIuOTEyNjk1MyAzNi4wNjQ2NDg0LDQxLjU4NTkzNzUgQzM4LjQzMTgzNTksNDAuMjE1NjI1IDM5LjIwMDk3NjYsMzYuMDY4OTQ1MyAzOC4yMDIxNDg0LDMxLjAyMzgyODEgQzM4LjEyNTk3NjYsMzAuNjM4NDc2NiAzOC4wMzcxMDk0LDMwLjI0NDkyMTkgMzcuOTM3NSwyOS44NDQxNDA2IEMzOC4yMTY3OTY5LDI5Ljc2MTcxODcgMzguNDkwODIwMywyOS42NzY1NjI1IDM4Ljc1ODIwMzEsMjkuNTg3ODkwNiBDNDMuODE3NTc4MSwyNy45MTE3MTg3IDQ3LjEwOTE3OTcsMjUuMjAxNzU3OCA0Ny4xMDkxNzk3LDIyLjQzMDA3ODEgQzQ3LjEwOTE3OTcsMTkuNzcyNDYwOSA0NC4wMjkxMDE2LDE3LjIwMjE0ODQgMzkuMjYyNjk1MywxNS41NjEzMjgxIFoiLz4KICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0zNy40MjQwMjM0LDI4LjAzMDI3MzQgQzM2Ljg2NTQyOTcsMjYuMjYyMTA5NCAzNi4xMTE1MjM0LDI0LjM4MTgzNTkgMzUuMTg5MjU3OCwyMi40Mzk0NTMxIEMzNi4wNjk1MzEzLDIwLjU0Mjk2ODcgMzYuNzk0MTQwNiwxOC42ODY5MTQxIDM3LjMzNzEwOTQsMTYuOTMwMDc4MSBDMzcuNzg4NDc2NiwxNy4wNjA5Mzc1IDM4LjIyNjc1NzgsMTcuMTk4NjMyOCAzOC42NDkwMjM0LDE3LjM0NDE0MDYgQzQyLjczMzAwNzgsMTguNzQ5ODA0NyA0NS4yMjQwMjM0LDIwLjgyODUxNTYgNDUuMjI0MDIzNCwyMi40MzAwNzgxIEM0NS4yMjQwMjM0LDI0LjEzNjEzMjggNDIuNTMzNTkzOCwyNi4zNTA5NzY2IDM4LjE2NTQyOTcsMjcuNzk4NDM3NSBDMzcuOTI0MDIzNCwyNy44NzgzMjAzIDM3LjY3NjM2NzIsMjcuOTU1NDY4NyAzNy40MjQwMjM0LDI4LjAzMDI3MzQgWiBNMzYuNTY0ODQzOCwzNy4yMTQ2NDg0IEMzNi4zMDE5NTMxLDM4LjYzMTQ0NTMgMzUuNzczNDM3NSwzOS41NzU5NzY2IDM1LjExOTkyMTksMzkuOTU0Mjk2OSBDMzMuNzI5MTAxNiw0MC43NTkzNzUgMzAuNzU0Njg3NSwzOS43MTI4OTA2IDI3LjU0NzI2NTYsMzYuOTUyNzM0NCBDMjcuMTc5NDkyMiwzNi42MzYzMjgxIDI2LjgwODk4NDQsMzYuMjk4NDM3NSAyNi40Mzc1LDM1Ljk0MTAxNTYgQzI3LjY4MTA1NDcsMzQuNTgwODU5NCAyOC45MjM4MjgxLDMyLjk5OTYwOTQgMzAuMTM2NzE4OCwzMS4yNDM3NSBDMzIuMjcwMzEyNSwzMS4wNTQ0OTIyIDM0LjI4NTkzNzUsMzAuNzQ0OTIxOSAzNi4xMTM4NjcyLDMwLjMyMjQ2MDkgQzM2LjIwMzcxMDksMzAuNjg1NzQyMiAzNi4yODM3ODkxLDMxLjA0MTc5NjkgMzYuMzUyNzM0NCwzMS4zOTAwMzkxIEMzNi43OTQzMzU5LDMzLjYyMDg5ODQgMzYuODU3NDIxOSwzNS42Mzc4OTA2IDM2LjU2NDg0MzgsMzcuMjE0NjQ4NCBaIE0xNC45Mjc1MzkxLDM5LjkzMTY0MDYgQzEzLjUzNTM1MTYsMzkuMTI4OTA2MiAxMi45NTY4MzU5LDM2LjAyOTI5NjkgMTMuNzQ2MDkzNywzMS44NzIwNzAzIEMxMy44Mzk5NDkyLDMxLjM4MDc3MzUgMTMuOTQ3NDEyNCwzMC44OTIxNzQyIDE0LjA2ODM1OTQsMzAuNDA2ODM1OSBDMTUuODc1OTc2NiwzMC44MDY2NDA2IDE3Ljg3Njk1MzEsMzEuMDk0MzM1OSAyMC4wMTU2MjUsMzEuMjY3NzczNCBDMjEuMjM2NTIzNCwzMi45ODU5Mzc1IDIyLjUxNTIzNDQsMzQuNTY1MjM0NCAyMy44MDM5MDYyLDM1Ljk0ODI0MjIgQzIzLjUzMDAyOTIsMzYuMjEzMTc2NSAyMy4yNDk2NzA4LDM2LjQ3MTMyNzYgMjIuOTYzMDg1OSwzNi43MjI0NjA5IEMyMS4yNTA3ODEzLDM4LjIxOTMzNTkgMTkuNTM0OTYwOSwzOS4yODEwNTQ3IDE4LjAyMjg1MTYsMzkuODE1MjM0NCBDMTYuNjYzODY3Miw0MC4yOTUxMTcyIDE1LjU4MTY0MDYsNDAuMzA4Nzg5MSAxNC45Mjc1MzkxLDM5LjkzMTY0MDYgWiBNNi41MDk1NzAzMSwyNS4wNTM1MT
1U2IEM1LjQxNTAzOTA2LDI0LjExNjAxNTYgNC44NjIzMDQ2OSwyMy4xODUzNTE2IDQuODYyMzA0NjksMjIuNDMwMDc4MSBDNC44NjIzMDQ2OSwyMC44MjMyNDIyIDcuMjU4MjAzMTIsMTguNzczNDM3NSAxMS4yNTQxMDE2LDE3LjM4MDI3MzQgQzExLjc1NTY0NDQsMTcuMjA2MTc1MyAxMi4yNjIxNzY0LDE3LjA0Njc5NzEgMTIuNzczMDQ2OSwxNi45MDIzNDM4IEMxMy4zMjUzOTA2LDE4LjY5ODYzMjggMTQuMDQ5ODA0NywyMC41NzY3NTc4IDE0LjkyNDAyMzQsMjIuNDc1OTc2NiBDMTQuMDM4NDc2NiwyNC40MDM1MTU2IDEzLjMwMzcxMDksMjYuMzExNTIzNCAxMi43NDYyODkxLDI4LjEyODkwNjIgQzEyLjM4MDM5ODcsMjguMDI0MTc4MiAxMi4wMTcxMzgsMjcuOTEwNDcyIDExLjY1NjgzNTksMjcuNzg3ODkwNiBDOS41MDQ4ODI4MSwyNy4wNTIzNDM3IDcuNzI3NzM0MzcsMjYuMDk2NDg0NCA2LjUwOTU3MDMxLDI1LjA1MzUxNTYgWiBNMTQuODk4MjQyMiw1LjAyMzgyODEyIEMxNi4zNzQ4MDQ3LDQuMTY5MTQwNjIgMTkuNjM5NDUzMSw1LjM4Nzg5MDYyIDIzLjA4MDQ2ODcsOC40NDMxNjQwNiBDMjMuMzAwMzkwNiw4LjYzODQ3NjU2IDIzLjUyMTI4OTEsOC44NDI5Njg3NSAyMy43NDI1NzgxLDkuMDU0NDkyMTkgQzIyLjQ2MDU0NjksMTAuNDMxMjUgMjEuMTkzNTU0NywxMS45OTg2MzI4IDE5Ljk4MzIwMzEsMTMuNzA2ODM1OSBDMTcuOTA3NjE3MiwxMy44OTkyMTg4IDE1LjkyMDcwMzEsMTQuMjA4MjAzMSAxNC4wOTQxNDA2LDE0LjYyMjA3MDMgQzEzLjk4MTYyNTcsMTQuMTcxNDM1NSAxMy44ODA0ODY4LDEzLjcxODAzNjMgMTMuNzkwODIwMywxMy4yNjIzMDQ3IEMxMi45NjEzMjgxLDkuMDIzNjMyODEgMTMuNTEyMTA5NCw1LjgyNjE3MTg3IDE0Ljg5ODI0MjIsNS4wMjM4MjgxMiBaIE0zMS40ODUzNTE2LDE1Ljc1NjA1NDcgQzMyLjg5MzU1NDcsMTUuOTMzNzg5MSAzNC4yNDI1NzgxLDE2LjE3MDExNzIgMzUuNTA5Mzc1LDE2LjQ1OTM3NSBDMzUuMTI5MTAxNiwxNy42NzgzMjAzIDM0LjY1NTA3ODEsMTguOTUyOTI5NyAzNC4wOTY4NzUsMjAuMjU5NTcwMyBDMzMuNjg5MDI2OCwxOS40ODU3MDExIDMzLjI2NTc2NTMsMTguNzIwMDUzNyAzMi44MjczNDM3LDE3Ljk2MzA4NTkgQzMyLjM5NTkxMzUsMTcuMjE3ODU3NCAzMS45NDg0NzksMTYuNDgyMDA5NiAzMS40ODUzNTE2LDE1Ljc1NjA1NDcgWiBNMjcuNjYxMzI4MSwxMy41MzY5MTQxIEMyNS45MjM2MzQ5LDEzLjQ1NDgwMDggMjQuMTgzMDQyNCwxMy40NTQ0MDk4IDIyLjQ0NTMxMjUsMTMuNTM1NzQyMiBDMjMuMzAyNzM0NCwxMi40MDUwNzgxIDI0LjE4MTA1NDcsMTEuMzU0Njg3NSAyNS4wNjQyNTc4LDEwLjQwMTc1NzggQzI1LjkzMzc4OTEsMTEuMzQzNzUgMjYuODA0Njg3NSwxMi4zOTU3MDMxIDI3LjY2MTMyODEsMTMuNTM2OTE0MSBaIE0xNi4wMDU2NjQxLDIwLjI1ODIwMzEgQzE1LjQ1NjY0MDYsMTguOTU2MDU0NyAxNC45ODY5MTQxLDE3LjY3NTc4MTMgMTQuNjAzMzIwMywxNi40Mzk0NTMxIEMxNS44NjI1LDE2LjE1NzYxNzIgMTcuMjA1MjczNCwxNS45MjczNDM4IDE4LjYwNDI5NjksMTUuNzUyNTM5MSBDMTguMTM1OTc5MiwxNi40ODI5OTMxIDE3LjY4NDg3ODMsMTcuMjI0MzQzMiAxNy4yNTEzNjcyLDE3Ljk3NTk3NjYgQzE2LjgxODQzNDgsMTguNzI2OTI0MiAxNi40MDMwODczLDE5LjQ4Nzg3MzYgMTYuMDA1NjY0MSwyMC4yNTgyMDMxIFogTTE0LjU3NzM0MzcsMjguNTg4MjgxMiBDMTQuOTY2OTkyMiwyNy4zMzAwNzgxIDE1LjQ0NzA3MDMsMjYuMDIyMjY1NiAxNi4wMDc4MTI1LDI0LjY5MjE4NzUgQzE2LjQwNjkxMTIsMjUuNDYzMDg4IDE2LjgyNDA4MzgsMjYuMjI0NDk2NCAxNy4yNTg5ODQ0LDI2Ljk3NTc4MTIgQzE3LjcwMjc1NjEsMjcuNzQyMTUzOSAxOC4xNjQ3MzYzLDI4LjQ5NzgzNzMgMTguNjQ0NTMxMiwyOS4yNDIxODc1IEMxNy4xOTkyMTg3LDI5LjA4MDg1OTQgMTUuODM2MTMyOCwyOC44NjIzMDQ3IDE0LjU3NzM0MzcsMjguNTg4MjgxMiBaIE0yNS4xMTY0MDYyLDM0LjU5MTYwMTYgQzI0LjIyMjg1MTYsMzMuNjI3MzQzNyAyMy4zMzE2NDA2LDMyLjU2MDkzNzUgMjIuNDYxMTMyOCwzMS40MTM4NjcyIEMyMy4zMDYwNTQ3LDMxLjQ0NzA3MDMgMjQuMTY3NTc4MSwzMS40NjM4NjcyIDI1LjA0MzE2NDEsMzEuNDYzODY3MiBDMjUuOTQyNzczNCwzMS40NjM4NjcyIDI2LjgzMjAzMTIsMzEuNDQzNzUgMjcuNzA3MjI2NiwzMS40MDQ2ODc1IEMyNi44NDc4NTE2LDMyLjU3MjY1NjIgMjUuOTgwMDc4MSwzMy42NDA2MjUgMjUuMTE2NDA2MiwzNC41OTE2MDE2IFogTTM1LjU5Njg3NSwyOC41MDY2NDA2IEMzNC4zMTcxODc1LDI4Ljc5ODYzMjggMzIuOTM1NzQyMiwyOS4wMzM3ODkxIDMxLjQ4MDA3ODEsMjkuMjA4Mzk4NCBDMzEuOTQ2NTUzLDI4LjQ2ODg4OTQgMzIuMzk4MjcsMjcuNzIwMTczNiAzMi44MzQ5NjA5LDI2Ljk2MjY5NTMgQzMzLjI3ODg4MzksMjYuMTkyODYwNSAzMy43MDU2MTcyLDI1LjQxMzI0MDMgMzQuMTE0ODQzOCwyNC42MjQ0MTQxIEMzNC43MDQ2ODc1LDI1Ljk2ODk0NTMgMzUuMjAxOTUzMSwyNy4yNjk3MjY2IDM1LjU5Njg3NSwyOC41MDY2NDA2IFogTTI5LjA4NDU3MDMsMjkuNDM2OTE0MSBDMjcuNzc1MTk1MywyOS41MzA0Njg4IDI2LjQyMjA3MDMsMjkuNTc4NzEwOSAyNS4wNDMxNjQxLDI5LjU3ODcxMDkgQzIzLjY2OTkyMTksMjkuNTc4NzEwOSAyMi4zMzM5ODQ0LDI5LjUzNTkzNzUgMjEuMDQ3NDYwOSwyOS40NTI1MzkxIEMyMC4yODU2MzIxLDI4LjMzOTcxNCAxOS41NjYxNzI0LDI3LjE5ODQ2ODMgMTguODkwNjI1LDI2LjAzMTI1IEMxOC4yMTgyMzUyLDI0Ljg3MDIyNDUgMTcuNTkwMTc4NSwyMy42ODQwODMzIDE3LjAwNzgxMjUsMjIuNDc1MzkwNiBDMTcuNTg4Njk3MywyMS4yNjYzMzU4IDE4LjIxNDg1NjEsMjAuMDc5NTU5MyAxOC44ODQ5NjA5LDE4LjkxNzU3ODEgQzE5LjU1NDg1NTYsMTcuNzU1NzQwMSAyMC4yNjg2NTEzLDE2LjYxOTM3NDIgMjEuMDI0ODA0NywxNS41MTEzMjgxIEMyMi4zMzczMDQ3LDE1LjQxMjEwOTQgMjMuNjgzMDA3OCwxNS4zNjAxNTYyIDI1LjA0MzM1OTQsMTUuMzYwMTU2MiBDMjYuNDA5NzY1NiwxNS4zNjAxNTYyIDI3Ljc1NzIyNjYsMTUuNDEyNSAyOS4wNjkzMzU5LDE1LjUxMjUgQzI5LjgxNzg0MSwxNi42MTg4NDEgMzAuNTI3MDcxNCwxNy43NTEyNTE0IDMxLjE5NTcwMzEsMTguOTA3NjE3MiBDMzEuODY4MTEyMywyMC4wNjcwMTMxIDMyLjUwMjYyNzUsMjEuMjQ3OTc2MiAzMy4wOTgyNDIyLDIyLjQ0ODYzMjggQzMyLjUwODc1NDMsMjMuNjYxNTIyMiAzMS44NzYyNTcxLDI0Ljg1MzAzMjYgMzEuMjAxOTUzMSwyNi4wMjA4OTg0IEMzMC41MzMyNDIyLDI3LjE4MjIxOCAyOS44MjcxMzk5LDI4LjMyMTQ5MTkgMjkuMDg0NTcwMywyOS40MzY5MTQxIFogTTM2LjIxNTAzOTEsMTMuNzY0MjU3OCBDMzYuMTU0MTc5OCwxNC4wNTc4NzY0IDM2LjA4ODAyMzIsMTQuMzUwMzcyIDM2LjAxNjYwMTYsMTQuNjQxNjAxNiBDMzQuMTg1NzQyMiwxNC4yMTkxNDA2IDMyLjE5NzQ2MDksMTMuOTA0Njg3NSAzMC4xMTU4MjAzLDEzLjcwOTM3NSBDMjguOTAzMTI1LDExLjk4MjYxNzIgMjcuNjQ2Njc5NywxMC40MTI1IDI2LjM4NTM1MTYsOS4wNTM1MT
1U2MiBDMjYuNzE1ODcxNyw4LjczNDg3MjY0IDI3LjA1NDI1NzQsOC40MjQ0OTA0MiAyNy40MDAxOTUzLDguMTIyNjU2MjUgQzMwLjY1ODM5ODQsNS4yODcxMDkzNyAzMy43MDM1MTU2LDQuMTY3NTc4MTIgMzUuMDkxMDE1Niw0Ljk2Nzc3MzQ0IEMzNi41Njg3NSw1LjgyMDExNzE5IDM3LjE0MzU1NDcsOS4yNTcwMzEyNSAzNi4yMTUwMzkxLDEzLjc2NDI1NzggWiIvPgogICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTI1LjA0MzE2NDEsMTguNDg5MjU3OCBDMjcuMjE5NzI2NiwxOC40ODkyNTc4IDI4Ljk4Mzk4NDQsMjAuMjUzNzEwOSAyOC45ODM5ODQ0LDIyLjQzMDA3ODEgQzI4Ljk4Mzk4NDQsMjQuNjA2NjQwNiAyNy4yMTk3MjY2LDI2LjM3MTA5MzcgMjUuMDQzMTY0MSwyNi4zNzEwOTM3IEMyMi44NjY3OTY5LDI2LjM3MTA5MzcgMjEuMTAyMzQzNywyNC42MDY2NDA2IDIxLjEwMjM0MzcsMjIuNDMwMDc4MSBDMjEuMTAyMzQzNywyMC4yNTM3MTA5IDIyLjg2Njc5NjksMTguNDg5MjU3OCAyNS4wNDMxNjQxLDE4LjQ4OTI1NzgiLz4KICA8L2c+Cjwvc3ZnPgo=);}</style><h2 class="css-13snegq">React</h2><p><a href="https://reactjs.org">React</a> is a JavaScript library for building user interfaces.</p><p>Started in 2013, React has quickly grown in popularity due to its declarative style and lack of assumptions about your technology stack. In the last few years, a large ecosystem has grown around React. This includes high quality libraries, conferences, and increased demand for developers with React skills.</p><p><strong>Start here:</strong> <a href="/tutorials/react-for-drupal-developers">An Introduction to React for Drupal Developers</a></p><ol><li><a href="https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76">Yes, React is taking over front-end development. The question is why.</a></li><li><a href="http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome">Removing User Interface Complexity, or Why React is Awesome</a></li><li><a href="https://medium.freecodecamp.org/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1">A Study Plan To Cure JavaScript Fatigue</a></li><li><a href="https://kentcdodds.com/blog/javascript-to-know-for-react">JavaScript to Know for React</a></li><li><a href="https://www.lullabot.com/articles/how-to-learn-react">How to Learn React</a></li><li><a href="https://reactjs.org/tutorial/tutorial.html">Tutorial: Intro To React</a></li><li><a href="https://www.javascriptstuff.com/">JavaScript Stuff</a></li><li><a href="https://jscomplete.com/learn/react-beyond-basics/react-fundamentals">All the React Fundamentals in One Place</a></li><li><a href="https://tylermcginnis.com/courses/react-fundamentals/"><style data-emotion="css 1dbu2to">.css-1dbu2to{border-left:8px solid #000;color:#fff;display:inline-block;font-family:Helvetica,Verdana,sans-serif;font-size:0.8em;font-weight:bold;margin-right:6px;padding:2px 6px;background:#67DAF9;border-color:#346d7d;}</style><span type="course" class="css-1dbu2to egl3k6j0">course</span>React Fundamentals</a></li><li><a href="https://hackernoon.com/the-react-state-museum-a278c726315">React State Museum</a></li><li><a href="https://www.robinwieruch.de/react-libraries">React Libraries in 2020</a></li><li><a href="https://github.com/facebook/react-devtools">React Developer Tools</a></li><li><a href="https://daveceddia.com/ajax-requests-in-react/">AJAX Requests in React: How and Where to Fetch Data</a></li></ol></section><section class="css-11mbus"><style data-emotion="css jhj6dy">.css-jhj6dy{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDUiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCA0NSA1MCI+CiAgPGRlZnM+CiAgICA8cG9seWdvbiBpZD0iZHJ1cGFsLTgtYmxhY2stYSIgcG9pbnRzPSIuMDA5IC4xMzggNDQuMTYxIC4xMzggNDQuMTYxIDQ5Ljk5MSAuMDA5IDQ5Ljk5MSIvPgogICAgPHBvbHlnb24gaWQ9ImRydXBhbC04LWJsYWNrLWMiIHBvaW50cz0iLjAwOSAuMTM4IDQ0LjE2MSAuMTM4IDQ0LjE2MSA0OS45OTEgLjAwOSA0OS45OTEiLz4KICA8L2RlZnM+CiAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxtYXNrIGlkPSJkcnVwYWwtOC1ibGFjay1iIiBmaWxsPSIjZmZmIj4KICAgICAgPHVzZSB4bGluazpocmVmPSIjZHJ1cGFsLTgtYmxhY2stYSIvPgogICAgPC9tYXNrPgogICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTIwLjc3ODUwNzUgMzEuMDFDMTYuNDMxMzQzMyAzMS4wMSAxMi45MDgwNTk3IDM0LjUzMzI4MzYgMTIuOTA4MDU5NyAzOC44NzkyNTM3IDEyLjkwODA1OTcgNDMuMjI1MDc0NiAxNi40MzEzNDMzIDQ2Ljc0ODk1NTIgMjAuNzc4NTA3NSA0Ni43NDg5NTUyIDI1LjEyMzQzMjggNDYuNzQ4OTU1MiAyOC42NDY3MTY0IDQzLjIyNTA3NDYgMjguNjQ2NzE2NCAzOC44NzkyNTM3IDI4LjY0NjcxNjQgMzQuNTMzMjgzNiAyNS4xMjM0MzI4IDMxLjAxIDIwLjc3ODUwNzUgMzEuMDFNMzQuMzMwNDQ3OCAzOC44NzkyNTM3QzM0LjMzMDQ0NzggNDMuNDg0Nzc2MSAzMi4wMzA0NDc4IDQ3LjU1MTQ5MjUgMjguNTE5NDAzIDUwIDM1LjAwOTI1MzcgNDcuOTk3NjExOSA0MC4zNzkxMDQ1IDQzLjExOTU1MjIgNDIuNzgyOTg1MSAzNy4yMTA3NDYzIDQ2LjEwNjg2
1NTcgMjkuMDM3NjExOSA0My4wMTIwODk2IDIyLjg4NTIyMzkgMzcuODE2MTE5NCAxNy4zMDc3NjEyIDM3Ljk3NDE3OTEgMTguMDI5ODUwNyAzOC4wNjMxMzQzIDE4Ljc3ODM1ODIgMzguMDYzMTM0MyAxOS41NDc2MTE5IDM4LjA2MzEzNDMgMjQuMjc3NzYxMiAzNC44OTE0OTI1IDI4LjI2NTM3MzEgMzAuNTYzNTgyMSAyOS41MDg4MDYgMzIuODk1MjIzOSAzMS45NDM3MzEzIDM0LjMzMDQ0NzggMzUuMjQyNTM3MyAzNC4zMzA0NDc4IDM4Ljg3OTI1Mzd6TTIxLjY3NjcxNjQgMTkuNTQ3NjExOUMyMS42NzY3MTY0IDIyLjg3MjIzODggMjQuMzcyODM1OCAyNS41NjcxNjQyIDI3LjY5NzE2NDIgMjUuNTY3MTY0MiAzMS4wMjEzNDMzIDI1LjU2NzE2NDIgMzMuNzE2MTE5NCAyMi44NzIyMzg4IDMzLjcxNjExOTQgMTkuNTQ3NjExOSAzMy43MTYxMTk0IDE2LjIyMzczMTMgMzEuMDIxMzQzMyAxMy41Mjg5NTUyIDI3LjY5NzE2NDIgMTMuNTI4OTU1MiAyNC4zNzI4MzU4IDEzLjUyODk1NTIgMjEuNjc2NzE2NCAxNi4yMjM3MzEzIDIxLjY3NjcxNjQgMTkuNTQ3NjExOSIgbWFzaz0idXJsKCNkcnVwYWwtOC1ibGFjay1iKSIvPgogICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTcuMjI1NjcxNjQsMzguODc5MjUzNyBDNy4yMjU2NzE2NCwzMS45NDIwODk2IDEyLjQzOTQwMywyNi4yMjY0MTc5IDE5LjE2MTA0NDgsMjUuNDI3MTY0MiBDMTguMDA3NjExOSwyMy43NTU4MjA5IDE3LjMzMDI5ODUsMjEuNzMwNzQ2MyAxNy4zMzAyOTg1LDE5LjU0NzYxMTkgQzE3LjMzMDI5ODUsMTMuODIzNDMyOCAyMS45NzA4OTU1LDkuMTgyMjM4ODEgMjcuNjk3MTY0Miw5LjE4MjIzODgxIEMyOC4xNjk4NTA3LDkuMTgyMjM4ODEgMjguNjM0MzI4NCw5LjIxNzE2NDE4IDI5LjA4OTI1MzcsOS4yNzgzNTgyMSBDMjUuNjk4MDU5Nyw2LjM1MTY0MTc5IDIyLjMxNDMyODQsMy4zODM1ODIwOSAxOS42NDM0MzI4LDAuMTM4MDU5NzAxIEMyMS4wMDc2MTE5LDE0LjM0OTU1MjIgNi43MDAxNDkyNSw5LjE4NTY3MTY0IDEuNDExMTk0MDMsMjIuMjgxNDkyNSBDLTIuMTM4MjA4OTYsMzEuMDY4MjA5IDEuMDYwODk1NTIsNDEuOTMgMTAuNDExNDkyNSw0Ny42MDYyNjg3IEM4LjQyMzQzMjg0LDQ1LjI0NzkxMDQgNy4yMjU2NzE2NCw0Mi4yMDQ2MjY5IDcuMjI1NjcxNjQsMzguODc5MjUzNyBaIiBtYXNrPSJ1cmwoI2RydXBhbC04LWJsYWNrLWIpIi8+CiAgICA8Zz4KICAgICAgPG1hc2sgaWQ9ImRydXBhbC04LWJsYWNrLWQiIGZpbGw9IiNmZmYiPgogICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2RydXBhbC04LWJsYWNrLWMiLz4KICAgICAgPC9tYXNrPgogICAgICA8cGF0aCBmaWxsPSIjMDAwIiBkPSJNMjAuNzc4NTA3NSAzMS4wMUMxNi40MzEzNDMzIDMxLjAxIDEyLjkwODA1OTcgMzQuNTMzMjgzNiAxMi45MDgwNTk3IDM4Ljg3OTI1MzcgMTIuOTA4MDU5NyA0My4yMjUwNzQ2IDE2LjQzMTM0MzMgNDYuNzQ4OTU1MiAyMC43Nzg1MDc1IDQ2Ljc0ODk1NTIgMjUuMTIzNDMyOCA0Ni43NDg5NTUyIDI4LjY0NjcxNjQgNDMuMjI1MDc0NiAyOC42NDY3MTY0IDM4Ljg3OTI1MzcgMjguNjQ2NzE2NCAzNC41MzMyODM2IDI1LjEyMzQzMjggMzEuMDEgMjAuNzc4NTA3NSAzMS4wMU0zNC4zMzA0NDc4IDM4Ljg3OTI1MzdDMzQuMzMwNDQ3OCA0My40ODQ3NzYxIDMyLjAzMDQ0NzggNDcuNTUxNDkyNSAyOC41MTk0MDMgNTAgMzUuMDA5MjUzNyA0Ny45OTc2MTE5IDQwLjM3OTEwNDUgNDMuMTE5NTUyMiA0Mi43ODI5ODUxIDM3LjIxMDc0NjMgNDYuMTA2ODY1NyAyOS4wMzc2MTE5IDQzLjAxMjA4OTYgMjIuODg1MjIzOSAzNy44MTYxMTk0IDE3LjMwNzc2MTIgMzcuOTc0MTc5MSAxOC4wMjk4NTA3IDM4LjA2MzEzNDMgMTguNzc4MzU4MiAzOC4wNjMxMzQzIDE5LjU0NzYxMTkgMzguMDYzMTM0MyAyNC4yNzc3NjEyIDM0Ljg5MTQ5MjUgMjguMjY1MzczMSAzMC41NjM1ODIxIDI5LjUwODgwNiAzMi44OTUyMjM5IDMxLjk0MzczMTMgMzQuMzMwNDQ3OCAzNS4yNDI1MzczIDM0LjMzMDQ0NzggMzguODc5MjUzN3pNMjEuNjc2NzE2NCAxOS41NDc2MTE5QzIxLjY3NjcxNjQgMjIuODcyMjM4OCAyNC4zNzI4MzU4IDI1LjU2NzE2NDIgMjcuNjk3MTY0MiAyNS41NjcxNjQyIDMxLjAyMTM0MzMgMjUuNTY3MTY0MiAzMy43MTYxMTk0IDIyLjg3MjIzODggMzMuNzE2MTE5NCAxOS41NDc2MTE5IDMzLjcxNjExOTQgMTYuMjIzNzMxMyAzMS4wMjEzNDMzIDEzLjUyODk1NTIgMjcuNjk3MTY0MiAxMy41Mjg5NTUyIDI0LjM3MjgzNTggMTMuNTI4OTU1MiAyMS42NzY3MTY0IDE2LjIyMzczMTMgMjEuNjc2NzE2NCAxOS41NDc2MTE5IiBtYXNrPSJ1cmwoI2RydXBhbC04LWJsYWNrLWQpIi8+CiAgICAgIDxwYXRoIGZpbGw9IiMwMDAiIGQ9Ik03LjIyNTY3MTY0LDM4Ljg3OTI1MzcgQzcuMjI1NjcxNjQsMzEuOTQyMDg5NiAxMi40Mzk0MDMsMjYuMjI2NDE3OSAxOS4xNjEwNDQ4LDI1LjQyNzE2NDIgQzE4LjAwNzYxMTksMjMuNzU1ODIwOSAxNy4zMzAyOTg1LDIxLjczMDc0NjMgMTcuMzMwMjk4NSwxOS41NDc2MTE5IEMxNy4zMzAyOTg1LDEzLjgyMzQzMjggMjEuOTcwODk1NSw5LjE4MjIzODgxIDI3LjY5NzE2NDIsOS4xODIyMzg4MSBDMjguMTY5ODUwNyw5LjE4MjIzODgxIDI4LjYzNDMyODQsOS4yMTcxNjQxOCAyOS4wODkyNTM3LDkuMjc4MzU4MjEgQzI1LjY5ODA1OTcsNi4zNTE2NDE3OSAyMi4zMTQzMjg0LDMuMzgzNTgyMDkgMTkuNjQzNDMyOCwwLjEzODA1OTcwMSBDMjEuMDA3NjExOSwxNC4zNDk1NTIyIDYuNzAwMTQ5MjUsOS4xODU2NzE2NCAxLjQxMTE5NDAzLDIyLjI4MTQ5MjUgQy0yLjEzODIwODk2LDMxLjA2ODIwOSAxLjA2MDg5NTUyLDQxLjkzIDEwLjQxMTQ5MjUsNDcuNjA2MjY4NyBDOC40MjM0MzI4NCw0NS4yNDc5MTA0IDcuMjI1NjcxNjQsNDIuMjA0NjI2OSA3LjIyNTY3MTY0LDM4Ljg3OTI1MzcgWiIgbWFzaz0idXJsKCNkcnVwYWwtOC1ibGFjay1kKSIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==);}</style><h2 class="css-jhj6dy">Drupal</h2><p><a href="https://www.drupal.org">Drupal</a> is an open-source content management system with a robust suite of tools for modeling data, implementing editorial workflows, and coding custom application logic. There is also excellent support for JSON API or GraphQL web services, making it a good choice as the backend for your React application.</p><p><strong>Start here:</strong> <a href="/tutorials/drupal-for-react-developers">An Introduction to Drupal for React Developers</a></p><ol><li><a href="https://drupalize.me/guide/introduction-drupal"><span type="course" class="css-1dbu2to egl3k6j0">course</span>Introduction to Drupal</a></li><li><a href="https://www.drupal.org/docs/user_guide/en/index.html">Drupal 8 User Guide</a></li><li><a href="https://www.leveluptutorials.com/tutorials/drupal-8-basics"><style data-emotion="css yobxg7">
1.css-yobxg7{border-left:8px solid #000;color:#fff;display:inline-block;font-family:Helvetica,Verdana,sans-serif;font-size:0.8em;font-weight:bold;margin-right:6px;padding:2px 6px;background:#EB62DD;border-color:#76316f;}</style><span type="video" class="css-yobxg7 egl3k6j0">video</span>Drupal 8 Basics Tutorials</a></li><li><a href="https://drupalize.me/tutorial/decoupling-explained?p=2360">Decoupling Explained</a></li><li><a href="https://www.apress.com/it/book/9781484240717">Decoupled Drupal in Practice, Book by Preston So.</a></li><li><a href="https://dri.es/how-to-decouple-drupal-in-2019">How to decouple Drupal in 2019</a></li><li><a href="https://www.acquia.com/resources/webinars/api-first-drupal-and-future-cms">API First Drupal and the Future of the CMS</a></li><li><a href="https://www.lullabot.com/articles/drupal-javascript-initiative-the-road-to-a-modern-administration-ui">Drupal JavaScript Initiative: The Road to a Modern Administration UI</a></li><li><a href="https://dri.es/headless-cms-rest-vs-jsonapi-vs-graphql">Headless CMS: REST vs JSON:API vs GraphQL</a></li><li><a href="https://medium.com/@mateu.aguilo.bosch/contenta-makes-your-content-happy-6f76bbe0cdae">Contenta Makes Your Content Happy</a></li><li><a href="https://drupalize.me/series/web-services-drupal-8"><span type="course" class="css-1dbu2to egl3k6j0">course</span>Web Services in Drupal 8</a></li><li><a href="https://atendesigngroup.com/blog/graphql-drupal-getting-started">GraphQL with Drupal: Getting Started</a></li></ol></section><section class="css-11mbus"><style data-emotion="css aegly3">.css-aegly3{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NiIgaGVpZ2h0PSI0MiIgdmlld0JveD0iMCAwIDQ2IDQyIj4KICA8ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDI4LjU0MiAyMS4xMDcpIj4KICAgIDxwYXRoIGQ9Ik0xMy4xNzQzMjk2LDEzLjE3NDMyOTYgTDI2LjM0ODY1OTEsMTMuMTc0MzI5NiBMMjYuMzQ4NjU5MSwzOS41MjI5ODg3IEwxMy4xNzQzMjk2LDM5LjUyMjk4ODcgQzUuODk4MzQ4MjYsMzkuNTIyOTg4NyA4LjkxMDUwNzIyZS0xNiwzMy42MjQ2NDA0IDAsMjYuMzQ4NjU5MSBMMCwyNi4zNDg2NTkxIEMtOC45MTA1MDcyMmUtMTYsMTkuMDcyNjc3OCA1Ljg5ODM0ODI2LDEzLjE3NDMyOTYgMTMuMTc0MzI5NiwxMy4xNzQzMjk2IFoiLz4KICAgIDxwYXRoIGQ9Ik0yNi4zNDg2NTkxLDAgTDI2LjM0ODY1OTEsMCBDMzMuNjI0NjQwNCwtMS4zMzY1NzYwOGUtMTUgMzkuNTIyOTg4Nyw1Ljg5ODM0ODI2IDM5LjUyMjk4ODcsMTMuMTc0MzI5NiBMMzkuNTIyOTg4NywzOS41MjI5ODg3IEwxMy4xNzQzMjk2LDM5LjUyMjk4ODcgTDEzLjE3NDMyOTYsMTMuMTc0MzI5NiBMMTMuMTc0MzI5NiwxMy4xNzQzMjk2IEMxMy4xNzQzMjk2LDUuODk4MzQ4MjYgMTkuMDcyNjc3OCwtNC4zOTc4MDc1NmUtMTYgMjYuMzQ4NjU5MSwtMS43NzYzNTY4NGUtMTUgWiIvPgogIDwvZz4KPC9zdmc+Cg==);}</style><h2 class="css-aegly3">React + Drupal</h2><p>Whether you’re enhancing a few of the elements on an existing page, or creating a fully decoupled single-page app (SPA), React and Drupal work great together.</p><ol><li><a href="https://www.lullabot.com/articles/should-you-decouple">Should You Decouple?</a>, and <!-- --> <a>Decoupled Drupal - What You Need to Consider</a></li><li><a href="https://reactarmory.com/answers/how-to-integrate-react-into-existing-app">How to integrate React into an existing app?</a></li><li><a href="https://www.zivtech.com/blog/getting-started-react-drupal-8-and-jsonapi">Getting Started with React, Drupal 8, and JSON API</a></li><li><a href="https://colorfield.be/blog/react-and-drupal-8-json-api-3">React and Drupal 8 JSON API</a></li><li><a href="https://drupalize.me/series/decoupled-drupal"><span type="course" class="css-1dbu2to egl3k6j0">course</span>Decoupled Drupal</a></li><li><a href="https://events.drupal.org/nashville2018/sessions/decoupled-drupal-hard-problems">Decoupled Drupal Hard Problems</a></li><li><a href="https://www.contentacms.org/">Contenta: Contenta is an API-First Drupal distribution</a></li><li><a href="https://www.amazeelabs.com/en/blog/drupal-graphql-react-apollo">Drupal and GraphQL with React and Apollo</a></li><li><a href="https://events.drupal.org/baltimore2017/sessions/look-possible-future-all-us-react-graphql-and-drupal"><span type="video" class="css-yobxg7 egl3k6j0">video</span>A look into a possible Future for all of us: React, GraphQL and Drupal</a></li><li><a href="https://www.youtube.com/watch?v=TuVeWTieJGI"><span type="video" class="css-yobxg7 egl3k6j0">video</span>Headless Drupal: Building blazing-fast websites with React/GatsbyJS + Drupal</a></li><li><a href="https://www.lullabot.com/podcasts/drupalizeme-podcast/react-in-drupal-core"><style data-emotion="css mup8x7">
1.css-mup8x7{border-left:8px solid #000;color:#fff;display:inline-block;font-family:Helvetica,Verdana,sans-serif;font-size:0.8em;font-weight:bold;margin-right:6px;padding:2px 6px;background:#276DE8;border-color:#143774;}</style><span type="podcast" class="css-mup8x7 egl3k6j0">podcast</span>React in Drupal Core?</a></li><li><a href="https://dropsolid.com/en/blog/drupal-8-and-react-native">Drupal 8 and React Native</a></li><li><a href="https://github.com/acquia-pso/decoupledkit-react"><style data-emotion="css 198tuiq">.css-198tuiq{border-left:8px solid #000;color:#fff;display:inline-block;font-family:Helvetica,Verdana,sans-serif;font-size:0.8em;font-weight:bold;margin-right:6px;padding:2px 6px;background:#b7bbc9;border-color:#5c5e65;}.css-198tuiq:before{content:"<";}.css-198tuiq:after{content:"/>";}</style><span type="code" class="css-198tuiq egl3k6j0">code</span>React &amp; GraphQL Decoupled Kit </a></li><li><a href="https://atendesigngroup.com/blog/decoupled-drupal-gatsby-getting-started">Decoupled Drupal + Gatsby: Getting Started</a></li></ol></section></div><style data-emotion="css mqqifl">.css-mqqifl{display:grid;grid-template-columns:[full-start] minmax(1em, 1fr) [main-start] repeat(12, minmax(0, 3rem)) [main-end] minmax(1em, 1fr) [full-end];grid-column-gap:1em;}</style><div class="css-mqqifl"><span style="font-size:0"></span><style data-emotion="css atwtg8">.css-atwtg8{display:inherit;grid-column:full;grid-template-columns:inherit;grid-column-gap:inherit;background:#ececec;min-height:1em;padding:2em 0;}.css-atwtg8 >*{grid-column:main;}</style><div class="css-atwtg8"><div>We know some great content is probably missing from this site. If you’ve got suggestions about things you think we should include let us know.<!-- --> <a href="mailto:[email protected]">[email protected]</a></div></div><style data-emotion="css 1oqk9xm">.css-1oqk9xm{display:inherit;grid-column:full;grid-template-columns:inherit;grid-column-gap:inherit;background:#EB62DD;color:#fff;min-height:1em;padding:2em 0;font-weight:bold;padding:1em 0;position:fixed;bottom:0;width:100%;-webkit-box-shadow:0px -3px 4px 0px rgba(0,0,0,0.27);-moz-box-shadow:0px -3px 4px 0px rgba(0,0,0,0.27);box-shadow:0px -3px 4px 0px rgba(0,0,0,0.27);}.css-1oqk9xm >*{grid-column:main;}.css-1oqk9xm .cta,.css-1oqk9xm span{float:left;padding:1em;}.css-1oqk9xm span{float:left;padding:1em;display:none;}@media (min-width: 600px){.css-1oqk9xm span{display:inline;}}</style><div class="css-1oqk9xm"><div><style data-emotion="css 190w6tv">.css-190w6tv{background:#276DE8;border:0;border-radius:5px;color:#fff;display:block;font-weight:bold;margin:0 auto;max-width:400px;padding:1em;-webkit-text-decoration:none;text-decoration:none;}.css-190w6tv:hover{background:#67DAF9;cursor:pointer;}</style><a href="#signup" class="cta css-190w6tv">Sign up for regular updates</a> <span>and learn about new content we add.</span></div></div></div></div><style data-emotion="css 1wcmiog">.css-1wcmiog{display:grid;grid-template-columns:[full-start] minmax(1em, 1fr) [main-start] repeat(12, minmax(0, 3rem)) [main-end] minmax(1em, 1fr) [full-end];grid-column-gap:1em;padding:2em 0 0 0;text-align:right;}.css-1wcmiog >*{grid-column:main;}</style><footer class="css-1wcmiog e1ny5pp60"><p>© 2018<!-- --> <a href="https://osiolabs.com">Osio Labs, Inc</a></p></footer></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div>
1<script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";window.___webpackCompilationHash="708fd94d62cc6f3bcf6e";/*]]>*/</script>
1<script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-3709f95779253735fe4e.js"],"app":["/app-cd9ed72526ebee6edca6.js"],"component---src-components-templates-page-template-js":["/component---src-components-templates-page-template-js-4d4865b5c3cfc6c5b52e.js"],"component---src-pages-404-js":["/component---src-pages-404-js-894866553303863544af.js"],"component---src-pages-index-js":["/component---src-pages-index-js-d3f62d44a36958c5f23b.js"],"component---src-pages-react-and-drupal-series-js":["/component---src-pages-react-and-drupal-series-js-9ca67023c7a30fbd17c6.js"]};/*]]>*/</script>
1<script src="/polyfill-3709f95779253735fe4e.js" nomodule=""></script>
1<script src="/app-cd9ed72526ebee6edca6.js" async=""></script>
1<script src="/framework-31f187c6f6df3e3c1700.js" async=""></script>
1<script src="/webpack-runtime-198756eaac2f31cbf0b0.js" async=""></script>
1</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.