Jake Trent

Tag: React

How to Choose a Key in React

The React prop of key is a special attribute that’s used by the library to keep track of nodes within a list. There are a few guidelines that can help in selecting an appropriate key value.

Read more

Event Handler Naming in React

Naming’s a hard problem, right? Well, coming up with the names can be hard. After that, it’s just a simple matter of typing. Here are a few of my naming conventions for React or even handling in general.

Read more

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