RRU 009: Hot Reloading in Create React App with Dave Ceddia




React Round Up show

Summary: <p><strong>Panel: </strong></p> <ul> <li>Charles Max Wood</li> <li>Tara Manicsic</li> </ul> <p><strong>Special Guests: </strong>Dave Ceddia</p> <p>In this episode of React Round Up, the panel discusses hot reloading with Create React App with Dave Ceddia. Dave is a <a href="https://reactjs.org/">React</a> developer, blogs about React, and recently wrote a book called <a href="https://www.amazon.com/Pure-React-step-step-mastering-ebook/dp/B073V8HYRK"><em>Pure React</em></a>. They talk about what hot reloading is, when you would want to use it, and how you can set it up in your code. They also touch on ways to customize <a href="https://github.com/facebook/create-react-app">Create React App</a>, the disadvantages to customizing, and the key points to understand about Create React App before modifying it. </p> <p><strong>In particular, we dive pretty deep on:</strong></p> <ul> <li>Dave intro</li> <li>What is the big picture behind hot module reloading?</li> <li><a href="https://github.com/facebook/create-react-app">Create React App</a></li> <li><a href="https://webpack.js.org/">Webpack</a></li> <li>How do you set this up?</li> <li>You don’t need to eject</li> <li>Is there a certain point when you need to start taking advantage of hot reloading?</li> <li>Helps to use hot reloading from the beginning</li> <li>Resources to help with using hot reloading</li> <li><a href="https://daveceddia.com/hot-reloading-create-react-app/">Dave article</a></li> <li><a href="https://github.com/timarney/react-app-rewired">React app rewired</a></li> <li>Are there any changes you can make that won’t hot reload?</li> <li>Full page refreshes</li> <li>Why did Create React App not have this from the beginning?</li> <li>Having a skeleton that you can break</li> <li><a href="http://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/"><em>Webpack HMR vs React-Hot-Loader</em> by Mark Erikson </a></li> <li>Event handlers</li> <li>Are there other ways you can customize Create React App?</li> <li><a href="https://sass-lang.com/">Sass</a></li> <li>Key points to Create React App to understand</li> <li>Try to avoid modifying it if you can</li> <li>And much, much more!</li> </ul> <p><strong>Links:</strong></p> <ul> <li><a href="https://reactjs.org/">React</a></li> <li><a href="https://daveceddia.com/">Dave’s Blog</a></li> <li><a href="https://www.amazon.com/Pure-React-step-step-mastering-ebook/dp/B073V8HYRK"><em>Pure React</em> by Dave Ceddia</a></li> <li><a href="https://github.com/facebook/create-react-app">Create React App</a></li> <li><a href="https://webpack.js.org/">Webpack</a></li> <li><a href="https://daveceddia.com/hot-reloading-create-react-app/">Dave article</a></li> <li><a href="https://github.com/timarney/react-app-rewired">React app rewired</a></li> <li><a href="http://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/"><em>Webpack HMR vs React-Hot-Loader</em> by Mark Erikson</a></li> <li><a href="https://sass-lang.com/">Sass</a></li> <li><a href="https://twitter.com/dceddia?lang=en">@dceddia</a></li> <li><a href="https://github.com/dceddia">Dave’s GitHub</a></li> <li><a href="https://www.patreon.com/devchattv">DevChat.tv Patreon</a></li> <li><a href="http://daveceddia.com/roundup/">DaveCeddia.com/RoundUp</a></li> </ul> <p><strong>Picks:</strong></p> <p>Charles</p> <ul> <li><a href="https://www.starrealms.com/digital-game/">Star Realms</a></li> <li><a href="https://www.vail.com/">Vail</a></li> <li>If you have an idea about a podcast, he is willing to hear them out</li> <li>JavaScript YouTube videos to come at <a href="https://www.youtube.com/c/devchattv">DevChat.tv YouTube</a> </li> </ul> <p>Tara</p> <ul> <li><a href="https://www.patreon.com/">Patreon</a></li> </ul> <p>Dave</p> <ul> <li><a href="http://www.reactboston.com/">React Boston</a></li> <li><a href="https://www.indiehackers.com/">Indie Hackers</a></li> </ul>