Flavors of React 🍭
You are probably familiar with React, an extremely popular JavaScript library for building websites and web apps in a more productive manner.
However, starting a React project isn’t quite the simple decision you think it is. Are you building a blog or a web app? Do you care about SEO? Do you need a server for complex renders?
Thankfully there are a few tools and frameworks that help you get started easily with React.
Simplest setup: Create React App or Parcel
If you are looking to create a web app with the most simple setup possible, take a look at Create React App or Parcel.
The benefit to these approaches is being able to deploy your app to a static host such as Netlify and also not worry about frontend tooling so that you can focus on building your actual app.
There is a downside to this though as with any single page app (SPA) architecture: slower performance and lack of SEO. The latter can be handled with prerendering in most cases, but do keep in mind that you’re letting the browser handle the full rendering of your app. I suggest SPAs for anything behind a login screen and MVPs (minimum viable products).
For anyone simply starting out learning React, I definitely recommend either of these tools. I personally used Create React App to build out IdeaScratch, a small app for sharing ideas.
Content-focused setup: Gatsby or React Static
If you are planning to build a blog or content-heavy website, I highly suggest Gatsby or React Static.
These take a step beyond SPAs by outputting multiple HTML files which helps solve the issue of SEO. This is the biggest benefit, and there is even the concept of a JAMstack which means that everything you’ve been able to do with other systems like WordPress you can still do with Gatsby and React Static.
The downside of course is that it’s a slightly more complex setup as well. There are APIs and plugins for you to use to create pages from other APIs or your project files (e.g. folder of Markdown files). You have to also ensure that your components can be processed by Node.js where the window object does not exist.
I use Gatsby on my personal site and I even wrote about it. The JAMstack ecosystem is constantly growing so I definitely recommend considering it for your next project.
Universal setup: Next.js or Razzle
Static sites aren’t always the answer, so if you need a powerful server-rendered setup then check out Next.js and Razzle.
The opportunity to render content on the fly is a huge benefit of using a universal setup. Imagine having profile pages for your users and wanting those pages to show up in search engines, or seeing previews of those profiles when sharing on social media. With a static setup, you’d have to pre-build HTML files for every user that you have. When you have the full power of a server though, you’re free to query your database for the right content based on the username in the URL.
Unfortunately, hosting is a major downside to this setup. You are no longer just hosting static files, but instead a full Node.js app. ZEIT Now is making interesting strides in this regard, allowing you to host a Next.js app the same way as you would a static one, but I haven’t dived into this personally yet.
My biggest project so far, IronMic, uses a universal setup with Next.js.
Flavors are a good thing!
Don’t get intimidated. Options equip you with different tools for different projects, but knowing when to use what is part of the trade. Hopefully you are able to make those decisions more easily now.
I’ve built my own custom setups in the past using early versions of webpack and so I have high respect for all of these frameworks and tools abstracting away complexities. The amount of time that they save you is invaluable.
So pick a flavor, and enjoy!
🗂 Tab Dump
This is a React-focused tab dump today!
- Learning React - A course by Lasha Krikheli to learn how to build beautiful, modern, and modularized UIs with React’s latest version. This is a course I personally reviewed and recommend!
- Application State Management with React - An article by Kent C. Dodds on how React is all you need to manage your application state.
- Reach UI Tooltip - An accessible, non-interactive popup when the user’s mouse or focus rests on an element.
- react-fetching-library - Simple and powerful fetching library for React.
📅 Past and upcoming updates
No podcast episode this past week, but I have a lot of valuable episodes in relation to what I talked about in this newsletter issue. Feel free to explore my episodes archive.
I do have some big news however with my side project announcement of free podcast websites! This is a feature that I am currently working on adding to IronMic which will take advantage of the podcast.page domain that I purchased. If you currently have a podcast or are planning on making one, please reserve your website so that you don’t miss out. I’m super excited about this so continue to follow me as I share my journey in building this out!
Speaking of excitement, I have a podcast episode planned on that particular topic and I will also be writing about a less-exciting topic: DevOps. I’m also planning on having more guests on the podcast so I’m excited about that as well. Okay that’s enough excitement, so have an exciting week.
See you next Sunday, same inbox? 👋