React toolchains

Managing all the tools we have discussed earlier is extremely overwhelming. Trying to build your own react toolchain is gonna be a hard time. And it's hard to get it right and you gonna end up spending more time on the build configs than the actual App. With the tools I am introducing below, you don't have to think about Webpack, Babel, Node.js and all that.

Create-react-app

Create-react-app is the best and easiest way to build a single page react app. It generates a single HTML file needed to render on the client-side. CRA offers less SEO quality because for the page to be visible, JavaScript needs to be executed first.

Gatsby

Gatsby is originally known as a static site generator. This makes your site super fast because for every page you create, Gatsby generates a single HTML file that the user can access ahead of time with very short response time.

Gatsby also allows you to source content from anywhere you want and just load it into gatsby. And even if you want to source content from your own API, you can build your own source plugin. And then Gatsby normalizes that data into a graphQL data layer so that no matter where your data come from you access it the same way.

Gatsby also has an amazing plugin system. if you want to integrate anything to your site (like netlify or contentful CMS), just grab a plugin and plug it to your gatsby configs and you are ready to go. Gatsby has tons of plugins.