Understand the tools which you are using, to create an application! What is create-react-app?

This article was originally published at https://www.blog.duomly.com/what-is-create-react-app/

Intro to Create React App

Setting up a ReactJS application from scratch can be a long and complicated process. You have to think about everything, like Babel, Webpack with all the plugins, testing libraries, etc. And it can also bring some issues which can take a few hours to solve.

But fortunately, there is a fast and easy solution that can be used in lots of cases, and it’s the Create React App tool. It’s enough to install it on your computer and run the simple command everything you want to create a simple ReactJS application and start working with it.

In this article, I will explain what Create React App tool is, how to install it, and use it. I’ll also Create React App templates, use it with Typescript, and what is eject.

As always, I’ve got a video version of this article for you. So, if you prefer to watch instead of reading, feel free to join me on our Youtube!

Let’s start!

What is Create React App?

Create React App is a tool created by Facebook developers that helps to bootstrap a new ReactJS project by creating a new single page application with a simple configuration with one command.

It simplifies the process of setting up a new application and makes it much less time-consuming. It’s especially useful for beginners who want to create a project and don’t want to go deeper into setting such complicated things.

Create React App doesn’t create backend or set the database; it just creates frontend, so you can use it with any backend. Under the hood, it uses Webpack and Babel.

Let’s find out how to install the Create React App tool on your machine.

Install Create React App

Previously it was required to install the Create React App package globally on your computer using npm or yarn, but right now, it’s not necessary anymore because when using npx it will install the newest version for you automatically.

So, it’s not recommended to install Create React App, and it’s enough to use npx.

npx comes with npm, and it’s available from version 5.2 and higher. npx is an npm package runner, which means it downloads and runs the package temporarily.

That’s why when we use Create React App, and it’s running just once per application lifecycle, we should use npx.

Now, let’s find out how to install the ReactJS app with Create React App.

npx create react app

There are three options when we are creating a new ReactJS project with the Create React App tool, but the most recommended one is to use npx create-react-app, but you can also do it using npm and yarn.

To create your ReactJS application in the most recommended way, you should use the following code:

npx create-react-app <app-name>

When you decide to create your ReactJS application with npm do it like this:

npm init react-app <app-name>

And with yarn, use the code below:

yarn create react-app <app-name>

If any of the methods won’t work, or return a bug, make sure you have proper versions of the tools you are using.

Create React App template

Create React App template is a pre-defined setup that consists of different libraries like React Router or Prettier. To use the Create React App template, we need to pass an additional flag to the command while creating a new project.

npx create-react-app <app-name> —template <template-name]

If you don’t select any template, Create React App will create your application using the base template.

In Create React App templates, names are always started with cra-template-<template-name>, but we don’t have to provide the long name.

There are some templates available on the internet, and also it’s possible to create a custom one, according to your needs. You can go to the npm website to find templates and search for cra-template.

When you decide to create a custom template, you need to make sure that the base folders are there as in the following structure:

cra-template-[template-name]/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created from this template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

And besides that, according to your needs, you can add additional settings, libraries, dependencies, etc.

Now, let me tell you how you can use templates to create a React application with Typescript.

Create React App Typescript

A template is provided by default with Create React App that can be used to set up ReactJS project with Typescript, without lots of additional configuration.

The template is called cra-template-typescript, so the only thing we need to pass to the command is actually typescript like in the example below:

npx create-react-app <app-name> —template typescript

And that’s it, and your Typescript ReactJS project is up and running.

Create React App eject

While using Create React App, you got a few scripts that can be run in the application like npm start, npm test, or npm run eject.

As a start, test or build are understandable commands, and most beginners will guess what’s hidden behind any of them, but it’s different with eject.

npm run eject command is a one-way operation and cannot be undone, so it’s worth thinking if we really need it.

When you are not satisfied with the configuration provided by Create React App, you need to somehow unpack the Webpack and Babel to be able to customize the config.

npm run eject will remove the single build from your project, and it will copy the config files into your project as dependencies.

If you don’t need to change the config's setting, eject is not necessary at all and may complicate some things.

If you decide to do it, rather make it at the beginning of the development.

Conclusion on Create React App

In this article, I’ve gone through what is Create React App tool, if it’s necessary to install it and how actually to use it. Besides that, I’ve told you about templates and how to set up the Typescript ReactJS app with Create React App. Finally, you’ve learned what eject is and if you should use it.

Create React App is a powerful tool that can make starting a new project fast and easy; it also allows you to create a custom template that you can use anytime you create a project.

The application will then include everything you normally have to install and setup, which makes the development even more pleasant.

Setting up the application will take almost no time with Create React App; no matter if you want to develop with Javascript or Typescript, everything will be up and running in seconds.

I hope this article is useful to you and your future project!

Thank you for reading,
Anna from Duomly