The easiest way to create your first React app

Create React App 4.0

In this article, we are going to see how to create React apps with absolutely no build configuration. It takes less than 30 seconds and only one command that you need to run on your terminal to get started.

However, before getting into it, let me address the audience who's new to create-react -app.

What is create-react-app?

  1. It's basically a tool built by developers at Facebook.

  2. It gives us a massive head start when we start building React apps.

  3. It saves us from time-consuming setup and configuration.

  4. You simply have to run one command and Create React App sets up the tools you need to start your React project.


Philosophy Behind It

1) One Dependency

Without it, there would be tens of dependencies that you have to handle/install yourself and you also have to manage all of them whenever a new react version comes out. So let's say right now you are on react version 10 and you have to upgrade to 12. You have to go through each and every dependency to see if they are compatible with the newest React version and then you have to upgrade them. Not only that, you have to look out for any breaking changes that come with each dependency’s major release version.

That's a lot of work!

The basic philosophy behind this initiative (create-react-app) by Facebook is that there's only one dependency.

2) No Configuration Required

It uses Webpack, Babel, ESlint, and many other amazing projects but it provides you with a curated experience on top of them also there is no configuration required.

A reasonably good amount of configuration for both development and production builds is already handled for you so you can focus on writing your code.

3) No Lock-In

Also, there's no lock-in. If you are an experienced programmer and you want to custom setup. For that, you can anytime run the eject command. With a single command, all the configuration and build dependencies will be moved directly into your project so you can pick up right where you left off.


Creating our first react app

Enough already! Let's get started with the officially supported way to create single page react applications with only one command.

That command is:

npx create-react-app PROJECT_NAME

As a side note npx comes with Npm 5.2 or above. So if you have an older version of Npm, I would highly recommend you to go through the docs and see the instructions for older versions.

That's it, this process takes about 30 or 35 seconds. Finally, we have our first ever react application ready to be served and ready to be tested!

Command to run the application:

yarn start (or npm start)

If you go to the localhost:3000, our react app is here, up and running and you have officially created your first ever react application =>


A glance at the folder structure

Let's glance through the folder structure. It's a pretty lean folder structure with only a few files (the files that we need).

The create-react-app library has taken care of a lot of things. For example, if you see the package.json file, this file is pretty lean. It essentially has only about seven dependencies and if you actually see a real application created without the create-react-app it has a pretty bulky package.json file and it can be intimidating for new developers.

Pretty simple, right?


Using templates (typescript)

You can optionally add a template like this:

npx create-react-app PROJECT_NAME --template TEMPLATE_NAME

Let's say I want to start a react application but this time I want it to be a TypeScript application. Well, here you go:

npx create-react-app PROJECT_NAME --template typescript

A very similar experience as before but this time the template is TypeScript and all the files would be in a TypeScript should format.

There are many templates that you can choose from. Check out this link to learn more.


Ejecting your application

The final feature of this library is ejecting your application.

npm run eject

This is a one-way operation. Beware, you cannot go back!

So before running you really need to understand what it actually means. If you aren't satisfied with the build tool or the configuration choices made by the create-react-app library, you can always eject at any time using this command.

It will remove the single build dependency from your project. Basically, it will bring out all the dependencies directly in your package.json file. Hence, you can now handle dependencies on your own.

However, you don't have to ever use the eject. The curated feature that the create react app provides us is mostly suitable for small and middle deployments and you should never feel obligated to use this feature.

However, if you have a large and complex application and you and you really know what you are doing only then you should be messing with this.


I hope this article helped you to understand the latest NodeJS release.

Thanks for reading. If you have any questions, feel free to leave a response.


Resources

  1. https://create-react-app.dev/docs/getting-started

  2. https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md