Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It’s an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate.This is an intermediate-level wa...
Thinking and building in React involves approaching application design in chunks, or components. Each part of your application that performs an action can and should be treated as a component. In fact, React is component-based and, as Tomas Eglinkas recently wrote, we should leverage that concept and err on the side of...
Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with:Placeholder space (and then flexible responsive styles after loading) Low-qua...
Like many, many others, I’m in the pool of leveling up my JavaScript skills and learning how to put React to use. That’s why Brad Frost resonated with me when he posted My Struggle to Learn React.”As Brad does, he clearly outlines his struggles point-by-point:I have invested enough time learning i...
You may have wondered lately what all the buzz is about Context and what it might mean for you and your React sites. Before Context, when the management of state gets complicated beyond the functionality of setState, you likely had to make use of a third party library. Thanks to recent updates by the awesome React team...
In this tutorial, we’ll be using Hyperapp to build a to-do list app. If you want to learn functional programming principles, but not get bogged down in details, read on. Hyperapp is hot right now. It recently surpassed 11,000 stars on GitHub and made the 5th place in the Front-end Framework section of the 2017 JavaSc...
Front-end frameworks are great. They abstract away much of the complexity of building a single-page application (SPA) and help you organize your code in an intelligible manner as your project grows. However, there’s a flip side: these frameworks come with a degree overhead and can introduce complexity of their own. T...
As your application becomes more complex, the management of state can become tedious. A component’s state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application ...
React is fast! Some of that speed comes from updating only the parts of the DOM that need it. Less for you to worry about and a speed gain to boot. As long as you understand the workings of setState(), you should be good to go. However, it’s also important to familiarize yourself with how this amazing library updates...
Brad Frost thinks it’s:Lack of portability Context Switching Flushing best practices down the toiletIn the spirit of good-ol-fashioned blog-and-response, here’s:Brain Muenzenmeyer’s response Micah Godbolt’s responseI’d like to point out that “CSS-in-JS” is an umbrella t...
Recent Comments