How to Start ReactJS Development Fast. Part 1: CRA vs Next.js vs Gatsby

This material was originally published on Codica Blog, as part of the article How to Start ReactJS Development Fast: 3 Solid Tools and Best Practices.

In this post, we want to discuss the most famous ready-made solutions that will help you start developing a React app without much effort. Further, we will show you our best practices on the general React-Redux project structure. It will allow you to pattern your project properly and keep the breakdown easy-to-read.

React development tools: CRA vs Next.js vs Gatsby

To start with, we want to discuss such open-source tools as create-react-app (CRA), Next.js, and Gatsby. With their help, you can start developing your ReactJS project without wasting time on the setup process, providing a basic structure template and minimal functionality. This way, you will be able to launch fast and smoothly. Further, of course, you can change your application structure configuration if necessary.

Now let’s take an overview and compare these tools, discussing their pros and cons, specific properties, and main differences.

CRA

Create-react-app (CRA) is a tool designed by Facebook. This solution provides you with a quick start when developing ReactJS applications. It allows you to avoid a time-consuming configuration process by creating a maintainable and easy-to-use React App scaffold. The tool installs all the default dependencies, packages, and generates a default directory structure.

To install the tool and start developing a React app, run the following command lines:

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

Related reading: 4 Useful Git Commands That Will Make Your Life Easier

Next.js

To put it shortly, Next.js is a lightweight framework that allows you to create server-rendered and static React.js apps easily. You will need a server to run the project and it generates HTML on runtime. It means that each time a new request comes in, it produces a new HTML page from the server.

To have a better understanding, take a look at the Next.js workflow in detail:

Here are the core features of the framework:

• Server-Side Rendering;
• Static files creation;
• Automatic code splitting;
• Prefetching;
• Hot Module Replacement and Error Reporting.

To install the tool and start developing a React app with Next.js, run the following command line:

npm install --save next react react-dom

Then add scripts to your package.json:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Finally, run the following command:

npm run dev

Gatsby

Create-react-app provides Client-Side Rendering, Next.js provides Server-Side Rendering, but Gatsby is an open-source framework that refers to blazing-fast Static Site Generator.

If you are new at static site generation, let’s discuss how it works. So, the static side generators are those which produce HTML code during the “build” stage. Actually, it may be performed by fetching data from some APIs, markdown files, etc.

You can easily start developing a ReactJS app with Gatsby in the following way:

npm install -g gatsby-cli
gatsby new gatsby-site
cd gatsby-site
gatsby develop

CRA vs. Next.js vs Gatsby: a brief comparison

To resume all the aspects of the discussed open-source solutions, let’s take a look at a brief comparison table.

Criteria	Create-react-app	Next.js	Gatsby
Final stage	Browser	Server	‘Build’
Search engine optimization	Low	Medium	Medium
Deployment	Medium	Medium	Easy
Learning curve	Low	Medium Additionally required: React.js + several Next.js APIs	High Additionally required: React + GraphQL + several Gatsby APIs
Output	Bundle JavaScript files	HTML (initial load) + Code split chunks	Static build files (HTML+CSS+JS)

You may find interesting: The Power of CSS Processors in Web Applications Development

Final words

If you want to skip the time-consuming setup process and start quickly with the development of your React application, use such extensive open-source tools as CRA, Next.js, and Gatsby. These solutions were designed to help you install all the default dependencies and packages automatically, structuring your project in the right way.

In the next part, we will provide you with best practices on React-Redux project structuring with code samples from our experts.

Stay tuned and read our full article: How to Start ReactJS Development Fast: 3 Solid Tools and Best Practices.