Chapter 02 - Igniting our App - README file added for coding Assignment

Chapter 02 - Igniting our App/Coding/README.md

@@ -0,0 +1,20 @@
+## Namaste React Course by Akshay Saini
+# _Chapter 02 - Igniting our App_
+
+## Coding Assignment:
+- In your existing project
+    - initialize `npm` into your repo
+    - install `react` and `react-dom`
+    - remove CDN links of react
+    - install parcel
+    - ignite your app with parcel
+    - add scripts for “start” and “build” with parcel commands
+    - add `.gitignore` file
+    - add `browserlists`
+    - build a production version of your code using `parcel build`
+
+## References:
+- [Creating your own create-react-app](https://medium.com/@JedaiSaboteur/creating-a-react-app-from-scratch-f3c693b84658)
+- [Parcel Documentation](https://parceljs.org/getting-started/webapp/)
+- [Parcel on Production](https://parceljs.org/features/production/)
+- [BrowsersList](https://browserslist.dev/)

Chapter 02 - Igniting our App/Theory/Session 2 Theory.md

@@ -3,7 +3,7 @@
 
 
 ## Q: What is `NPM`?
-A: It is a tool used for package management and the default package manager for Node projects. NPM is installed when NodeJS is installed on a machine. It comes with a command-line interface (CLI) used to interact with the online database of NPM. This database is called the NPM Registry, and it hosts public and private 'packages.' To add or update packages, we use the NPM CLI to interact with this database. 
+A: It is a tool used for package management and the default package manager for Node projects. `NPM is installed when NodeJS` is installed on a machine. It comes with a command-line interface (CLI) used to interact with the online database of NPM. This database is called the NPM Registry, and it hosts public and private 'packages.' To add or update packages, we use the NPM CLI to interact with this database. 
 - `npm` alternative is `yarn`
 
 ### How to initialize `npm`?
@@ -14,9 +14,10 @@ npm init
 
 
 ## Q: What is `Parcel/Webpack`? Why do we need it?
-A: Parcel/Webpack is type of a web application bundler used for development and productions purposes or power our application with different type functionalities and features.
+A: `Parcel/Webpack` is type of a web application bundler used for development and productions purposes or power our application with different type functionalities and features.
 It offers blazing fast performance utilizing multicore processing, and requires zero configuration. Parcel can take any type of file as an entry point, but an HTML or JavaScript file is a good place to start.
 Parcel/Webpack are type of bundlers that we use to power our application with different type functionalities and features.
+
 ### Parcel Features:
 * HMR (Hot Module Replacement) - parcel keeps track of file changes via file watcher algorithm and renders the changes in the files
 * File watcher algorithm - made with C++
@@ -51,7 +52,7 @@ npm install -D parcel
     npx parcel build <entry_point> 
     ```
 
-## Q: What is `.parcel-cache`
+## Q: What is `.parcel-cache`?
 A: `.parcel-cache` is used by parcel(bundler) to reduce the building time.
 It stores information about your project when parcel builds it, so that when it rebuilds, it doesn't have to re-parse and re-analyze everything from scratch. It's a key reason why parcel can be so fast in development mode.
 
@@ -61,10 +62,10 @@ A: `npx` is a tool that is used to execute the packages. It comes with the npm,
 
 
 ## Q: What is difference between `dependencies` vs `devDependencies`?
-A: Dependencies should contain library and framework in which your app is built on, needs to function effectively. such as Vue, React, Angular, Express, JQuery and etc. 
-DevDependencies should contain modules/packages a developer needs during development.
-such as, parcel, webpack, vite, mocha.
-These packages are necessary only while you are developing your project, not necessary on production.
+A: `Dependencies` should contain library and framework in which your app is built on, needs to function effectively. such as Vue, React, Angular, Express, JQuery and etc. 
+`DevDependencies` should contain modules/packages a developer needs during development.
+such as, `parcel, webpack, vite, mocha`.
+`These packages` are `necessary only while you are developing your project`, not necessary on production.
 To save a dependency as a devDependency on installation we need to do, 
 ```
 npm install --save-dev
@@ -75,28 +76,28 @@ npm install --save
 ```
 
 
-## Q: What is Tree Shaking?
-A: Tree shaking is process of removing the unwanted code that we do not use while developing the application.
+## Q: What is `Tree Shaking`?
+A: `Tree shaking` is process of removing the unwanted code that we do not use while developing the application.
 In computing, tree shaking is a dead code elimination technique that is applied when optimizing code.
 
 
-## Q: What is Hot Module Replacement?
-A: Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload.
+## Q: What is `Hot Module Replacement`?
+A: `Hot Module Replacement (HMR)` exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload.
 
 
-## Q: List down your favorite 5 superpowers of Parcel and describe any 3 of them in your own words.
-A: 5 superpowers of Parcel:
-* HMR (Hot Module Replacement) - adds, or removes modules while an application is running, without a full reload.
-* File watcher algorithm - File Watchers monitor directories on the file system and perform specific actions when desired files appear.
-* Minification - Minification is the process of minimizing code and markup in your web pages and script files.
-* Image optimization
-* Caching while development
+## Q: List down your favorite `5 superpowers of Parcel` and describe any 3 of them in your own words.
+A: `5 superpowers of Parcel`:
+* `HMR (Hot Module Replacement)` - adds, or removes modules while an application is running, without a full reload.
+* `File watcher algorithm` - File Watchers monitor directories on the file system and perform specific actions when desired files appear.
+* `Minification` - Minification is the process of minimizing code and markup in your web pages and script files.
+* `Image optimization`
+* `Caching while development`
 
 
-## Q: What is `.gitignore`? What should we add and not add into it?
-A: The .gitignore file is a text file that tells Git which files or folders to ignore in a project during commit to the repository.
+## Q: What is `.gitignore`? What should we `add and not add` into it?
+A: The `.gitignore file` is a text file that tells `Git` which files or folders to `ignore` in a project during `commit to the repository`.
 The types of files you should consider adding to a .gitignore file are any files that do not need to get committed. for example, For security, the security key files and API keys should get added to the gitignore.
-package-lock.json should not add into your .gitignore file.
+`package-lock.json` should `not add` into your `.gitignore` file.
 
 The entries in this file can also follow a matching pattern.
 ```
@@ -123,9 +124,9 @@ node_modules
 ```
 
 
-## Q: What is the difference between `package.json` and `package-lock.json`
+## Q: What is the difference between `package.json` and `package-lock.json`?
 A: `package.json`:
-* this file is mandatory for every project
+* This file is mandatory for every project
 * It contains basic information about the project
 * Application name/version/scripts
 
@@ -149,24 +150,23 @@ For example  in `package.json` file:
   }
 ```
 
-* **~** : “Approximately equivalent to version”, will update you to all future patch versions, without incrementing the minor version.
-* **^** : “Compatible with version”, will update you to all future minor/patch versions, without incrementing the major version.
+* **~** : `Approximately equivalent to version`, will update you to all future patch versions, without incrementing the minor version.
+* **^** : `Compatible with version`, will update you to all future minor/patch versions, without incrementing the major version.
 
-> If none of them is present , that means only the version specified in `package.json` file is used in the development.
+> If none of them is present, that means only the version specified in `package.json` file is used in the development.
 
 
 ## Q: Why should I not modify `package-lock.json`?
 A: `package-lock.json` file contains the information about the dependencies and their versions used in the project. Deleting it would cause dependencies issues in the production environment. So don't modify it, It's being handled automatically by NPM.
 
 ## Q: What is `node_modules` ? Is it a good idea to push that on git?
 A: `node_modules` folder like a cache for the external modules that your project depends upon. When you npm install them, they are downloaded from the web and copied into the node_modules folder and Nodejs is trained to look for them there when you import them (without a specific path).
-Don't push `node_modules`in github because it contains lots of files(more than 100 MB), it will cost you memory space.
+`Don't push node_modules`in github because it contains lots of files(more than 100 MB), it will cost you memory space.
 
 
 ## Q: What is the `dist` folder?
-A: The /dist folder contains the minimized version of the source code. The code present in the /dist folder is actually the code which is used on production web applications. Along with the minified code, the /dist folder also comprises of all the compiled modules that may or may not be used with other systems.
+A: The `/dist` folder contains the minimized version of the source code. The code present in the `/dist` folder is actually the code which is used on production web applications. Along with the minified code, the /dist folder also comprises of all the compiled modules that may or may not be used with other systems.
 
 
 ## Q: What is `browserslist`?
-A: Browserslist is a tool that allows specifying which browsers should be supported in your frontend app by specifying "queries" in a config file. It's used by frameworks/libraries such as React, Angular and Vue, but it's not limited to them.
-
+A: `Browserslist` is a tool that allows specifying which browsers should be supported in your frontend app by specifying "queries" in a config file. It's used by frameworks/libraries such as React, Angular and Vue, but it's not limited to them.