This article is dedicated to GatsbyJS. It's not the movie, it's the well-known React static website generator. Created in 2015, GatsbyJS is a simple way to build a (really) fast static website. Today, Gatsby is known to be used to build websites like blogs, portfolio pages, and even e-commerce applications. Gatsby’s secret to being fast is in the fact that it follows the PRPL architectural pattern, which stands for:
- Push critical resources for the initial URL route using and http/2.
- Render the initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
It is a pattern developed by Google for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch.
Because GatsbyJS is quite trendy, I decided to search for free designs and templates to be used right away. Bellow apps are tested and enhanced with small freebies (like FTP deploy scripts and authentication) just to be more useful to our audience. Let's go:
React Theme Dimension, designed by Html5 Up. This template can be used for small presentation websites (corporate or personal). Lighthouse score: 91
React Theme Emma, designed by LekoArts, suitable for protfolio websites. Fast, clean design, focused on visual assets. Lighthouse score: 96
React Theme Material-Kit by Creative-Tim. This popular design, can be used for a corporate website. This template comes with more that 100 react components, crafted to be used right away in production. Lighthouse score: 81
React Theme Jodie - crafted by LekoArts. This app uses GraphQL to fetch data from your connected Instagram account. Lighthouse score: 96
React Theme Strata - Designed by HTML5 Up, it's a simple presentation website for a small agency or freelancer. Lighthouse score: 98
If you're not convinced to use this framework already, you might be convinced by other "assets" like:
- one click deploy with Netlify
- plugins for headless platforms like Contently, Stripe
- Authentication with Auth0, Amplify
Looking for more React Themes? This article contains themes designed by HTML5 Up, LekoArts, Creative-Tim. Source code and Demo's included.
Useful? Sharing is caring. Thank You!