Photo by Fili Santillán on Unsplash
Create React App is what almost every developer (including myself) learned to use first when learning the JavaScript library React and I think this has led to a couple of significant flaws.
1. Create React App builds your entire app into one file
While this is super convenient for the beginner this leads to problems later in the development process such as,
- Slower loading speeds
- No ability for staging production builds
- Hard to configure if you dislike the default configuration
Create React App uses Client Side Rendering (CSR) to bundle the Javascript files and builds one single file to render it all on the client. This is all done within the client’s browser as React does not have access to Server Side Rendering (SSR) in the default configuration. Create React App abstracts everything inside of a project and the single dependency that is being used
react-scriptswhich as a beginner might be amazing, one less thing to worry about! But now as a beginner, you might not know about what transpiler(babel) or bundler(web pack) is being used and you might not have any idea what these even are (they are very important parts of the Javascript web development cycle)!! So coming from the rampant abstraction, it stands to deal with the numerous over simplifications within Create React App can lead to some troubles understanding vital parts of Javascript. I like to think of Create React App for front-end web development like Python is to C. Python abstracts many of the biggest learning points within C such as pointers and memory allocation instead of a slower interpreted language that takes care of almost everything for the user.
Photo by Clint Patterson on Unsplash
2. Create React App’s Competition
There is no secret that the front-end framework space has become saturated with what seems like a new framework or new language coming out every six months and the new fad taking over the space. It’s even harder to learn new languages and stay up to date with these new technologies. This forces large companies when building new software to choose their dependencies wisely and as new React frameworks have become funneling in, they stick with very consistent LTS frameworks that play nicely, and Create React App is not one of them.
React has become one of if not the most popular front-end open source frameworks and has been used by companies such as Facebook, Uber, Airbnb, Shopify, Pinterest, and Netflix. And while most of the time the frameworks these big companies use are custom-made for their needs and specifications, some of the best open source projects are still available for use.
Photo by Florian Krumm on Unsplash
3. Next.js
Next.js is a production-level development bundle made by Vercel that adds incredibly useful rendering options for all your development needs such as the classic CSR that we previously discussed, SSR, and lots of hybrid options to help with any other needs. There is minimal abstraction within Next.js, allowing you to see and modify the existing processes directly. Including an API and pages section that allows the development to be quick, simple, and (mostly) easy to follow. If a beginner was going to ask what the best framework to start out with is, I would recommend Next.js as the best next step. Feel free to go more in-depth on their website and demos to get a better idea of what they offer.
4. Gatsby
Gatsby is another production-level development bundle made by the amazing people at Gatsby that allow for quick and superior loading times along with built-in GraphQL and a community full of plugins allowing you to connect any CMS under the sun with your website whether it be Shopify, WordPress, or HubSpot. The built-in GraphQL support is great for building easy graphs within your website and keeping track of communication. If you don’t know why GraphQL is so awesome read my article about it. Gatsby has a reported 50% faster load times and 20 times faster build times compared to competitors. This is all done by building their sites in a static HTML, CSS, and Javascript bundle to decrease loading and improve performance over time. This also never allows the websites to fail even if dependencies change over time as they will still be built off of the basic building blocks of the web. To learn more about their framework check out their website and demos to get a better idea of what they offer.
Conclusion
All in all, I enjoy working with all versions of React. From beginning with Create React App and moving to bigger projects like Next.js and Gatbsy, my love for development has stayed the same. If you are a beginner I would recommend that you skip the loading and learning phases with Create React App and learn the ropes with Gatsby and Next.js. The experience you gain learning something on your own is priceless.