Mimi Magusin

July 10, 2018

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. 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 of the other dependencies create-react-app makes use of
✔ What these dependencies are for

Checking Package.json

When you create an app with create-react-app you will end up with the following file structure:

🎓 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 an 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 you 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 this article by Ian Mundy and this one by Samer Buna!

React-Dom

What is it?
A JavaScript library providing you with some methods to interact with the DOM.

Wy 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 of 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 guid, 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. Checkout 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 anymore 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, and we looked into the most important libraries that create-react-app depends upon through react-scripts . Most notably, these are babel, eslint, jest, hot-loader and webpack. The packages we did not discuss, are mostly plug ins 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 in the comments below!


What does create react app do? was originally published in Codaisseur Academy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Share this page