How to Start ReactJS Development Fast. Part 1: CRA vs Next.js vs Gatsby
Tags: react, webdev, showdev, gatsby
Published: 2019-12-10 16:23:37

---
title: How to Start ReactJS Development Fast. Part 1: CRA vs Next.js vs Gatsby
published: true
description: How to start ReactJS development fast? Read the article where our React experts overview such tools as CRA, Next.js, and Gatsby and provide our best practices.

tags: #react #webdev #showdev #gatsby
cover_image: https://thepracticaldev.s3.amazonaws.com/i/egk1gfdgqmo6p0o3cub1.jpg
---

*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](https://www.codica.com/blog/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](https://github.com/facebook/create-react-app) (CRA), [Next.js](https://nextjs.org/), and [Gatsby](https://www.gatsbyjs.org/). 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](https://github.com/facebook/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](https://www.codica.com/blog/useful-git-commands-that-save-time/)
### Next.js
To put it shortly, [Next.js](https://nextjs.org/) 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](https://www.gatsbyjs.org/) 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 <br> Additionally required: React.js + several Next.js APIs| High <br> 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](https://www.codica.com/blog/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](https://www.codica.com/blog/how-to-start-reactjs-development-fast-3-solid-tools-and-best-practices/).