What does create react app do?

The create react app package can help you to set up your basic environment to start a new single page application.

3 years ago   •   4 min read

By Karla Evelize
Table of contents

The create react app package can help you to set up your basic environment to start a new single page application.  It makes using third party libraries, live-editing CSS and JSS in development and scaling to many files and components easier for you, by combining React, React-Dom with many other dependencies. *

☝️ Did you know you can just add React as a plain <script> tag on an HTML page ?

I absolutely love working with it, but it also took me some time to figure out that ‘react’ and ‘create-react-app’ are actually not the same thing. I also discovered that react was doing way less than I thought it did. Let’s do some detective work to figure it out!

This article should give you an overview of different dependencies that create-react-app uses to set up an environment for you. By the end of this article you will know:

  • What is part of create-react-app and what is part of react
  • What React is for
  • What React-Dom is for
  • Some other dependencies create-react-app makes use of
  • What these dependencies are for

Checking Package.json

🎓 Do you know which files are created as part of the React library?

As you can see, a lot of files will have been created for you already. Because create-react-app basically creates a set of dependencies (with their config set up for you) we are going to go through our package.json to see which dependencies are installed:

🎓 What dependencies do you recognize? Do you know what they are for?

Cool! We seem to have three dependencies: react , react-dom , and react-scripts . Let’s check out what they are for!

React

What is it?

React is a JavaScript Library that helps you create complex apps (or at least their UIs) in a clear, organized way.

Why do you need it?

It makes working with a DOM easier: You can write everything in JavaScript and you can focus only on what your component should look like/do, rather than how to access certain elements, etc.

What does it do for you?

Mainly, React creates a virtual DOM,  so all you have to is to write some JavaScript and React will update the DOM for you.

☝️ You can find more info on when to use react and why here. Also check out declarative vs imperative programming by Ian Mundy and why react is taking over front end development by Samer Buna.

React-dom

What is it?

A JavaScript library providing you with some methods to interact with the DOM.

Why do you need it?

To make communicating with the DOM even easier.

What does it do for you?

The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to. Remember this bit of code that is always in index.js ?

That is one of the methods provided by react-dom!

🎓 Check out the other available methods in the docs.

React Scripts

There is a third dependency listed in our package.json: react-scripts. When you have a look in yarn.lock , it turns out to be a long list of many other libraries that make your life even easier:

Let’s have a look at babel, eslint, jest and webpack!

Babel

Babel  is mainly used to convert ECMAScript 2015+ code into a backwards-compatible version of JavaScript in old browsers or environments. Basically, it is translating your ‘JavaScript — Dialect’ into something your browser understands.

Eslint

According to the docs:

"ESLint is an open-source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013." Code linting  is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines.”

Basically, ESLint helps you prevent making mistakes. It can be used as a style guide, also checks for some syntax errors, even before your JavaScript gets executed.

Jest

Jest helps you to set up and run your tests. It not only provides you with a testing structure, but also generates and displays test result plus some cool extra features such snapshots. Check out their docs and this awesome article  by  Vitali Zaidman!

Webpack

Webpack makes your app faster by bundling all your modules (components, css-files, etc.) and adding them as one <script></script> tag to your HTML-file. If you want to know more about bundlers or about the cool features webpack has to offer, check out this amazing article by Preethi Kasireddy !

Finally, I’d like to give a special shout out to the dependency webpack-dev-server  which enables live reloading. If ever you wondered why you never have to reload your page any more when you make a change to your code, this is it!

Conclusion

By now:

  • you should have a pretty good idea of what create-react-app does for you
  • You should understand what react and react-dom for you
  • we looked into the most important libraries that create-react-app depends upon through react-scripts

The most important libraries are babel, Eslint, Jest, hot-loader and webpack. The packages we did not discuss, are mostly plugins for webpack and/or babel, to make them do their jobs properly.

Was this article helpful? Did you get confused with react and create-react-app in the beginning as well? Do you have any questions left? Let us know by emailing support@codaisseur.com.

Want to know more about our web development bootcamps?

Spread the word

Keep reading