Article summary
A few weeks ago, I attended the first-ever React Miami Conference. The conference brought in a lot of great speakers. Many of them spoke about tooling they’d either had a positive experience with or were directly involved in developing.
Using the right tools means you can spend more time being a React developer and less time being a set-up-testing-connect-database-implement-auth-workflow developer. While it’s essential to have a working grasp of all these setup steps, you might not find it useful to wade through it all with every new React project.
Here are some tools that I’m particularly excited to use in future React development projects.
Tailwind CSS
We shipped 90% unused CSS … Tailwind is the answer.
Tailwind isn’t a newly-minted tool. But, it is new to me and was mentioned in passing with so much gusto that I figured I should look it up.
Tailwind is a CSS framework that is utility-first. This reduces excessive-class naming and cuts out the bulky stylesheets. It also applies responsive utilities (e.g. will adjust well with screen size), and state variants (like a hover action). It even has a dark variant you can use to toggle dark mode! And, despite the use of utilities, it is still perfectly customizable.
Possibly the best feature of Tailwind, since we know that the best code is deleted code, is that it automatically clears out all unused CSS.
Remix Stacks
One of the tools that impressed me most at this conference was Remix Stacks. Remix is a full-stack web framework, and Stacks can generate a Remix project rapidly and easily. Kent C. Dodds presented on this topic. He stated, “Remix is not just another web framework. It’s a web framework that exposes the web to you — and you get really good at the web when you’re using it.”
Kent then demonstrated creating a Remix application and getting a production instance up in less than two minutes, built-in authentication and all.
Remix seems to value both the developer experience and the user experience strongly. It is 100% server-side rendering and employs progressive enhancement so the content will always show up quickly, regardless of the end user’s tooling.
There are three different default stacks, designed for different common use cases. However, they are customizable and have already been tweaked to support more specific goals. You can find all these examples under the remix-stack GitHub tag.
Flightcontrol
Flightcontrol, presented by its creator Brandon Bayer, lets developers utilize AWS via a digestible platform that feels more centralized. It is a newer tool, seemingly still in the early stages. Brandon described the platform as “the deployment experience of Heroku but on your own AWS account.” It has better security, scalability, and control.
Flightcontrol can mediate between existing AWS services including Fargate, RDS, and Cloudfront. Those still promised soon include Lambda, EC2 single servers, and Elasticache. Using Flightcontrol is as simple as including a flightcontrol.json configuration file in your project, or using the spiffy UI to set up and maintain resources.
Kickstart Your Next React Project
In all three cases, you could argue that the processes smoothed over by these tools offer plenty of fundamental development knowledge you shouldn’t necessarily skip. However, after so many rounds of initial React project setup, these tools can help you refocus your learning efforts to deeper parts of the codebase.
What do you think about these tools? Do they cover all the steps you’ve been itching to skip? Are they overkill? Would they take away your sense of control? Will they help you finally kickstart that side project? Let me know in the comments below!