はてなブックマーク

There are two React hooks, useEffect and useLayoutEffect, that appear to work pretty much the same. The way you call them even looks the same. useEffect(() => { // do side effects return () => /* cleanup */ }, [dependency, array]); useLayoutEffect(() => { // do side effects return () => /* cleanup */ }, [dependency, array]); But they’re not quite the same. Read on for what makes them different and

A few months ago, Svelte 3 was released. I tried it out, ran through their tutorial, and built a few small things. And I can honestly say that I think writing Svelte feels even faster and easier than React. Svelte gave me the same spark, the same feeling of “wow!” that I had with React. In this post I want to tell you a bit about Svelte, show you how it works with a few live example apps, and poin

Trying to understand Redux, it’s really confusing how it all works. Especially as a beginner. So much terminology! Actions, reducers, action creators, middleware, pure functions, immutability, thunks… How does it all fit together with React to make a working app? You can spend hours reading blogs and trying to sift through complex “real world” apps trying to piece it together. In this Redux tutori

There are a bunch of React hooks, but useState is the workhorse. It’s the one you’ll use most often. Here we’ll cover useState with simple types, as well as useState with objects and arrays. We’ll also see a couple ways of storing multiple values. FYI if you’re brand new to React, I suggest pausing here and reading my React tutorial first – it covers all the important basics – and then come back h

The useEffect hook is the Swiss Army knife of all the hooks. It’s the solution to many problems: how to fetch data when a component mounts, how to run code when state changes or when a prop changes, how to set up timers or intervals, you name it. Pretty much anything you want to “do” in a React component other than return JSX (any sort of side effect), will go into a useEffect. (and you can have m

React 16.3 added a new Context API – new in the sense that the old context API was a behind-the-scenes feature that most people either didn’t know about, or avoided using because the docs said to avoid using it. Now, though, the Context API is a first-class citizen in React, open to all (not that it wasn’t before, but it’s, like, official now). As soon as React 16.3 came out there were articles al

Learn to think in ReactYou don't know React.But not for lack of trying! Tutorials, books, courses, podcasts, blog posts… you've done 'em all, or you've tried to. You've followed along, and sure, it made at least some kind of sense while you were assiduously reproducing each step, but just when you reach the end, everything you supposedly learned just… slips… from your mind into a vast, grey nothin

After learning a bit about React and getting into Redux, it’s really confusing how it all works. Actions, reducers, action creators, middleware, pure functions, immutability… Most of these terms seem totally foreign. So in this post we’re going to demystify how Redux works with a backwards approach and a very simple React + Redux example that I think will help your understanding. As in the what do

So you’ve built a few TODO apps. Ok, a lot of TODO apps. After the 35th one you’ve started to wonder if React can even do anything else. What’s the “next level” in terms of learning? How can you go about getting better at React? In this post I want to tell you about copywork and how it can give you limitless ideas for practice apps and help you improve. What is Copywork? I first heard the term fro

Updated May 18, 2018 You’ve got a React app, and an API server written in Express or something else. Now – how do you deploy them both to a server? There are a few ways to do this: Keep them together – Express and React files sit on the same machine, and Express does double duty: it serves the React files, and it also serves API requests. e.g., a DigitalOcean VPS running Express on port 80 Split t

If you haven’t heard of it yet, Create React App is an awesome way to get started with React. It creates a project structure for you, all set up and ready to go. You get to skip the configuration of Webpack and Babel, and get right down to writing your app. But what if your app isn’t purely frontend? What if you need to connect to a backend server? Create React App has you covered. In this post we

When you need to fetch some data for a React component, where do you do it? This question comes up all the time. There are two common places to fetch data in class components, and both are lifecycle methods: componentWillMount componentDidMount With the addition of React Hooks, there’s a new place to fetch data with the useEffectHook. Read that article for more on useEffect; in this article I’ll f

Is your React component not rendering? Quick quiz: When a React component loads data from the server in componentWillMount like this one below, what will it render? Original photo by Jay Galvin class Quiz extends Component { componentWillMount() { axios.get('/thedata').then(res => { this.setState({items: res.data}); }); } render() { return ( <ul> {this.state.items.map(item => <li key={item.id}>{it

One of the first questions new React developers have is, “How do I do AJAX requests in React?” a.k.a. “How do I make API calls in React?” Here’s an answer to that question. First: React itself doesn’t have any allegiance to any particular way of fetching data. In fact, as far as React is concerned, it doesn’t even know there’s a “server” in the picture at all. React simply renders components, usin

There are many situations when writing React where you’ll want to pass a function to a prop. Usually it’s to pass a callback down to a child component so that the child can notify the parent of some event. It’s important to keep in mind the binding of the function – what its this object will point to when it’s called. There are a few ways to make sure the binding is correct, some better than other

When writing React, should you use the React.createClass syntax or the ES6 class syntax? Or maybe neither? This post will explain some of the differences and help you decide. React can be written perfectly well in either ES5 or ES6. Using JSX means that you’ll need a “build” step already, where Babel transpiles the JSX into React.createElement calls. Many people take advantage of this and just tac

Learning React is tough. It seems there’s a lot to learn at once. You might even think that “learning React” means that you have to also learn about Redux, Webpack, React Router, CSS in JS, and a pile of other stuff. This article is designed for total beginners to React, as well as folks who’ve tried to learn in the past but have had a tough time. I think I can help you figure this out. Here’s wha