Exploring use cases, and how I recently fell in love with Next

https://hub.packtpub.com/wp-content/uploads/2018/03/165-Cover-Image_0.png

If you are interested in frontend software development, you have probably heard of React. However, if you are new or newer, React is a JavaScript library that was built to create beautiful UI components. Most programmers add additional libraries to their React applications, and each of the frameworks in the title are based in React. There are many different cases, when and why you might want to use each one. In this blog I hope to lay out some of these cases in a digestible way so you can start building with React!

Create-React-App

https://create-react-app.dev/

First, if you are brand new, create-react-app is a perfect place to start. CRA aims to handle the minimum needed packages and development environment support to get started coding in React. It gives the developer a nice experience and will optimize your application for deployment in production. It configures webpack and Babel, and you only need to have npm and Node installed to get started.

The best use case for CRA is developing single page applications. SPAs are websites that do not require refreshing when navigating through pages. This creates a very fast, fluid-like experience when browsing. They create home environments for a user, and are able to efficiently store user data locally during the time spent on the page. The experience is simple and easy to understand, it’s no wonder these applications are so popular.

The most popular examples of single page applications you may have seen are websites like GMail as well as Twitter.

Gatsby

https://www.gatsbyjs.com/

Gatsby is the best way to develop static webpages with React. Gatsby sites are incredibly fast to build, and they are equally quick in performance. As you land on one of these static websites, the most critical data is loaded first, following by a pre rendering of any additional data, giving the user a natural experience navigating its pages.

Some of the best cases to use Gatsby are personal portfolios and blogs. It enables performative content, in a neat and orderly package. There are also thousands of plugins and templates that any developer can start with to get off the ground quickly. You are also able to seamlessly integrate services like Shopify and WordPress into your website.

Popular companies that are building with Gatsby are the Braun shaving company, well as the Impossible Foods’ Brand website.

Next

https://nextjs.org/

Last, but certainly not least, we have NextJS by Vercel. Next is an ever increasingly popular framework, that truly does it all. It takes the great things about Gatsby, and CRA and offers them independently as well as in combination to developers. The team at Vercel us challenged many of the common problems in the React community, and delivered solutions over and over again. Notably Next takes a “zero config” approach, tedious things such as routing, styling, and code-splitting are given to you out of the box.

After learning and loving React myself, I have fallen into a deeper more maddening love with NextJS and it has only just begun. The experience as a developer is unmatched, and with constant updates I feel Next is really the leading edge in React web development. Although you need not always use NextJS in creating React projects, it personally has been hard to look back now that I have gotten my feet wet.

I actually found Next by mistake, at the very least it was indirect. I was searching the archives of Reddit to find a person who made an app called TabSaver my friends and I used in college. I found the TabSaver developer Lee Robinson, and through his YouTube channel and free course on Next, have fallen in love with the technology.

Websites for TikTok, Hulu, Twitch as well as my hometown grocery store, Hy-Vee are all built with NextJS.

Conclusion

Although I am clearly biased, all of these frameworks are great for developing applications with React. I myself am a newer developer and as I find new and interesting technologies, I will continue to share my love and passions for them. It’s an incredibly exciting time to be involved in web development, and I look forward to the coming advancements that will challenge and excite me.

Resources

You can find more specific information on the things I touched on at the following places:
Create a New React App - React
*A JavaScript library for building user interfaces*reactjs.org
Create React App
*You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to…*create-react-app.dev
Gatsby
*1 Create a complete website in the time it usually takes to build a prototype Build sites with the services you want,…*www.gatsbyjs.com
Next.js by Vercel - The React Framework
*Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and…*nextjs.org
Lee Robinson - Developer, writer, creator.
*Front-end developer, JavaScript enthusiast, and course creator.*www.leerob.io

I am always happy to connect, you can find me on Twitter, LinkedIn, or my portfolio!