A quick overview of where I’ve gotten hung up while using React Hooks.

I’ve been playing around with React Hooks a little bit (both with Curi and React Router). The experience has mostly been smooth, but there are a few places where I have gotten hung up:

General Note: React Hooks are experimental, only released in alpha, and are subject to changing. This article (originally published Nov. 4, 2018) may quickly become outdated.

Testing Effects

Problem:

function MyComponent() {
React.useEffect(() => {
console.log("rendered MyComponent");
});
return <div>My Component</div>;
}

Unfortunately, testing them doesn’t appear to be straightforward. …


Hey! I have moved this tutorial to my personal blog. Same content, new location. Sorry about making you click through to another page, but there isn’t a way for me to setup an automatic redirect.

https://blog.pshrmn.com/async-navigation-in-spas/


Background

The react-test-renderer package makes it convenient to test components outside of their native environment (e.g. on an iOS/Android device for React Native components). Instead of rendering “real” components, react-test-renderer renders JavaScript objects so that the tests can be run in Node.

Below, we will cover rendering elements, testing props, finding nested elements, updating props, and calling event handlers. This is by no means a definitive guide, but hopefully points you in the right direction.

Setup

npm install react-test-renderer --save-dev

If you are using Jest to run your tests, you will want to make sure to use the React Native preset. If…


Hey! I have moved this tutorial to my personal blog. Same content, new location. Sorry about making you click through to another page, but there isn’t a way for me to setup an automatic redirect.

https://blog.pshrmn.com/entry/single-page-applications-and-the-server/


They’re all the rage: functions passed to React components as props that are called when the component renders. But what should they be called?

“Use a Render Prop!” uses the term “render prop”, but what does that even mean?

<Component render="what?" />

Even earlier, the phrase “function as child” was used to refer to the same concept. “Child” refers to the fact that prop is a function being passed to a component through its children prop.

<Component>
{value => <div>{value}</div>}
</Component>

In addition to being peanut butter on the tongue, “function as child” doesn’t really make sense when you use…


Hey! I have moved this tutorial to my personal blog. Same content, new location. Sorry about making you click through to another page, but there isn’t a way for me to setup an automatic redirect.

https://blog.pshrmn.com/entry/how-single-page-applications-work/


A slightly edited conversation from Reactiflux

Edit (9–2–2017): This article has been updated to use react-transition-group v2. If you are using v1 (or the version that used to be bundled with React addons), you can see the context example here and the props example here.

It can be a bit confusing getting animated transitions setup with React Router v4. This article won’t cover every scenario, but we’ll go over the basics so that you can add animated transitions to your application.

react-transition-group's <TransitionGroup> is the easiest way to animate our navigation transitions, so we’ll be using that.

Understanding the Transition Group

The basic explanation of how the <TransitionGroup> works is…


Hey! I have moved my blog to my personal site. The “official” version of this post is available here: https://blog.pshrmn.com/a-little-bit-of-history/

If you wish to understand React Router, you must first study history. More specifically, the history package, which provides the core functionality for React Router. It enables projects to easily add location based navigation on the client-side, which is essential for single page applications.

npm install --save history

There are three types of history: browser, hash, and memory. The history package exports methods to create each type.

import {
createBrowserHistory,
createHashHistory,
createMemoryHistory
} from 'history'

If you are using React…


Hey! I have moved this tutorial to my personal blog. Same content, new location. Sorry about making you click through to another page, but there isn’t a way for me to setup an automatic redirect.

https://blog.pshrmn.com/simple-react-router-v4-tutorial/

Paul Sherman

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store