Batteries-included React

16 October 2020

I went to my second ever Javascript meetup last night. It was basically a free lesson from a senior frontend developer based in Wellington. I felt like I should be paying more for all the advice I was getting.

... Hopefully the guy who hosted the meetup doesn't read this and start charging!

We were taking a look into building a React application. So far I have mainly been learning React in isolation (in fact for a while I was avoiding other tools to focus on the fundamentals). But in the meetup I got to see some of the standard libraries and tools used around React.

Here are a list of the React-adgacent tools, libraries and techniques we looked at:

• TypeScript
• ES Lint
• Prettier
• React Router
• styled components
• Yarn
• Jest
• Grommet
• Apollo

These all have varying uses and levels of popularity. I had used Prettier and ES lint before. And I generally use npm instead of yarn. But it's good to know there's another option out there.

It took quite a while to set everything up, but we were discussing all of these elements of the ecosystem as well so I got to hear about each item's benefits.

I'm definitely keen to start pulling from this list when making future projects.

Next.JS #

Another option that is starting to sound increasingly tempting is Next.JS. I think I was worried about it earlier on because it sounded like quite a complex system but it doesn't sound like the developer experience is bad at all. And it sounds like a really good way to get performance out of React.

Next.JS can be used as a full static site generator. You program it to fetch data from a source at build time and add the data to your components with a function called "getStaticProps". This means you get all the performance and security of a static site but you get the composability of React components.

It can also be used to server side render pages if you need to grab dynamic data at each request from the user. And it uses a similar mechanism to turbolinks to grab pages from the server without a full page refresh.

Next.JS is an opinionated "convention over configuration" framework. Some are saying it might be "the next Ruby on Rails". I definitely want to give it a try.