Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

768: React 19 is here!

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:30">01:30</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:03">02:03</a> What’s in the update?</li> <li class="has-line-data" data-line-start="7" data-line-end="22"> <a href="https://react.dev/blog/2024/04/25/react-19">React 19 Beta Release Notes</a>. <ul> <li class="has-line-data" data-line-start="8" data-line-end="11"> <a href="#t=03:03">03:03</a> Actions + server actions. <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://syntax.fm/766">Syntax Episode 766</a>.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=04:54">04:54</a> Using server actions for a checkout.</li> </ul> </li> <li class="has-line-data" data-line-start="11" data-line-end="13"> <a href="#t=06:11">06:11</a> Web components. <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://custom-elements-everywhere.com/">Custom Elements Everywhere</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="19"> <a href="#t=09:44">09:44</a> use() API. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=10:31">10:31</a> With promises.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=14:25">14:25</a> With context.</li> <li class="has-line-data" data-line-start="16" data-line-end="19"> <a href="#t=17:32">17:32</a> How does <a href= "https://zustand-demo.pmnd.rs/">Zustand</a> work? <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://stately.ai/">Stately.ai</a>.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://twitter.com/DavidKPiano">X @DavidKPiano</a>.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=18:26">18:26</a> No more ForwardRef.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=20:05">20:05</a> Ref cleanup.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=20:43">20:43</a> Document metadata.</li> </ul> </li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href="#t=24:14">24:14</a> Upgrading to React 19.</li> </ul> <h3 class="code-line" data-line-start="24" data-line-end="25"> <a id="Hit_us_up_on_Socials_24"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects.
 Show Notes  00:00 Welcome to Syntax!
 01:30 Brought to you by Sentry.io.
 02:03 What’s in the update?
 React 19 Beta Release Notes. 03:03 Actions + server actions. Syntax Episode 766.
 04:54 Using server actions for a checkout.

 06:11 Web components. Custom Elements Everywhere.

 09:44 use() API. 10:31 With promises.
 14:25 With context.
 17:32 How does Zustand work?  Stately.ai.
 X @DavidKPiano.

 18:26 No more ForwardRef.
 20:05 Ref cleanup.
 20:43 Document metadata.

 24:14 Upgrading to React 19.
  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott:X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

768: React 19 is here!

Poslechněte si podcast