Testing and Debugging Happily with WebStorm, Jest and Create-React-App

Those of us who have worked with JavaScript testing APIs on various platforms shudder every time we think about configuration issues. Whether it’s the test runner, the proper testing API, picking the appropriate mock/spy/stubbing strategy, dealing with async code, it’s always a tad complicated. However, some of my latest frustrations (self-inflicted, of course) center around … Read More

How to fix broken Jest in React 16.4.1 with CRA and debug your jest tests!

Having trouble with running Jest tests once you upgrade to React 16.4.1? Here’s how to fix it. Note, this is a rather time-sensitive post and will be obsolete once the 2.x version of create-react-app is released. But for now, it can help! Also I show you how to debug Jest tests. That part is still useful.

React application state management with Redux

The first in a series of posts about Redux, the de-facto state storage engine for React, and how to integrate it with a React app. In this first article we make a case for Redux over passing props for events and data, and show a simple configuration.

Philly ETE 2017 #42 – Avoiding React Performance Pitfalls – Alex Grigoryan

When @WalmartLabs built Electrode, the React/Node.js application platform that powers the customer experience, performance was one of our primary concerns. React’s use of a virtual DOM and support for server-side rendering have earned it a reputation for speed, but in building our platform we encountered several unexpected performance bottlenecks. In this talk, we’ll discuss … Read More

Philly ETE 2016 #33 – Brent Vatne – React Native: A Better Way to Do Mobile (For Both Managers and Engineers)

In 2015, two years after its initial open source release, React took the position formerly held by Angular as the darling of the web. It’s used on some of the biggest sites in the world, such as Facebook, WhatsApp, Messenger, Instagram, Netflix, Airbnb, Uber, NFL, Dropbox, Asana, Atlassian, Khan Academy, Flipkart, Imgur, Reddit, Paypal, WalMart, WordPress, Wix, SquareSpace, etc.

Let’s be clear though: any UI you can build with React you can also build without React. React’s value proposition is that it simplifies your UI code, making it easier to build and maintain: it is declarative, component-based, uses one-way data flow, and has an API that most developers can become productive with in an afternoon. The people at Facebook have had so much success with it on the web that they thought – hey, wouldn’t it be great if we could write native mobile apps like this too? And so React Native was born, and the mobile development landscape will never look the same again.

Philly ETE 2016 #31 – Ari Lerner – Taming the Wild, Wild West of Next-Gen Front-End Apps

With the recent release of Angular 2 and React.js capturing growing interest, there are now SO many options to build a front-end to our web applications. Along with the increasing number of developers and the explosive popularity of JavaScript, what was the wild wild west of app development is maturing with it’s own best practices and idioms of software. In this talk we’re casting a wide-net on the range of possibilities for building next-gen front-end apps by looking at the options we have for both building and deploying applications on the edge. Join us as we build and deploy an app in real-time using both Angular 2 and React.js.

Philly ETE 2016 #30 – Jim Sproch – React.js Reconciliation

React is a library for building user interfaces. Developers specify how an application “should look”, and React automatically updates the page when the underlying data changes. React is able to do this through a process we call “Reconciliation”. In this talk, I’ll describe how reconciliation works within React, and how we use it to enhance both performance and user experience. In addition to being conceptually interesting, understanding the reconciliation process will allow you to better optimize your own applications.