Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
When I follow TDD

est-Driven Development doesn't always make sense, here's when it does for me.

Test-driven development (aka TDD) is a three-step process. It's often referred to as the "red, green, refactor cycle"


Read more
 
React Training: useEffect(fn, []) is not the new componentDidMount()
They're almost the same. But there's actually just enough of a difference to possibly get you into trouble -- especially if you're refactoring from classes.

We often times do some setup when the component first mounts like a network call or a subscription. We have taught ourselves to think in terms of "moments in time" with things like componentDidMount(), componentDidUpdate(), and componentWillUnmount(). It's natural to take that prior knowledge of React and to seek 1:1 equivalents in hooks. I did it myself and I think everyone does at first. Often times I'll hear in my workshops...

"What is the hooks equivalent to [some lifecycle method]?"

The quick answer is that hooks are a paradigm shift from thinking in terms of "lifecycles and time" to thinking in terms of "state and synchronization with DOM". Trying to take the old paradigm and apply it to hooks just doesn't work out very well and can hold you back.

Read more
 
How a React App Works Under the Hood
All of the things you need to understand about how React works in one video.

Watch video
 
How to add dark mode to a Gatsby site

Maybe the hardest / most complicated part of building this blog was adding Dark Mode.

Not the live-embedded code snippets, not the unified GraphQL layer that manages and aggregates all content and data*, not the custom analytics system, not the myriad bits of whimsy. Freaking Dark Mode.

It's a good reminder that when it comes to software development, a simple feature can have a complex implementation.


Read more
 
React Folder Structure in 5 Steps

How to structure large React apps into folders and files is a highly opinionated topic. I struggled for a while writing about this subject, because there is no right way to do it. However, every other week people ask me about how I structure my React projects. Not only about folder structures for small React projects, but more importantly about scalable React applications. After implementing React applications for a few years now, I want to give you a breakdown on how I approach this matter for my personal projects, for my client's projects, and for my React workshops. It only takes 5 steps, and you decide what makes sense to you and how far you want to push it. So let's get started.

For anyone who says "I move files around until it feels right": This may be alright as a solo developer or in a small team. But is that really something you would do in a cross-functional team of 4 developers with a total of 5 cross-functional teams in your company? At a higher scale of teams it becomes tricky to "just move files around without a clear vision". In addition, this is nothing I could tell my clients when they ask me about this matter. Hence this walkthrough as reference guide for anyone who is looking for some more clarity.


Read more
 
Building React components with Storybook 5.3 update

Storybook remains a very exciting and useful utility for writing React components. And of course I mention React components because that is what the course is about. That said Storybook is just as useful with other frontend tools like Vue, Angular, Svelte and more.

With Storybook 5 there are some very useful changes. The most notable is the new Component Story Format (CSF) to write stories. But there is also the new MDX Syntax, also to write stories but more focused on documentation. And lets not forget the new way of configuring Storybook using the new main.js.

None of these existed when I created this tutorial about two years ago. So an update to cover these new features was long overdue. And there are some other new features I covered along the way as well :-).

This update is available for free for all students who already purchased this course. If you haven't yet, now's the perfect time to join using https://bit.ly/2NoP5yW

A recipe for toasts
Toasts are great, so simple but yet so useful. It is for many a part of their daily life, which is why we will today provide one of the quickest and simplest recipes for making toast. Let's dive in.

Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2020 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp