This reviews JavaScript Ecosystem and CRA Build System
- What platform do client-side JS apps run on? This is different compared to Ruby CLI programs, which run on Terminal/command line, and Ruby on Rails apps, which run on a Heroku server.
- Without a build system, previously we have used a specific HTML tag to load a JS script, one-by-one, line-by-line. Which HTML tag loads a single JS script?
- True or false: If your JS script named
index.js
is included into the htmlindex.html
with<script src='index.js'>
, and your JS scriptindex.js
needs to useaxios
and 200 other JavaScript libraries, we can use a filepackage.json
to load each of those JavaScript libraries. Assume that there is no build system. - True or false: We can assume that every browser supports and can run without error every feature/function/syntax that JavaScript as a language has implemented.
- Minifying JS is a way to help make a web-app be more performant. Why does making a JS file smaller improve performance?
Answers!
- The browser!
<script>
- False... If there is no build system in place, for every library that our JS code relies on, we need to do one of the following things: add a
<script>
tag to theindex.html
to load in every JS library dependency, or utilize ES6's modules to import files - False, we cannot assume that every browser supports every feature of every version of JavaScript.
- A smaller JS file is a smaller file size for a server to send to the browser, which is faster to load.
Come up with a one sentence definition for each of these specific tools (you can use their official websites to come up with these)
npm
webpack
Babel
Create React App
npm
, Babel
, UglifyJS
are involved with improving the JS ecosystem in one or many ways. Which tools match which of the benefits below?
- JS file/module management
- New JavaScript Features
- Performance
What is the tool that is used to combine, or orchestrate all of the above tools?
Answers for matching!
npm
helps with JS file/module managementBabel
helps with New JavaScript FeaturesUglifyJS
helps with performancewebpack
orchestrates all of these tools!
Now that we have some context about why we need some tools, and some specific tools, let's wrap it all up into the bigger ideas.
Answer the following questions:
- What does it mean to build a project? What is a build? In a client-side app that will run on the browser, assuming that there is no server to run specific code, what is an example of output would we want from a client-side app build?
- What is the term for the entire set-up of tools that convert/improve code into a build?
- Which of these tools is a transpiler? npm, webpack, Babel, Create React App
- Which of these tools creates a bundle? npm, webpack, Babel, Create React App
- Which of these tools manages dependencies? npm, webpack, Babel, Create React App
- What is Create React App? What tools does it include?
- If we wanted to change the configuration of an app made with Create React App, what would we need to do?
- If we wanted to make a React App without using the Create React App tool, could we?
Answer!
- A client-side browser app should eventually have a set of static html, css, and js files to run.
- Build system
- Babel
- webpack
- npm
- Create React App is a tool that will generate a React project and a set of specific tools for a specific build system. It includes tools such as npm, Babel, webpack, and more!
- To change the configuration of an app made with CRA, we would need to eject the configuration, and then look at its configuration files in the folders
config
andscripts
- Yes, we can make a React app without Create React App