As much as I love writing React applications, I'd prefer not to. I'd rather have finished hours ago so I can spend time either on a beach outside my computer or in a videogame within it. In the spirit of laziness, here are ten ways to accelerate your React development.
1. Use a Framework
Frameworks remove degrees of freedom from the developer. You have fewer decisions because thousands of brilliant open-source developers have made them for you. At least nine times out of ten their decisions are better than yours would have been, unless you're Dan Abramov (if you are Dan Abramov, notice me, senpai). Follow the roadmap the framework sets forth to save time and write more consistent and robust code.
My favorite React framework is Next.js. You get SSR, built-in routing, automatic codesplitting, CSS-in-JS support, and more. You can even write lambdas that share business logic (such as types and validation) with your client-side code. If you host a Next.js app on Vercel, you can deploy a free, infinitely scalable application just by pushing to GitHub.
Other great frameworks include Gatsby.js and Remix.
Even if you decide not to use a framework, you should at least use a boilerplate generator such as create-react-app.
2. Use ESLint
I hope you're already using ESLint. There's no excuse to not use extremely configurable code that alerts you when you make mistakes. Two ESLint plugins are particularly helpful (and I'd argue essential) for React:
3. Use Prettier
Similarly to ESLint, you should use Prettier, an opinionated code formatter. Prettier integrates with most editors to automatically format your code on save, ensuring a consistent style. I'm all for our robot overlords taking away our freedom to get creative about trivialities.
4. Use AI-Driven Autocomplete
I hope that the first three suggestions were unsurprising. Using a framework, ESLint, and Prettier are par for the course if you're a JavaScript developer in 2020. This next suggestion is still a bit under the radar. It's my favorite developer tool to spring on friends to show I can still consort with JS hipsters.
Fully give in to the aforementioned robot overlords and use AI-driven autocomplete. My favorite so far is TabNine. You're probably rolling your eyes at the tech buzzwords, but try it and get back to me. You'll be impressed.
5. Superpower your CLI
Go a step beyond only empowering your JavaScript and plunge into the wonderful world of CLI tools. I recommend a few in particular:
- Oh My Zsh: augment your Zsh configuration with thousands of helpful functions, helpers, plugins, themes, etc.
- Scaffolder: painlessly generate boilerplate code.
- ZSH-z: quickly jump to directories you've recently visited.
6. Use a React Component Library
Unless you work for a giant company that already has an internal component library, you'll almost certainly want to use one that's pre-built. I can no longer bear the thought of writing tomes of divs and ps instead of endlessly configurable Boxs and Texts. Admire the intuitive elegance of Chakra UI (taken from their website):
import * as React from "react";
import { Box, Image, Flex, Badge, Text } from "@chakra-ui/core";
import { MdStar } from "react-icons/md";
export default function Example() {
return (
<Box p="5" maxW="320px" borderWidth="1px">
<Image borderRadius="md" src="https://bit.ly/2k1H1t6" />
<Flex align="baseline" mt={2}>
<Badge colorScheme="pink">Plus</Badge>
<Text
ml={2}
textTransform="uppercase"
fontSize="sm"
fontWeight="bold"
color="pink.800"
>
Verified • Cape Town
</Text>
</Flex>
<Text mt={2} fontSize="xl" fontWeight="semibold" lineHeight="short">
Modern, Chic Penthouse with Mountain, City & Sea Views
</Text>
<Text mt={2}>$119/night</Text>
<Flex mt={2} align="center">
<Box as={MdStar} color="orange.400" />
<Text ml={1} fontSize="sm">
<b>4.84</b> (190)
</Text>
</Flex>
</Box>
);
}
Chakra UI is my favorite component library and is accelerating in popularity. Others include Rebass and Base Web.
7. Use a CSS-in-JS library
Even when using a component library, you might need to write CSS. It's like JavaScript's mostly inescapable stepsibling. Your best option is to write CSS in JavaScript, which allows for tighter scoping of styles to components, explicit dependencies, less cascading, and other benefits. A lot of the cool kids have started to use Linaria. Linaria doesn't carry the performance costs of other CSS-in-JS libraries because it extracts CSS files during buildtime, resulting in zero runtime.
Other devs enjoy Emotion, Styled Components, and JSS.
8. Use Storybook
Storybook allows you to quickly prototype React components in isolation from the app's business logic. You can mock different configurations of props to determine how your component will render. An underappreciated benefit of Storybook is that it enforces a clearly delineated architecture. I typically build as much of my application as possible within storybook, mocking increasingly complex components and even pages. By the time I start on the business logic, a wrapper component will be responsible only for providing props to my presentational ones. My smart components are completely separate from my dumb ones. If you haven't yet, read this classic article on smart versus dumb components.
9. Don't Write Your Own Forms
Learning to write forms in vanilla React is important. It forces the developer to recognize the difference between controlled and uncontrolled components, master state management, etc. When writing production code, however, you'll almost certainly want to use a library. A good form library will not only save you time, but it will also be less prone to bugs.
You may be thinking, "Aha, but I want to asynchronously validate user input," or, "What if one input depends on another?" No, there's a form library for these and 99% of all other use cases. I recommend Formik, but React Final Form and React Hook Form are other favorites.
10. Don't Reinvent the Wheel
React is a godsend to lazy programmers. All of the most complicated generalizable components are already written! If you find yourself writing a table, or an autocomplete component, or animation utilities, or if you're importing SVGs for icons, stop writing const Table = and search for a library. These are some of my favorites:
- Framer Motion: for animations;
- React Table: for tables;
- React Icons: for icons;
- React Draggable: for making elements draggable;
- React Autosuggest: for autocomplete;
- React Datepicker: for datepicking.
About Us
At Carrots we're building a hiring platform specifically for software engineers. You can connect your GitHub, Stack Overflow, and more to go beyond your resume. Our algorithm shows where you rank among world-class talent and surfaces your profile to top companies. Check out our Telegram channel for a live feed of developer jobs.
Top comments (12)
OMG that's an amazing article with tons of useful things, I'm very happy to notice that I am already using some of these stuffs but even happier to see other cool things that I never gave a try before, thanks for writing!
You’re very welcome! :)
Thanks for mentioning Scaffolder
Glad you liked it :)
If you actually have a site, then use a framework such as NextJS (my favorite too) Gatsby or Remix. Apps don't really require that and you could just use create-react-app.
Agreed, there are certainly cases where a framework is overkill.
If you are using ESLint, it can become tricky to keep it in sync with Prettier. We abandoned Prettier in favor of 'autofix on save' in VSCode. This gives us:
I haven’t tried that yet but will check it out. Thank you for suggesting!
I'm only missing TypeScript here. That alone speeds up development tremendously.
This article blow my mind. Thanks for this information
What do you prefer if not React apps?
For forms, I also recommend Formiz as it is really simple to use and have multiple steps built in. 🙂
Ah, that looks like a great library!