Skip to content

Latest commit

 

History

History
105 lines (71 loc) · 3.7 KB

class-notes.md

File metadata and controls

105 lines (71 loc) · 3.7 KB

**** Igniting React App ****

First class - Created Basic React App

Today, production ready React App - From scratch without using create react-app

to Ignite our app - Bundler eg : vite,parcel,webpack

In create react-app, they use webpack bundler

Bundler is package/module of javascript code

to have a package in code -> we need Package Manager (eg : npm, yarn)

npm init -> create package.json -> initialise our repo with npm npm init -y -> to skip configuration

why npm ? helper packages -> React app is powered by a lot of packages for bundling, optimizing, minifying maven : java :: rnpm : react

Parcel : npm install package-name -> to install a package named package-name & node modules (helper functions )is created

npm install -d package-name -> -D means dev dependency or --save-dev

package-lock.json is created and parcel code is updated in node modules

parcel is in dev dependencies of package-lock - parcel is needed in dev environment ~ update for major version ^ automatic update for minor version without anything - exact version

if update happens, package.json is updated but package-lock.json is not updated

package-lock.json - dont ignore in git but put node modules in gitignofa-rotate-180

if i have package-lock.json -> i can regenerate node modules

react cdn - not good way Good way -> in server thrugh node modules

npm install react -> in global dependencies not dev dependencies

npx parcel index.html -> Execute using npm with index.html as entry point -> Creates local server

Parcel gives us this server

Error : React is defined because we removed cdn link. Instead of that, we have to use import since this time we are using node modules - npm

Error : Browser doesnot understand import -> we have to inform its modules, use type="module" in script tag

Warning : React DOM -> createRoot is not found -> use react-dom/client

Live Server -> Auto refresh -> Hot Module Replacement (HMR) -> Parcel does it for us using File Watcher Algorithm (written in c++) Parcel.cache -> uses this space for doing all the HMR, minify and other stuffs dist folder -> minified code in dist npx parcel build index.html -> production ready build is created by parcel inside dist folder and has only 3 files : css, html and js file containing all the code including react code

Parcel Functionalities :

  1. minification (removing indentation),
  2. image optimizations,
  3. compression(renaming variables),
  4. cleaning our code,
  5. super fast build,
  6. dev and prod builds,
  7. caching while development
  8. works with older version of browsers
  9. Https on dev as well npx parcel index.html --https 10.Consistent Hashing Algorithm 11.zero config
  10. Tree shaking - Removing unwanted code

we should put .parcel-cache in gitignore -> anything which can be autogenerated in server can be put in gitignore

Initial dev build -> longer time (500ms) -> for next build -> takes less time 5ms using caching

When using parcel, we give entry point in command so we can remove main: app.js from package.json

Transitive dependencies -> dependencies of dependencies Eg: Our App is dependent on Parcel which is again dependent on other dependencies (dependency Tree)

browsersList -> cross browser compatibility for older versions of browsers

Summary Steps :

  1. npm init
  2. npm install -D parcel
  3. npm install react
  4. npm install react-dom
  5. npx parcel index.html or npx parcel build index.html
  6. import React from 'react'; in App.js
  7. import ReactDOM from 'react-dom/client'; in App.js
  8. use type="module" for index.html
  9. Remove main : app.js from package.json
  10. Write browserslist in package.json

"browsersList" : [ "last 2 versions"]

Homework :

  1. Read Parcel Documentation
  2. Types of script in script tage in html