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

Zpravodajství

Technologické zprávy

Technika

718: React Server Components

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.

Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more. <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:10">00:10</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:52">00:52</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:39">01:39</a> New Heights with Scott and Wes</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=04:33">04:33</a> What are React Server Components?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=10:52">10:52</a> The difference between server components and client components</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://twitter.com/wesbos/status/1743347215425237436">Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it.</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=11:37">11:37</a> Why would you want to run something server side?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=15:22">15:22</a> Components are server rendered by default</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=16:40">16:40</a> What is JS sprinkles?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=17:29">17:29</a> How do server components work?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=18:51">18:51</a> Moving an existing site to React server components take a while</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=20:27">20:27</a> The rules</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=27:12">27:12</a> Form Actions + Server Actions</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=32:07">32:07</a> Buttons can have actions</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=36:32">36:32</a> React Suspense</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=39:13">39:13</a> What we like</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://twitter.com/ryanflorence/status/1733157452336803970">Ryan Florence thread</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=41:54">41:54</a> What we don’t like</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=47:13">47:13</a> Design patterns</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=47:35">47:35</a> Other things</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://chromewebstore.google.com/detail/rsc-devtools/jcejahepddjnppkhomnidalpnnnemomn?pli=1"> RSC Devtools</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://waku.gg/blog/introducing-waku">Introducing Waku</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://www.mux.com/">Mux</a></li> <li class="has-line-data" data-line-start="27" data-line-end="29"> <a href="#t=49:22">49:22</a> Sick Picks</li> </ul> <h3 class="code-line" data-line-start="29" data-line-end="30"> <a id="Sick_Picks_29"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> Scott: <a href="https://amzn.to/41OO8Wf">ASUS ZenDrive V1M External DVD Drive</a></li> <li class="has-line-data" data-line-start="32" data-line-end="34"> Wes: <a href= "https://www.leatherman.com/en_CA/arc-833076.html">Leatherman Arc</a></li> </ul> <h3 class="code-line" data-line-start="34" data-line-end="35"> <a id="Shameless_Plugs_34"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Scott: <a href="https://www.youtube.com/@syntaxfm">Syntax YouTube</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Wes: <a href="https://wesbos.com/courses">Wes Bos Courses</a></li> </ul> <h3 class="code-line" data-line-start="39" data-line-end="40"> <a id="Hit_us_up_on_Socials_39"></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>

Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more.
 Show Notes  00:10 Welcome
 00:52 Syntax Brought to you by Sentry
 01:39 New Heights with Scott and Wes
 04:33 What are React Server Components?
 10:52 The difference between server components and client components
 Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it.

 11:37 Why would you want to run something server side?
 15:22 Components are server rendered by default
 16:40 What is JS sprinkles?
 17:29 How do server components work?
 18:51 Moving an existing site to React server components take a while
 20:27 The rules
 27:12 Form Actions + Server Actions
 32:07 Buttons can have actions
 36:32 React Suspense
 39:13 What we like
 Ryan Florence thread

 41:54 What we don’t like
 47:13 Design patterns
 47:35 Other things
  RSC Devtools

 Introducing Waku

 Mux

 49:22 Sick Picks
  Sick Picks  Scott: ASUS ZenDrive V1M External DVD Drive

 Wes: Leatherman Arc

  Shameless Plugs  Scott: Syntax YouTube

 Wes: Wes Bos Courses

  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads

Aplikace Youradio Talk

718: React Server Components

Poslechněte si podcast