{"id":996,"date":"2021-06-08T18:43:00","date_gmt":"2021-06-08T16:43:00","guid":{"rendered":"http:\/\/cmagazine.test\/kickoff-a-react-project-cra-next-js-or-gatsby\/"},"modified":"2022-07-25T16:34:42","modified_gmt":"2022-07-25T14:34:42","slug":"react-project-cra-nextjs-gatsby","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/react-project-cra-nextjs-gatsby\/","title":{"rendered":"Kick Off a React JS Project: CRA, Next.js or Gatsby?"},"content":{"rendered":"\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. How to choose which new React JS project to build?<\/a>
  2. CRA: create-react-app<\/a>
  3. Gatsby<\/a>
  4. Next.js<\/a>
  5. Gatsby.JS vs Next.JS vs CRA<\/a>
  6. What if I need something different?<\/a>
  7. Conclusions<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    A simple guide to avoid getting lost in the React JS<\/a><\/strong> bootstrapping solutions. Learn more about CRA, Gatsby <\/strong>and Next.js<\/strong>.<\/p>\n\n\n\n

    This is a simple guide for normal humans to avoid getting lost in the React JS bootstrapping solutions out there.<\/p>\n\n\n\n

    React is a JavaScript framework<\/a> designed to build a powerful single page app, developed on Facebook since 2013, which suggests a component-based approach to building applications.<\/p>\n\n\n\n

    The development of React JS is based on a declarative model, in which each component defines a portion of an app using the JSX syntax<\/em>, and these components can be combined.<\/p>\n\n\n\n

    Many features have evolved from the original design of React code, such as the native JavaScript <\/a>class support for React components. With this evolution, the number of features available to configure in a project pipeline increased, alongside the complexity of the configuration.<\/p>\n\n\n\n

    Starting a React JS project implies the configuration of multiple tools such as Webpack<\/strong>, Babel <\/strong>and so on, to create the foundations of your web app: depending on project requirements, the configuration can be complicated and hard to maintain.<\/p>\n\n\n\n

    This is the reason multiple code boilerplates started to pop up on code platforms like Github: the evolution of some of these boilerplates eventually led to the creation of more advanced and specialized tools such as CRA , Gatsby and Next.js to cater to common needs.<\/p>\n\n\n\n

    \"Visual<\/figure>\n\n\n\n

    How to choose which new React JS project to build?<\/h2>\n\n\n\n

    The first step in making a choice is to understand what problems the tool solves, and if these solutions match your needs. Let’s start from the end.<\/p>\n\n\n\n

    When to consider CRA<\/h3>\n\n\n\n