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

Zpravodajství

Technologické zprávy

Technika

766: React Server Components: Form Actions + Server Actions

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 are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications. <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="https://syntax.fm/show/718/react-server-components">Show 718 React Server Components</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:04">02:04</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:04">03:04</a> What are form actions?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://github.com/facebook/react/pull/28491">GitHub Add React.useActionState PR</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=04:05">04:05</a> Almost entirely React.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=04:31">04:31</a> What is the ‘server’ in Vanilla React?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=06:10">06:10</a> Would React ever ship their own server?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=07:29">07:29</a> What are actions?</li> <li class="has-line-data" data-line-start="13" data-line-end="16"> <a href="#t=08:34">08:34</a> Two huge benefits to actions. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=08:45">08:45</a> Avoid custom useEffects or third party libraries.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=09:17">09:17</a> Calling server code from the client without any APIS.</li> </ul> </li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=11:31">11:31</a> Some examples of actions.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=12:54">12:54</a> Can these actions be done in a client component?</li> <li class="has-line-data" data-line-start="18" data-line-end="22"> <a href="#t=13:40">13:40</a> Where to use actions. <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=13:49">13:49</a> On a form submit.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=15:30">15:30</a> In an event handler.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=15:57">15:57</a> In a useEffect().</li> </ul> </li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=17:13">17:13</a> How to actually use an action.</li> <li class="has-line-data" data-line-start="23" data-line-end="29"> <a href="https://react.dev/reference/react-dom/hooks">React Hooks</a> <ul> <li class="has-line-data" data-line-start="24" data-line-end="28"> <a href="#t=17:30">17:30</a> <a href= "https://react.dev/reference/react/useActionState">useActionState() hook</a>. <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=18:49">18:49</a> The state of the action.</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=19:35">19:35</a> The bound action.</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=19:46">19:46</a> The pending state.</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=23:16">23:16</a> <a href= "https://react.dev/reference/react-dom/hooks/useFormStatus">useFormStatus() hook</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=24:38">24:38</a> Action inputs.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=26:13">26:13</a> Server vs client.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=28:30">28:30</a> This is not PHP.</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> <a href="#t=30:31">30:31</a> What is optimistic UI? <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=33:26">33:26</a> <a href= "https://react.dev/reference/react/useOptimistic">useOptimistic() hook</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=37:02">37:02</a> Some final thoughts.</li> <li class="has-line-data" data-line-start="35" data-line-end="37"> <a href="#t=40:18">40:18</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 class="code-line" data-line-start="37" data-line-end="38"> <a id="Sick_Picks_37"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="39" data-line-end="41"> Good Follows: <a href= "https://twitter.com/alexdotjs/status/1774496016294719911">Alex Katt</a>. </li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Scott: <a href="https://amzn.to/3Q4T3gS">Tiny Portable Ultra-Mini Air Pump</a>. </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> Wes: <a href="https://amzn.to/3TXv847">AVerMedia 4k Capture Card</a>. </li> </ul> <h3 class="code-line" data-line-start="44" data-line-end="45"> <a id="Hit_us_up_on_Socials_44"></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 are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications.
 Show Notes  00:00 Welcome to Syntax!
 Show 718 React Server Components.
 02:04 Brought to you by Sentry.io.
 03:04 What are form actions?
 GitHub Add React.useActionState PR

 04:05 Almost entirely React.
 04:31 What is the ‘server’ in Vanilla React?
 06:10 Would React ever ship their own server?
 07:29 What are actions?
 08:34 Two huge benefits to actions. 08:45 Avoid custom useEffects or third party libraries.
 09:17 Calling server code from the client without any APIS.

 11:31 Some examples of actions.
 12:54 Can these actions be done in a client component?
 13:40 Where to use actions. 13:49 On a form submit.
 15:30 In an event handler.
 15:57 In a useEffect().

 17:13 How to actually use an action.
 React Hooks  17:30 useActionState() hook. 18:49 The state of the action.
 19:35 The bound action.
 19:46 The pending state.

 23:16 useFormStatus() hook.

 24:38 Action inputs.
 26:13 Server vs client.
 28:30 This is not PHP.
 30:31 What is optimistic UI?  33:26 useOptimistic() hook.

 37:02 Some final thoughts.
 40:18 Sick Picks + Shameless Plugs.
  Sick Picks  Good Follows: Alex Katt.

  Scott: Tiny Portable Ultra-Mini Air Pump.

  Wes: AVerMedia 4k Capture Card.

  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

766: React Server Components: Form Actions + Server Actions

Poslechněte si podcast