Getting Started With Create React App

Some time ago I came across a statement which goes like this:

“Every five minutes there is a new Javascript framework.”

To measure the correctness of this statement I’ve tried to search the Internet for it. Apparently there is not only a new Javascript framework every five minutes, but there is even a website that tracks the amount of days since the newest Javascript framework has been released: Days since last JavaScript framework.

Jokes aside: Javascript community is evolving at the speed of light. When one is about to start a new Javascript web-application project, there is a ton of choices to make:

• What component framework/library to use;
• How to fetch data from external API;
• How to transpile your code;
• How to package your code;
• Whether or not to use a typing system;
• How to test your code;
• And many many more

It gets even worse when you start searching the Internet to get some guidance in choices to make. Unfortunately, because of such rapid developments there is no time for the community to settle down with a status quo stack which is limited to a smaller amount of choices to make.

Enter Create React App

Assuming you’ve spent some time comparing frontend frameworks and libraries and you decided to go with React for your next project. There is a handy tool which does all the choice making for you: Create React App.

Brought to you by the people of the same tech giant as behind React, Create React App (or short CRA) promises that you won’t get bothered by the choices mentioned above:

“Whether you’re using React or another library, Create React App lets you focus on code, not build tools.”

Create React App is not a framework or a library, instead it’s a tool that bundles and configures the build tools for your project. Among other industry-proven projects, CRA uses Webpack, Babel, Jest and ESLint under the hood. Let’s dive into it!

Starting a new project

We start with initiating a new project:

npx create-react-app my-app

This handy command initialises a structure for your new project in the my-app directory and looks similar to this structure:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

At this point we have a starting point for our project. Most important things here are the following:

• src - contains the source code of your app to be
• package.json and yarn.lock define dependencies
• node_modules contain actual dependencies
• public directory contains some static files and index.html file which is the entry point which runs your compiled Javascript code.

Let’s start this app!

yarn start

This will start a development server and open a browser tab at http://localhost:3000, which will load your application. You will see a spinning atom-shaped logo of React.

Follow the only instruction on this page:

Edit src/App.js and save to reload.

You’ll notice an instant reload of this page. CRA utilises Webpack’s Hot Reload feature: it reloads the page when any of the rendered components have been updated. This way you don’t have to reload the page, which is a slight improvement for your developer productivity.

The latest CRA release offers an even faster, though /experimental/, reloading feature: it reloads only the updated component keeping the state intact.

If you look at the src/App.js file, you’ll find something similar to this:

<p>

  Edit <code>src/App.js</code> and save to reload.
</p>

Go ahead and follow this instruction: change the text to something like:

- Edit <code>src/App.js</code> and save to reload.
+ Woohoo! It works! 🥳

Go back to the browser tab which opened the http://localhost:3000 and see the change you’ve made:

Fancy, right?

What’s Next?

Great question!

Create React Apps takes a bunch of decision-making out of your hands leaving almost no space for customisation. One way to configure a CRA app is by so-called “ejecting”: a command which removes CRA bits from your application and leaves you with a bunch of configuration files. While giving you a ton of flexibility, after “ejecting” the CRA, you again will be faced with a ton of choices to make plus the obligatory maintenance of choices that CRA has made for you.

This is where CRACO (Create React App COnfiguration) layer comes into play: it hooks into the CRA API to allow override some of the default configuration of the CRA. Due to its extensible plug-in API, CRACO allows you to write your own configuration plugins (or use existing ones).

Are There Any Alternatives?

There are a bunch of other frameworks, tools, libraries which remove the need for configuration and irrelevant choice-making, and allow you to focus on the code of your application.

Examples of such frameworks are NextJS and Gatsby. Both are full grown open source frameworks with a large community behind them. NextJS, part of the Vercel family, even provides developers with a whole infrastructure to easily deploy and maintain their frontend applications.

Already Built Stuff With React?

At Payt we are always looking for talented software engineers: backend, frontend or full-stack. At the time of writing our engineering team consists of nine software engineers: mostly split by frontend and backend but also some who enjoy doing both. Beyond React, our stack consists of technologies like Ruby on Rails, PostgresQL, Redis, Elastic Search, GraphQL.

Got interested? Take a look at our job listings!

Got any comment, remark or question? Please let me know: ivan@paytsoftware.com