In React, one of the first big issues that comes up is figuring out how components should communicate with each other.
What's the best way to tell Component1 that Component2 was clicked?
If you start to dig a little, you'll get a ton of answers. Sooner or later Flux will be mentioned, which will only raise new questions.
So you're writing a React component. You know how to pass props to your component, and you know how to reference the props in the component with
But there's something in the middle that's a little tricker: propTypes.
In this article I'll answer questions that fit this formula:
Struggling to set up HMR with Webpack?
Are you finding the Webpack documentation to be lacking - particularly in the HMR section? Does it seem like they've left out some important parts?
If so, read on! We'll fill in the gaps together.
I was recently reminded of that time when I saw this question:
Code linters are 'metaprograms'. They are programs that take your code as input, and as output give you notes on how to improve it.
I have found linters to be invaluable so I always use one when I code. Lately I've been thinking...
It's not clear in the Webpack documentation, but there are exactly 3 ways that you can set up Webpack's hot module replacement (HMR) feature.
Let's jump right into the 3 ways. These are ordered from the simplest setup to the most complex, but none of them are that complicated. The hardest part is picking which approach is right for you.
I didn't understand how HMR works. Sometimes my projects didn't exactly match the provided examples or starter projects - and then I became lost.
This article is about why you should be using it - so if you've never heard of HMR, or if you don't use it for all your projects, read on.
It turns out it's really easy to build an image gallery with a loading indicator (spinner) in React. This one is a single component with only 70 lines including spacing and comments.
I'll walk you through creating the gallery component piece by piece. Here's what you'll get when you're done:
I was asked this question recently:
"Is there a way to detect when the children of a component have rendered completely?"
And the answer is, of course,
componentDidMount() is called when your React component is rendered.
Discord still has some quirks though. One is that the sidebar is huge and there's no way to hide it.
Luckily, Discord is a web app, and they've exposed the
Toggle Developer Tools feature. So we can hack it like a web page!
Let's start by assuming that you went ahead and used an ID to access one of your elements in a React component. What could happen? Maybe your code looks like this:
This would actually work. At first. Here's a demo. Tap the input field to see the highlight:
If you are using webpack and you thought you could just
import AWS from 'aws-sdk' or
require('aws-sdk')... you are out of luck. You'll see one of these errors:
Module not found: Error: Cannot resolve module 'fs' in ...
the request of a dependency is an expression
Familiar with how whitespace works in HTML, but not getting the results you would expect in your React component? Read on.
The easiest way to learn is probably by example, so here we go, example city!
In these examples, HTML and JSX agree on whitespace. Not super interesting - so just scan it and let's move on. For clarity,
• denotes a single space.
Imagine you have a component with a
render() method like this:
<A/> has an
<input> inside of it, and you want to capture any changes to that input, how would you do it? Turns out it's really easy. The
render() method that does it looks like this:
Have you ever been unsure of where to put your onChange or other event handler in React? Does it go in the parent, or the child? Can you put a handler in both places? Should you pass event handlers with props?
If you've ever asked yourself any of those questions, this article is for you.
Let's start by talking about how event bubbling works without React, in the regular DOM.
So you just got Webpack all set up, and you're using Vagrant or Docker. Then you run
webpack --watch. But when you make changes in your favorite text editor, Webpack doesn't even notice! It does nothing! Why?
First let's discuss how this normally works on Linux:
webpack --watch, which subscribes to file changes using inotify.
I just launched a new blog. And this is it. You're reading it right now.
This new blog is built on