Automatically Refreshing Data In A React Application

When we need to refresh data without user interaction in a web-based interface we have a few different options to consider. The ideal solution is likely to be implementing a solution based on the the websocket API as it provides more realtime updates with, perhaps, less overhead. Other solutions include standard JavaScript methods such as setInterval() and setTimeout(). These are the methods we’ll look at in this post.

Read more »

Conditionally Apply Redux Middleware

There may be situations when you only want to apply certain redux middlewares. For example, I typically use redux-thunk and redux-logger but I don’t necessarily want to include the logger in my production build. One way to accomplish this is to add any middleware you want to use into an array, which allows you to apply your conditional logic to determine what should be added, and then use the spread operator (…) to apply that middleware.

Read more »

How To Upload Files With React To A Node/Express Server

Handling file uploads in a React/Node/Express application is done a little different on both the server-side and client-side than what you may be used to doing when handling regular form submissions. In this post we’ll take a look at code on the server and client for uploading a file from a React application and saving the file on the server using Node.js and Express.

Read more »

How To Add Sass Support to a Create-React-App Project (after ejecting)

I spent far too much time when I was first getting into React development trying to maintain my own boilerplate for new projects. Even though I don’t use any of that old boilerplate code anymore, it wasn’t time completely wasted as I learned a good deal about the React ecosystem, especially webpack. But eventually the process became too tedious and, frankly, I wasn’t doing anywhere near as good a job as what others had already done. So now I start every new project with create-react-app (https://github.com/facebookincubator/create-react-app). It’s an incredible tool but it doesn’t include support for Sass, which I often use. So I must add that to the configuration and build process manually.

Read more »

Display A 'Loading' Indicator In React During Ajax Requests

It’s good UX to provide visual feedback to the user of web applications when an asynchronous operation is taking place. We’ve all seen these ‘loading’ indicators in the form of spinning icons, overlays, modals, etc. as we wait for view data to load. Here is a quick look at how we can implement a ‘loading’ indicator when using React.

Read more »

Submitting Form Data With React

I was reading through a thread on Reddit recently with some users discussing React. One particular user seemed a little frustrated with his/her understanding of React and had a few specific complaints about form data and submissions. I decided to put together an example addressing each of the issues (s)he is having.

Read more »

Custom Form Validation Example With React and Bootstrap

As I first started to work with React and familiarize myself with it’s one-way data bindings I found that I must re-think some of the ways I’ve solved seemingly trivial problems before. One such issue is dealing with custom client-side form validation. There are no shortages of ways and opinions on how to do this, and numerous packages exists to solve this very problem (with, IMHO varying degrees of success). However, as I head down the path of learning something new I don’t mind reinventing the wheel as it often helps the learning process.

Read more »