Jake Trent

Deploy create-react-app to Heroku on Node.js

Create-react-app is Facebook’s no-config solution to starting a React project. This setup does not support a server out of the box. You can create that easily enough. Node.js can be a good choice for your app server. Once it’s made and functioning, you might want to deploy your static app and app server. Here’s a few tips on getting them up onto Heroku.

Read more

react-dnd With Text Drag Preview

react-dnd is a fantastic library for implementing drag and drop features in a React application. In browsers, you have the ability to specify a drag preview for the thing your dragging. Images are easy. Text takes more work – because you need to generate an image.

Read more

Smart and Dumb Components in React

Dan Abramov coined the terms Smart and Dumb components. Later, he called them Container and Presentational components. I still call them Smart and Dumb. It’s shorter and sits in my mind easier. How do you identify them? Why would you want a separation? What might that separation look like? Here are a few ideas.

Read more

What React Stateless Components are Missing

Stateless React components got a new syntax in React 0.14. It’s much simpler. It’s just a function call. Besides it just looking simpler, there are some major differences in what is available in a stateless component written this way. There are some things missing – purposefully not included – that you may be used to. Let’s look at a few things.

Read more

Update Body Class in React

React gives us a great component abstraction. Each of these components represents a node in the DOM. Each component is self contained, doesn’t talk up the component hierarchy directly and passes explicit data and code down the hierarchy. But what about when you have a React app that wants to reach out and modify something it doesn’t control?

Read more

React Rally Review

React Rally is a developer conference created around the library of React.js and the community that uses it. It was the first of its name. It was the first React-centric conference in Salt Lake City. I had a great time. Here are a few of reasons I liked it.

Read more

I Love CSS Modules

I heard a fantastic yesterday by Glen Maddern where Interoperable CSS was well-illustrated as the fantastic CSS language advancement that it is. I was happy to hear hushed ooo’s and ahh’s from the audience as they realized the power of what they were seeing. I have been enjoying the benefits of CSS modules myself and my team and would share some of my favorite features in hopes that others will be inclined to use this feature as well. Cleanse the world of global stylesheets!

Read more

Using JavaScript's Function Bind

JavaScript’s Function object has a very helpful method, bind. It is a great tool to give you control of the ever-squirrely this keyword. Have you ever had trouble predicting what this will be or making equate to what you want? bind will help you do that with more power and consistency. It can also help you with partial function application.

Read more

Testing React on jsdom

React allows you to create components that will render UI for your application. If your UI is of any complexity, you’ll likely want to test that it functions correctly and allows for future refactors. There are numerous ways to do this. One way that you might appreciate is using jsdom, an in-JavaScript implementation of the DOM.

Read more

Test React componentWillReceiveProps

Testing React Components has been easier and more enjoyable than any previous UI unit testing I’ve done in the past. Components that have interesting things happen in lifecycle methods have a little more setup to get tested. Components that use the componentWillReceiveProps method are in this category.

Read more
Older