x

We use the latest technologies to provide the best experience!

Please download a newer version of your browser. Click to close

What does create react app do?

Mimi Magusin
2019-02-04
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 ? 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
🎓 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? What is it? React is a JavaScript Librarythat helps you create complex apps (or at least their UIs) in an clear, organized way.Why do you need it? 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 howto access certain elements, etc.What does it do for you? 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!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? What is it? JavaScript library providing you with some methods to interact with the DOM.Why do you need it? Why do you need it? o make communicating with the DOM even easier.What does it do for you? 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 n index.js ?That is one of the methods provided by react-dom!🎓 Check out the other available methods in the docs.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 babel, eslint, jest and webpack webpack
BabelBabel 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.EslintAccording 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.JestJest 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 WebpackWebpack 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 KasireddyFinally, I’d like to give a special shout out to the dependency webpack-dev-serverwhich 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!

Interested in more?

We've some great articles for you.