Skip to content

Latest commit

 

History

History
119 lines (81 loc) · 4.22 KB

notes.md

File metadata and controls

119 lines (81 loc) · 4.22 KB

Igniting React App

In last class - Created Basic React App (using CDN)

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

  • to Ignite our app - we need 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      // initialise our repo & creates package.json
npm init -y   // to skip configuration

  • why npm ?

  • helper packages -> React app is powered by a lot of packages for bundling, optimizing, minifying

  • Parcel :

    npm install package-name     // to install a package named "package-name"  & node modules (helper functions )is created 

npm install -d package-name  // --save-dev Or -D means dev dependency

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

  • we installed parcel as dev dependencies. As, parcel is needed in dev environment

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

  • Note: package-lock.json should NOT be ignore in git but put node modules in .gitignore

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

  • React CDN - is NOT a good way

  • Good way -> in server through node modules

    `npm install react`        // Installing in global dependencies not dev dependencies 

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

  • Common Errors & Warnings

    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

    It 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). But, for the next build -> it 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

Issues:

One issue I faced while setting up parcel is, though the server was succesfully started,I was getting 404 Page not found when run the application in browser. We were not able to find the root cause for long time. Finally, my npm was outdated and it did not throw any error during build. After updating the npm, it worked.