Does your app have a ton of components? Are you tired of writing out
class X extends React.Component... over and over again?
If you're using the Atom text editor, I've got a solution for you: snippets.
Check out this React component snippet in action. All I did is type 'comp', press return, and voila!
CSS Modules are an up-and-coming library for locally scoped CSS class names.
For a simple one-page app they may not be necessary. But if you're working on a large 20+ component app, this tool could really help you clean up your CSS.
Of course, adopting a new tool can be a bit nervewracking. You might be wondering:
If you use React, then at some point you've thought about how to style your components.
You were probably optimistic about finding the perfect approach... and then became dismayed when you slammed your face into this wall of style tools:
Have you ever been styling a component, only to realize that unwanted CSS rules are being applied?
Maybe you then go refactor another section of the CSS so the rules don't apply, or maybe you throw up your hands and add some
!important rules just to get it working?
This is the problem that CSS Modules solve. Let's look at the official definition of a CSS Module:
SEO is important for almost any site, and React sites are no exception.
The problem with a React site is that the content is often generated on the client. This means that search engines may not index your content, which means users won't find your pages.
Server-side rendering is one solution, but it doesn't work for everybody (for instance if your backend is already built and it's not running node).
When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features.
It's good to know, but not very helpful when you just want to get data from the server into your React components.
The truth is, there are a ton of ways to do it. You probably have thought of a couple ways yourself, but if you choose the wrong way, your code could get messy.
Sometimes you'll only need one of these, sometimes you'll want both (in an isomorphic/universal app for instance).
Either way, you'll probably want a nice concise syntax. Most developers find the
XMLHttpRequest API a little too verbose for their taste.
React can be used with static data - but this gets boring preeeettty quickly. You might be left wondering:
How do I populate my React components with data from a server-side API?
The truth is, React is a view library and doesn't provide any networking capabilities. If this is news to you, go read about what react actually is, then head back here.
Recently I found a developer asking this question about React:
"What tutorial would you recommend to get started? I'm looking for something super simple."
It's the 🎊 new year 🎉 and it's a great time to learn some new skills! React is surging in popularity and for good reason: it is extremely useful.
But when developers consider learning React, they often come up against a problem: they aren't sure what it is.
You've probably read multiple 'what is react' descriptions at this point, but you might have found them a bit lacking. Here are some that I found:
Looking for a React starter project? If you are, you probably had no problem finding one. In fact, you probably found TONS of them.
The boilerplate projects that pop out first have lots of github stars - AND lots of packages/dependencies. That can be overwhelming.
Here's what I hear from developers:
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.
webpack-dev-server on the command-line. With this approach you often don't need to change your
webpack.config.js file, so it's the simplest. WDS CLI Docs.
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.
Read on to get a deep understanding of what HMR is and how it works so you can use it in all your projects.
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.
Let's take a step back and talk about your development cycle. I'm not talking about project management or agile. Think smaller. I'm talking about this cycle:
type code -> reload your app -> type more code -> ....
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:
The refresh button is not really part of the component - I added that so you can see the spinner in action.
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.