Dave Ceddia

This article is designed for total beginners to React, as well as folks who’ve tried to learn in the past but have had a tough time. I think I can help you figure this out.

The hardest thing about React? Well, it’s different for each person, but I daresay everyone struggles somewhere along the way.

Breaking up big problems into tiny bite-sized ones is the only way to really get anything done in this world. It’s how I taught myself React, and it’s how I approach a lot of problems in software.

React is all the rage these days. It has been for a while now, honestly.

Back in 2014 (ye olden times) I got my first front end job. Up until then, I was mostly a back end developer.

There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same.

You might’ve run up against this concept in Redux called a “selector.” In this short tutorial I’ll explain what selectors are, why they’re useful, and when (and when not) to use them.

In this Redux tutorial I’m going to explain how to use Redux with React incrementally – starting with plain React – and a very simple React + Redux example. I’ll explain why each feature is useful (and when you can skip some).

The React Redux connect function works great for regular React components, but if you need access to the Redux store in a plain function, the technique is a bit different. In the examples below I’ll show how to access a JWT token from the Redux store, but the techniques will work with any data you might have.

Here in Part 1, we’ll cover the nuts and bolts of getting a Gatsby blog set up and deployed.

Converting function components to classes is a pain. The useState hook can help. Here's how it works, and examples of how to use it.

How you can take advantage of the useReducer hook to manage complex state in your components, and what this new hook might mean for Redux.

Learn how React's new Hooks feature works, and how Hooks can make your code cleaner and easier to write.

Create React App (CRA) is great. Recently updated to version 2, it now supports Sass out of the box and a bunch of other cool stuff.

Frameworks like Vue have the notion of “computed properties” – a way to derive some new, possibly complex data based on something passed in. This post covers how to achieve the same result in React.

You’ve got a list of items. Now you just need to get them on the screen. What’s the “React way” to render a list?

You can pass JSX into any prop, not only the one named children, and not only by nesting JSX inside a component’s tag – and it can simplify data passing and make components more reusable.

In this post I want to cover how the new Context API works, how it is similar to Redux, when you might want to use Context instead of Redux, and why Context doesn’t replace the need for Redux in every case.

Taking a Picture Every 30 Seconds and Sending It To A Server.

Everyone (and the React docs) say not to mutate state directly. Here's a live example of what happens when you do.

A step-by-step tutorial where you'll make a React app, an Express API server, and deploy both to Heroku.

Read this to figure out what Redux is for, why it's useful, and when to use it.

How to learn React after you've been building software with something else for years.

I have been trying to learn React for the past year now, on and off. No matter how much I try, I just cannot seem to get off the tutorials. The code just isn’t intuitive.

One of many ways to organize the files in a React project.

Testing is a double-edged sword. On one hand, having a solid test suite makes code easier to refactor, and gives confidence that it works the way it should. On the other hand, tests must be written and maintained. They have a cost, like any other code.

Higher-order components are a great way to extract repeated state or lifecycle methods from your React code.

When you need to fetch some data for a React component, where do you do it?

React's "state" is one of the more difficult concepts to learn. Not just what to put in state, but what it actually is and what it’s for. And also how Redux is related to React state. I hope to clear up some of the confusion in this article.

Aggelos Arvanitakis shares things he has learned from his mistakes in his blog posts. The panel discusses the most common problems in react that causes poor performance.

On today’s show the panel discusses what what jobs should be delegated to the front and backend when doing fullstack development with React. They talk about where the data fetching starts coming into play in a react app and the big changes from the old web to the modern web in data fetching.

Today’s show has the panel discussing image lazy loading in React. Image lazy loading is the notion that images that are below the fold (rendered outside of your browser view when you initially load a page) are deferred and loaded later, so that your page loads faster.

The panel discusses Conlin’s article "Link Lists in the Wild: React Hooks".

In this episode of React Round Up, the panel discusses hot reloading with Create React App with Dave Ceddia. 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.