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
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!
What is it?
Why do you need it?
What does it do 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!
What is it?
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.
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!
According to the docs:
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 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!
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!