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

The React Newsletter

Hi <<First Name>>,
Opinionated Guide to React
200 pages of React Recipes
This book is my personal map of the tips, power-ups and not-so-obvious solutions to common questions and problems that I've come across during 4 years of React development. I have been finding some of the cheat codes and share them with you.

Step-by-step code examples
Every recipe comes with companion code examples that walk you through common React cross-roads. All the examples are hosted on CodeSandbox so that you can edit and play around with them.

Automatic updates of new versions included
Modern frontend web development amirite? As the React ecosystem keeps evolving, so will this book. You will receive the new version every time a new level of the React game is added and new helpful add-ons are built for them.

Read more
How to Create Editable DataGrids in a React Redux Application

Redux is a popular application architecture nowadays, and especially in the React community. It encourages developers to use a one-way data flow, and to apply changes to data in a single place, in the global Redux Store, using Redux reducers. It's promised that this architecture makes the application more reliable and easier to maintain. This is why many developer teams choose it as a base for their application architecture.

One of the key requirements of this paradigm is to keep data immutable. All changes to data must be made by cloning existing data in the Redux reducers. If you need to add an item into an array, you should create a clone of this array with the new item added into it. If you need to change an item property, you should create a clone of this item, containing the new value of this property. You should never mutate existing arrays and objects!

Read more
TypeScript + React: Why I don't use React.FC

In my recent article on TypeScript and React component patterns I’ve stated that I don’t use the built-in type React.FC<> but rather be explicit with typing children. I didn’t state why, and it sparked some interest. That’s why I want to elaborate a little bit.

Please note that this is just an opinion, not a suggestion or anything else. If you like to use React.FC and it works for you, please continue to do so! That’s totally fine and sometimes I do so as well! And let’s be serious: There are different problems out there that need discussion and are more enough a reason to get angry. So don’t waste your time getting too emotional about code styles. But if you like to get new ideas, please continue!

Read more
Keep your application close, and your React components closer
Storybook is a very popular development tool for React components. Developing components separately from your application will make you much more productive. Storybook will help you write and showcase your components in an isolated playground. Once done Storybook allows you to deploy your storybooks as a style guide for coworkers to use. This session by Maurice de Beijer is about developing React components with Storybook. But Storybook also works with Angular, Vue, Svelte and many others.

Watch video
Calling React Hooks Conditionally/Dynamically Using Render Props

If you've used hooks at all, you'll know that one limitation is not being able to conditionally call them in the render body of your component. So what can we do if we really need to call a hook conditionally? This article demonstrates one possible option—using a generic component with a render prop.

The code speaks for itself, so let's dive straight in. I've included some notes beneath the code examples, as well as an explanation of why this does not break the rules of hooks.

Here is a simple example where a component conditionally calls the useState hook. The condition is initially false and then set to true after 3 seconds.

Read more
The best way to learn React

I’ve been building user interfaces with React since 2015. I started teaching React to my coworkers at Eventbrite not too long after I had learned it. Now that I go around the country speaking and teaching workshops on React, I’m seen as an “expert.” As a result, I get asked “where is a good place to learn React?” a lot.

When I was learning, the only good option available was the official React tutorial. In the current version of the tutorial, you get to build an interactive tic-tac-toe game (back then when I went through it, it was a comment box app). In the beginning when I was asked “where to learn,” I sent interested learners to the official tutorial. It’s how I learned, so it was really all I knew. I figured everyone else would be able to learn React the same way I did. But when I would follow up with them, some would say that it didn’t work out. They didn’t finish because they got stuck, or they just didn’t understand the material.

It was at this point when it became apparent that not everyone learns the same way. It should’ve been obvious that folks learn differently, but by only recommending the official React tutorial I was assuming that there was only one good way to learn. Boy was I wrong. I have since found that there are at least three major ways to learn React from scratch. Of course, this can apply to other technologies as well, but I’m focusing on React for now.

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