React Round Up

Panel: Nader Dabit Special Guests: Paul Gray In this episode of React Round Up, the panel discusses the future of higher order components and render props with Paul Gray. Paul is a software developer at an educational technology company called Learning Objects. They have a learning platform there that helps instructional designers create better contents. They talk about how he got into programming and React, when you would want to use HOCs and render props, and chainable components. In particular, we dive pretty deep on: Paul intro React How long have you been working with React? How did you get into programming? TI-89 Calculators in high school Software engineering degree in college Big fan of HOCs when they came out Chainable components Chainable components API Promises Anatomy of render prop components TypeScript async/await GitHub Gist Use cases Tool to share reusable code in React How long has this been in the works? With State Mapp Chain function Functional Programming Functional Programming in Scala by Paul Chiusano And much, much more! Links: Learning Objects React Chainable components TypeScript async/await GitHub Gist Functional Programming in Scala by Paul Chiusano Paul’s GitHub PaulGray.net Picks: Nader Viro React Expo blog Paul The Great Interior Design Challenge Little Tikes Red Car

Panel: Charles Max Wood Cory House Special Guests: Lucas Reis In this episode of React Round Up, the panel discusses simple React patterns with Lucas Reis. Lucas works as a senior front-end developer at Zocdoc and previously worked in Brazil for an ecommerce company called B2W. He recently wrote a blog post about simple React patterns that really took off and became popular on the web. They talk about this blog post, what defines a successful pattern, and then they discuss the different patterns that he has discovered in his years of React programming. In particular, we dive pretty deep on: Lucas intro Tries to write blog posts as much as possible Simple React Patterns blog post React What does he mean by “successful” patterns? Three things that define good patterns Define successful? The mix component The Container/Branch/View pattern First successful pattern he has found Separation of concerns Common concern: are we worried about mixing concerns? If/else Can you encapsulate in the view? Pattern matching React loadable You need to think of 3 states at least Higher-order component Render props And much, much more! Links: Zocdoc B2W Simple React Patterns blog post React Simple Made Easy by Rich Hickey Lucas’s GitHub Lucas’s Blog @iamlucasreis Picks: Charles FullContact Udemy Cory Fluent conf Immer Lucas Percy Be studying the languages and be inspired!

Panel: Cory House Nader Dabit Special Guests: Samuel Mendenhall In this episode of React Round Up, the panel discusses best practices with React and Redux with Samuel Mendenhall. Samuel has been working in web development for the past five years and was recently working for Red Hat. They talk about what has led him to React, as well as some of the most common mistakes that people make in React. They also talk about the amazing power of TypeScript and when you may not want to use Redux. In particular, we dive pretty deep on: Sam intro jQuery, Backbone, and Angular React and React Native New role at Microsoft in commercial software engineering group Working a lot with React and tooling What have you learned since working with React? Shallow learning curve The concept of React is very simple What work did you do at Red Hat? Internal tooling What are some common mistakes people have made in React? Defensive programming Making sure functions are bound correctly He’s an advocate for using TypeScript The pros of using TypeScript Connect in React Connect will do shallow comparisons Redux When you shouldn’t use Redux When should Redux be used in a project? MobX And much, much more! Links: jQuery Backbone Angular React Red Hat React Native TypeScript Redux MobX @engineersamwell Sam’s GitHub Picks: Cory Transform.now.sh Plop js Nader React Amsterdam YouTube AWS AppSync AWS Amplify Sam Webpack

Panel: Charles Max Wood Tara Manicsic Special Guests: Dave Ceddia In this episode of React Round Up, the panel discusses hot reloading with Create React App with Dave Ceddia. Dave is a React developer, blogs about React, and recently wrote a book called Pure React. 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 Create React App, the disadvantages to customizing, and the key points to understand about Create React App before modifying it.  In particular, we dive pretty deep on: Dave intro What is the big picture behind hot module reloading? Create React App Webpack How do you set this up? You don’t need to eject Is there a certain point when you need to start taking advantage of hot reloading? Helps to use hot reloading from the beginning Resources to help with using hot reloading Dave article React app rewired Are there any changes you can make that won’t hot reload? Full page refreshes Why did Create React App not have this from the beginning? Having a skeleton that you can break Webpack HMR vs React-Hot-Loader by Mark Erikson Event handlers Are there other ways you can customize Create React App? Sass Key points to Create React App to understand Try to avoid modifying it if you can And much, much more! Links: React Dave’s Blog Pure React by Dave Ceddia Create React App Webpack Dave article React app rewired Webpack HMR vs React-Hot-Loader by Mark Erikson Sass @dceddia Dave’s GitHub DevChat.tv Patreon DaveCeddia.com/RoundUp Picks: Charles Star Realms Vail If you have an idea about a podcast, he is willing to hear them out JavaScript YouTube videos to come at DevChat.tv YouTube Tara Patreon Dave React Boston Indie Hackers

Panel: Tara Manicsic Nader Dabit Special Guests: Joe Eames In this episode of React Round Up, the panel discusses The Framework Summit with Joe Eames. Joe discusses the history behind the conference and how it came to be created. They really wanted to create a conference that would include all of the frameworks, especially those that are underrepresented in the programming community, like React. He touches on why he is passionate about this project, why it is important to be open to learning new things, and the overall format of the conference. In particular, we dive pretty deep on: The Framework Summit October 2-3, 2018 in Park City, Utah The history of the conference React Originally called the “Tri-conference” Frameworks play a major part in your code development “Religiousness” of which framework is the “right” or “wrong” one to use Opportunity to expose more people to new frameworks Comparing the frameworks The importance of being willing to learn new things Bursting “thought bubbles” Being open to change Merging communities and creating open dialogue Format of the conference Both single-track and multi-track Elm Vue Angular Great lineup already and it’s getting better Webflow Novel and unique talks What not to do when submitting talks And much, much more! Links: React The Framework Summit Elm Vue Angular Webflow @FrameworkSummit Picks: Tara Vue Vixens ngGirls Nader ViroReact Joe The 2018 Web Developer Roadmap by Brandon Morelli Role playing games - My Little Pony

Panel: Charles Max Wood Nader Dabit Cory House Kent C Dodds Special Guests: David Atchley In this episode of React Round Up, the panel discuss breaking up with higher-order components with David Atchley. David has been doing software development for 24 years now and has worked mostly in web development. He has worked at many places from start-ups to large companies and does client work currently for Tandem.ly. They talk about what higher-order components and render props are and when you would want to use them to help you in your code. They also touch on overuse and misuse of applications and coding tools and the difference between using render props and HOCs. In particular, we dive pretty deep on: David intro What are higher-order components? What are render props? Higher-order components are patterned after higher-order functions Connect from React Redux React What are the use cases for higher-order components? Redux Would you suggest writing a render prop instead in certain situations? Deciding to use a HOC or a render prop depends on the situation Think critically about the applications you are using Kent’s Advanced React Component Patterns Egghead Course Difference between render props and HOCs Build an HOC out of a render prop if you want to share code Context API from React Concern with new Context API Problem with overuse How do you help people avoid overuse and misuse? Unstated library by James Kyle Start developing code at the local level React Native And much, much more! Links: Tandem.ly React Redux Kent’s Egghead Course Context API from React Unstated library by James Kyle React Native David’s GitHub @Tuxz0r Tandem.ly Medium Picks: Charles I’d Pay You $500,000 a Year, but You Can’t Do the Work by Shelly Palmer Liars by Glenn Beck Cory CodeSandbox Live Babel repl React Cheat Sheet Fluent Conf Nader Shoe Dog by Phil Knight Nader’s Blog Post Kent Answers to common questions about render props blog post React’s new Context API blog post React Composer Brandon Sanderson CodeSandbox Live David React, Inline Functions, and Performance by Ryan Florence Build Better Products by Laura Klein

Panel: Charles Max Wood Cory House Tara Manicsic Kent C Dodds Special Guests: Aman Mittal In this episode of React Round Up, the panel discuss setting up and getting used to Gatsby with Aman Mittal. Aman is a computer science graduate, has been working in web development for the past two years, and has worked with companies such as freeCodeCamp. He has been working with React for the past 6 months and started working with Gatsby in January of 2018. They talk about what Gatsby is, why you would want to use it, and what a simple Gatsby site would look like. In particular, we dive pretty deep on: Aman introduction What is your experience with React? Working with Gatsby because of a client What is Gatsby? Gatsby uses React Has become quite mature Why Choose Gatsby? Good with small and medium business clients Gatsby and PWAs Does it rely heavily on GraphQL? GraphQL is useful with Gatsby but it is not necessary What would a simple Gatsby site look like? Index component Has support for CSS and JS The distinction between a static site generator and a normal web app Is Gatsby interactive on the front-end? More mature than other static site generators Generate HTML files for all of your routes Gatsby gives you the best of both worlds Gatsby’s own website Workshop.me How would you suggest people get started with Gatsby? And much, much more! Links: freeCodeCamp React Gatsby GraphQL JavaScript Workshop.me Aman’s GitHub Aman’s Medium @Amanhimself Readingbooks.blog Picks: Charles Get involved in your local government Overcast Cory The Reusable JavaScript Revolution - talk by Cory House Console Log Article Building large scale react applications in a monorepo by Luis Vieira Tara React Videos on YouTube Channel Coco Kent Coco The Greatest Showman React Testing Library Netlify Aman Gatsby Themes The Southern Reach Trilogy by Jeff VanderMeer

Panel: Charles Max Wood Tara Manicsic Kent C Dodds Nader Dabit Special Guests: Nikolas Burk In this episode of React Round Up, the panel discusses Prisma and GraphCool with Nikolas Burk. Nikolas works as a developer at GraphCool, which is a small startup based in Berlin. Their latest product is Prisma, which is a GraphQL database proxy that turns your database into a GraphQL API. They talk about why you would want to use Prisma and the pros to utilizing GraphQL. They also touch on why they made GraphCool and Prisma open source so that more people could use it. In particular, we dive pretty deep on: Nikolas introduction What is GraphCool? Prisma Prisma is the core technology that is powering GraphCool Sequel databases How do you communicate differences to Prisma? Using GraphQL as the interface to the database GraphQL is much simpler GraphQL Schema Definition Language Why use Prisma? Prisma as the database layer Prisma is working on supporting more databases What are the steps from database to messing with GraphCool and Prisma? MongoDB Schema driven or Schema first development 2 GraphQL APIs Prisma services 3 types of clusters Prisma Cloud Boilerplate projects Why open source? And much, much more! Links: GraphCool Prisma GraphQL Schema Definition Language GraphQL MongoDB Prisma Cloud React @NikolasBurk NikolasBurk.com Picks: Charles Code Sponsor ReactDevSummit Get a Coder Job Course SimpleProgrammer.com @CMaxW T-Shirts to come Tara The Eccentricities of Hammer and Nail by Suz Hinton Mad Mattr Kent Polyfill.io Workshop.me Nader Workshop.me React Native Training React Native Radio Episode 90 Nikolas GraphQL Europe GraphQL Day The Beginner's Guide to ReactJS by Kent C Dodds

Panel: Charles Max Wood Tara Manicsic Kent C Dodds Special Guests: Henrik Joreteg In this episode of React Round Up, the panel discusses redux-bundler with Henrik Joreteg. Henrik spoke at the first Node Conf, leans towards progressive web apps and single-page apps, and recently has gotten into independent consulting. He also has written a book called Human JavaScript and is working on his second book right now. They talk about his redux-bundler on GitHub and the ability to make changes behind the scenes without having to bother the user. He gives a general background on why he created the bundler and how you can use it in your programming to make your life easier. In particular, we dive pretty deep on: Henrik introduction What is the redux-bundler? He despises using behavioral components If it can be local, keep it local Don’t bother the user if you don’t need to Service Workers vs redux-bundler Making changes behind the scenes He loves to build apps Can you see any case where it would be useful to have a Service Worker in the background? Redux-bundler example Redux-bundler worker example What are the pros and cons to using the redux-bundler? At what point do you need Redux? React How did you get to the point to where you decided to make this bundler? Uses React as a glorified templating language He gets nervous when people start writing a lot of application code Speedy.gift Easier to use this from the beginning This bundler is used to show patterns And much, much more! Links: React Dev Summit Human JavaScript Redux-bundler Redux-bundler example Redux-bundler worker example Redux React Speedy.Gift Henrik’s blog @HenrikJoreteg Reduxbook.com coming soon Picks: Charles Black Panther DevChat.tv/15minutes React Dev Summit DevChat.tv Adventures in Angular Views on Vue Tara Women Who Code Women Techmakers Kent International Women’s Day Girl Develop It Application State Management blog post Tools without config blog post Concerning toolkits blog post Henrik Anki Partial JS Deviate by Beau Lotto

Panel: Charles Max Wood Nader Dabit Kent C Dodds Cory House In this episode of React Round Up, the panel discusses advanced component patterns and Downshift. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop. In particular, we dive pretty deep on: Component patterns Downshift Egghead course What makes it advanced? Requires taking a step back and think about your components a little differently Is there a React Native version? React Render prop patterns Code abstraction or code re-use Why Downshift is powerful Can use regular HTML and CSS with Downshift Allows you to be in charge of rendering What other places is the render prop pattern useful? What is the benefit of using a react component over a JS component? Awesome React Render Props GitHub Repo Downshift is highly accessible jQuery UI @MarcySutton Render props reduce the amount of opinion that component has Choosing render props gives the consumer more power as well as more responsibility Render props are best used with open source projects And much, much more! Links: React Dev Summit Downshift Egghead Course React Native React Awesome React Render Props GitHub Repo jQuery UI @MarcySutton Kent’s GitHub Kent’s Website (with links to courses) Picks: Charles Kent’s blog Hogwarts Battle Board Game Take time to write leisure code Sign up for React Dev Summit with code KentCDodds for 10% off Cory Manorisms YouTube Videos Kent React Component Component Winamp2-js His Newsletter Beyond React 16 by Dan Abramov

Panel: Charles Max Wood Nader Dabit Cory House Special Guests: Juho Vepsäläinen In this episode of React Round Up, the panel discusses Webpack the good parts with Juho Vepsäläinen. He talks a lot about the book he has written on Webpack, which helps people understand Webpack and how to work with it. They also discuss the advantages to using Webpack and discuss how you can use it in your coding to your benefit. In particular, we dive pretty deep on: For 10% off, use “Juho” to sign up for React Dev Summit What is Webpack? Juho’s Webpack book: SurviveJS React How can someone get into learning about Webpack if they’re not from a React background? It’s all about the contents behind Webpack How popular is Webpack and how large is it? You don’t need to read all 400 pages of his book Is there a certain way to write with Webpack? You can learn things as you go with Webpack How to approach code using Webpack How new updates with change the philosophy behind Webpack It’s good for Webpack to have pressure from the outside There is no reason to use a newer tool if it already works in an older tool Are there particular plug-ins that you use in Webpack that you really like? HTML plug-in React Native Interesting Webpack project uses Juho’s GitHub Decreasing need to be a Webpacker expert And much, much more! Links: React Dev Summit Webpack SuviveJS React React Native Juho’s GitHub NGconf React Finland Conference Picks: Charles React Dev Summit View on Vue Podcast The Whole-Brain Child by Daniel J. Siegel and Tina Payne Bryson Scott Beebe Nader React blogpost Ready Player One by Ernest Cline Cory The Knowledge Project Podcast Juho JAMstack

Panel:  Charles Max Wood Tara Manicsic Nader Dabit Kent C. Dodds Cory House Special Guests: None In this episode of React Round Up, the panel discusses how they each got into React and they provide some great resources for people who want to learn more about React and what it’s all about. They emphasize the fact that React is a very straightforward language and can be used relatively painlessly with a little bit of learning before jumping in. In particular, we dive pretty deep on: How each of the panelists got into React Angular beginnings React Native React Native Training React JS Consulting Node developer beginnings Backbone to React Ruby background How to get into React yourself Learn things in the right order React-Howto Beginners Guide to ReactJS You Don’t Know JS, ES6, and Beyond by Kyle Simpson CodeSandbox.io ES6 Get comfortable with JavaScript first Biggest mistake people make when learning about react ES6 and Beyond Workshop React Community How did the panel learn ES6? And much, much more! Links: React Native Training  React JS Consulting React-Howto Beginners Guide to ReactJS You Don’t Know JS, ES6, and Beyond by Kyle Simpson CodeSandbox.io ES6 and Beyond Workshop Tara’s Twitter and GitHub Cory’s Twitter, Medium Blog, and BitNative Blog Nader’s Twitter, Medium, GitHub, React Native Training Blog, React Native Training YouTube Kent’s Twitter and GitHub Charles’ Twitter and DevChat.tv Picks: Charles React Course on Pluralsite React Dev Summit 2018 Ready Player One Tara JazzCon #toshmagosh Nader Viro Media AWS AppSync Kent Dogs Nitin Tulswani Cory Node Tip React: The Big Picture React Rally