Notes

ReactElement is just an object and when we do root.render reactDOM takes this object and convert it into html and push it on browser that browser understands.
creating an element is the core thing of so it comes from React and creating root nd rendering something it comes from react dom

 npm is used for when you want your things to be install inside for your project
 npx is just exactly npm but it is executing package without downloading it
npm manages the packages in your  project
package.json is configuraation for npm it keep tracks of what version of package install in ur system.
package lock.json keep tracks of exact version off all dependencies,it locks the version and it keeps the record of version

ther are 2 types of dependecncies  when we developing our app then we need dev depeneencies and normal dependencies use in production

node modules contains actual data of dependencies and packags
if we have package json and package lock json we can recreate our node modules even if it is deleted so we no need to put node modules on github and it is so huge.

# Parcel 
. Dev Build
. Local server
. HMR - Hot Module Replacement(means after changing something in code and save it then it quickly dispay it on browser)
. Caching - Faster Builds
. File Watching Algorithm - written in C++
. Image Optimization
. Minification
. Bundling 
. Error Handling
. HTTPs
. Tree Shaking - remove unused code

.jsx is stand for javascrpt xml it  allows us to write HTML in React. jsx is a html like syntax but not html inside javascript
JSX is not HTML in Js .It is HTML or XML like syntax.
JS engine doent understads JSX .

Babel is a js compiler or transpiler who converts JSX into code that JS engine understands.
behind the scene Jsx converts into React.create elemrnt and it comverts into HTMl page and babel is converting JSX into React.createElemet.

when we have one line code written in jSx it is perfectly valid but when we have mltiple lines then we have to write it in parentheses.
# React Components - 
  . Class based Components - Old way
   . Functional Components - New way => its normal js function which returns some piece of JSX code
                           when we create react componnet nam it with capital letter.