Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

React Hooks

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.

<p>In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.</p> <h2><a id="Freshbooks__Sponsor_9" name= "Freshbooks__Sponsor_9"></a>Freshbooks - Sponsor</h2> <p>Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put <strong>SYNTAX</strong> in the “How did you hear about us?” section.</p> <h2><a id="Sentry__Sponsor_13" name="Sentry__Sponsor_13"></a>Sentry - Sponsor</h2> <p>If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</p> <h2><a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p>2:30</p> <ul> <li>Function components</li> </ul> <p>4:50</p> <ul> <li>What are React hooks?</li> </ul> <p>8:12</p> <ul> <li>What problem does this solve?</li> </ul> <p>12:00</p> <ul> <li>State hooks</li> </ul> <p>21:50</p> <ul> <li>Context hooks</li> </ul> <p>26:02</p> <ul> <li>Effect hooks</li> </ul> <p>36:46</p> <ul> <li><a href= "https://reactjs.org/docs/hooks-reference.html#usereducer">Reducer hooks</a></li> </ul> <p>40:40</p> <ul> <li>Ref Hooks</li> </ul> <p>48:00</p> <ul> <li>Libraries already using React hooks <ul> <li><a href="https://rehooks.com/">Rehooks</a> → Listing of hook libraries</li> <li><a href="http://react-spring.surge.sh/">React Spring</a></li> <li><a href="https://github.com/souporserious/react-measure">React Measure</a></li> <li><a href="https://jaredpalmer.com/formik">Formik</a></li> <li><a href="https://github.com/mweststrate/immer">Immer</a></li> </ul> </li> </ul> <p>50:30</p> <ul> <li>Resources <ul> <li><a href="https://www.youtube.com/watch?v=dpw9EHDh2bM">Dan Abramov’s Talk</a></li> <li><a href="https://www.youtube.com/watch?v=jd8R0a2Ur8Q">Harry Wolf</a></li> <li><a href="https://usehooks.com/">Use Hooks Newsletter</a></li> <li><a href= "https://github.com/rehooks/awesome-react-hooks">Awesome React Hooks</a></li> </ul> </li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__68" name= "_SIIIIICK__PIIIICKS__68"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href="https://amzn.to/2JMfowo">Bad Blood</a></li> <li>Wes 1: <a href="http://swindledpodcast.com/">Swindled Podcast</a></li> <li>Wes 2: <a href="https://amzn.to/2JMEpHV">Scrub Brush Drill</a></li> </ul> <h2><a id="Shameless_Plugs_74" name= "Shameless_Plugs_74"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/pro">Scott’s Pro Gatsby 2 Course</a></li> <li><a href="https://advancedreact.com/">Wes’ Advanced React Course</a> - use the code SYNTAX for $10 off</li> </ul> <h2><a id="Tweet_us_your_tasty_treats_79" name= "Tweet_us_your_tasty_treats_79"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
 Show Notes 2:30
 Function components
 4:50
 What are React hooks?
 8:12
 What problem does this solve?
 12:00
 State hooks
 21:50
 Context hooks
 26:02
 Effect hooks
 36:46
 Reducer hooks
 40:40
 Ref Hooks
 48:00
 Libraries already using React hooks 
Rehooks → Listing of hook libraries
 React Spring
 React Measure
 Formik
 Immer

 50:30
 Resources Dan Abramov’s Talk
 Harry Wolf
 Use Hooks Newsletter
 Awesome React Hooks

 ××× SIIIIICK ××× PIIIICKS ××× Scott: Bad Blood

 Wes 1: Swindled Podcast

 Wes 2: Scrub Brush Drill

 Shameless Plugs Scott’s Pro Gatsby 2 Course

Wes’ Advanced React Course - use the code SYNTAX for $10 off
 Tweet us your tasty treats! Scott’s Instagram
 LevelUpTutorials Instagram
 Wes’ Instagram
 Wes’ Twitter
 Wes’ Facebook
 Scott’s Twitter
 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

React Hooks

Poslechněte si podcast