Namaste-React-project

/***

• *PARCEL-BUNDLER

• CREATE-LIVE-SERVER

• HMR-HOT MODULE REPLACEMENT

• FILE WATCHER ALGORITHM

• SETUP YOUR APP WITH BABEL PLUGIN TO (.babelrc) AUTOMATIC CLEAR CONSOLE.LOG

• CONSISTENT HASHING ALGORITHM

• FILE MINIFY

• HTTPS ON DEVELOPMENT ENVIRONMENT USING NPX PARCEL INDEX.HTML --HTTPS

• TRANSITIVE DEPENDENCIES

• AUTOMATIC PIC-UP PORT NUMBER

• OLDER BROWSERS VERSION SUPPORTS

• COMPRESSION

• IMAGE OPTIMIZATION AUTOMATICALLY

• CACHING WHILE DEVELOPMENT

• SUPER FAST BUILD ALGORITHM

• ZERO CONFIG

• TREE SHAKING - REMOVING UN-WANTED CODE

• *OTHER IMPORTANT NOTE

• USE YOUR INDEX.HTML FILE IN THE START AND BUILD COMMAND IN YOUR STARTER SCRIPT

• REMOVE {main:"App.js"} <<< remove this line from package.json while using parcel

• ADD type="module" <<<ADD INSIDE YOUR SCRIPT TAG IN INDEX.HTML FILE

• *OTHER IMPORTANT NOTE

• ^2.8.2 THIS SIGN USE FOR AUTOMATIC VERSION UPDATE

• ~2.8.2 THIS SIGN USE FOR PATCH UPDATE

• 2.8.2 NOT ANY SING THEN YOUR PROJECT WORKING ONLY SPECIFIC VERSION

• PUSH YOUR PACKAGE-LOCK.JSON FILE TO YOUR GIT REPO SO WHEN WE DEPLOY YOUR APP THEN SERVER KNOW HWT VERSION DO YOU USE IN YOUR PROJECT DON'T DELETE YOUR PACKAGE-LOCK.JSON

• *OTHER IMPORTANT NOTE

• READ ABOUT REACT RECONCILIATION

• READ ABOUT The Diffing Algorithm

• HOW IT WORKS IN REACT>>>>React.createElement => Object =>HTML(DOM)

• CREATING BIG HTML STRUCTURE LIKE THIS BUT THIS IS NOT Relevant TO BIG APPLICATION SO WE MOVE TO WRITE YOUR CODE WITH HELP OF JSX

• Components always write your Components using PascalCase

• In React(Native/JS) world you must name your component in PascalCase, PascalCase is a naming convention in which the first letter of each word in a compound word is capitalized. Software developers often use PascalCase when writing source code to name functions, classes, and other objects. PascalCase is similar to camelCase, except the first letter in PascalCase is always Capitalized.js

• React 2 Type of Components

• functional - i Will use this most of the time

• Class Based Components -OLD

import React from "react"; import ReactDOM from "react-dom/client";

const heading =

Heading

//This is React element we can use like this (heading) console.log(heading); *Functional components is a like a normal function ,this is return jsx element alway write your component name using first Capital latter const HeadingComponent = () => {//This is a react components we can use like this return (

Namaste React Functional components

This is a Heading 2

) } const root = ReactDOM.createRoot(document.getElementById("root")); PASSING REACT ELEMENT INSIDE YOUR ROOT root.render(heading); //*This is React element we can use like this (heading) root.render();//\*This is a react components we can use like this

What is react element - ans-Object What is react components - ans-function

*WHEN WE PUT ONE COMPONENT INSIDE ANOTHER COMPONENT , WE CALL IT COMPONENT COMPOSITION.

/**

• *Day-4-classes
• todo:When you create a project or webApp First Do proper planning and structure layout .
• *AppLayout-planning
• Header-

•   - logo
  

•   - nav items(right side)
  

•   - cart (right side)
  

• Body-

•  -search-bar
  

•  -RestaurantList
  

•   -RestaurantCard
  

•    -image
  

•    -name
  

•    -rating
  

•    -cuisines
  

• Footer-

•    -Link
  

•    -Copyright
  

• *when we use multi element inside our components then must be wrap up inside single element JSX expressions must have one parent element
• *React.Fragment is a Component come from React core library or come from react node_modules
• Todo:---->Config Driven UI
• *Dynamic UI
• *Control UI using Data.config.json file
• *Props is a Properties
• *VIRTUAL DOM
• *RECONCILIATION ALGORITHM
• *REACT.FIBER-LEARN MORE THIS IS A NEW ALGORITHMS IN REACT >16 TO RECONCILIATION FASTER
• *ALWAYS USE UNIQUE KEY IN OUR ELEMENT NOT USING INDEXES AS A KEY

/***

• Day-5 classes

• *ALWAYS PUT YOUR HARD CODDED STRING AND DATA INSIDE YOUR CONFIG.JS OR CONSTANT.JS THIS IS A GOOD PRACTICE AND MANY PEOPLE USE CONSTANT.JS FILE FOR OTHER OTHER WAY LIKE TESTING AND PRODUCTION

• *WE ARE GOING TO CREATE RESTAURANT CARD

• *WE ARE GOING TO GET PREPARE/CREATE RESTAURANT CARD DATA

• *CONFIG DRIVEN UI

• • NOTE NOT SENDING ALL DATA TO OTHER COMPONENTS ONLY SEND THE USABLE DATA MAKE YOUR COMPONENTS LIGHTER SO YOUR APP IS WORKING FASTER

• IMPORT-SECTION-CODE DEFAULT IMPORT-IT SHOULD BE A SINGLE EXPORT DEFAULT COMPONENT *import Header from "./components/Header"; NAME IMPORT-THIS IS NOT A OBJECT DESTRUCTURING *import { Header } from "./components/Header"; ALL EXPORT COMPONENTS/FUNCTION :-SUPPOSE WE HAVE MULTIPLE COMPONENTS IN THE SAME FILE WE CAN USE/IMPORT LIKE THIS DYNAMIC IMPORT, BUT MAKE SURE YOUR ALL COMPONENTS IS NAME EXPORT IN OUR FILE THEN YOUR IMPORT LIKE THAT _import _ as controller from "./components/Header";

import obj from "./components/Header"; const {Header}=objWHEN YOU WRITE CODE LIKE THIS SO THAT IS NOT OBJECT DESTRUCTURING IT GIVE AND ERROR

*ERROR IS:-caught TypeError: Cannot destructure property 'Header' of '(0 , _headerDefault.default)' as it is undefined.

*Difference between One-way Binding and Two-way Binding *ans-One way binding: In one-way binding, the data flow is one-directional. This means that the flow of code is from typescript file to Html file. In order to achieve a one-way binding, we used the property binding concept in Angular. In property binding, we encapsulate the variable in Html with square brackets( [ ] ). We will understand this concept through an example in order to make it more comprehensible. *Two-way binding: In a two-way binding, the data flow is bi-directional. This means that the flow of code is from ts file to Html file as well as from Html file to ts file. In order to achieve a two-way binding, we will use ngModel or banana in a box syntax. To make sure the app doesn’t break, we need to import ‘FormsModule’ from ‘@angular/forms. Any changes to the view are propagated to the component class. Also, any changes to the properties in the component class are reflected in the view. To bind two properties in order to two-way binding works, declare the ngModel directive and set it equal to the name of the property. We will understand the concept through an example in order to make it more comprehensible.

one-way binding:-- learn more https://www.telerik.com/blogs/how-to-bind-any-component-data-react-one-way-binding#:~:text=One%2Dway%20binding%3A%20this%20is,provider)%20automatically%20update%20the%20other.

*FIRST APPROACH-BUT THIS IS NOT WORK PERFECT BECAUSE THIS LOGIC NEED PROPER CARD STRING WE NEED ONLY FEW WORD TO SEARCH CARD function searchFilter(searchTexts, restaurants) { const searchResult = restaurants.filter( (restaurant) => restaurant.data.name === "Chopstick" ); console.log(searchResult); } const searchText = "XYZ"; React don't track variable like this react don't know where is variable is updated so we will use state variable to keep track and sync our local state variable in React so react perform reconciliation process *and React have a 1 way data binding when we change something using state then and your js file and state inside our react and react is very smart react use diff algorithm compare one dom tree to another dom tree using diff algorithm and react have a proper key each element then react check where exactly change so react reloading component then change only react knows where is value actually change so react update particular element

*one way data bing is like we don't change directs html to js we only change js to html thats why react has one-directional data binding create local variable using useState this is react state variable come from react library And every React component have own lifecycle state We will update your state using setState function/method

_We will update your data using onChange method to update setState function then state state provide a updated state in our state variable _ we don't update variable like this in react this is a javascript metrology searchText=e.target.value

*ALWAYS PUT EXPORT DEFAULT AND ALWAYS WRITE ONE-SEPARATE COMPONENTS IN ONE FILE THIS IS A GOOD PRACTICE

Day-6

* microservices-done * monolith -done * fetch api call -done * search button lowercase-done * useEffect lifecycle method using hooks -done * create login and logout btn -done * fetch api Data using this link https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9715987&lng=77.5945627&page_type=DESKTOP_WEB_LISTING -done * * cover conditional rendering inside our react curly breaches -done * explore some js expression and statement-done * create our simmer layout-done * Earlier return * * * **note some point here when our components is render then my useState variable value is initial value *then when my components is fully render that time instant my useState() value is updated using useEffect() * * * todo: useEffect()-> lifeCycle process * componentDidMount-initial render is called that time to mounting face in showing our ui in the Dom window * componentDidUpdate- this is called initial render then after whenever my local variable state is updated then my components updated * componentWillUnMount-this is call when my components is rendered in the dom that time to components lifecycle is ended * * * todo:Homework -FIRST CHECK ALL RESTAURANTS >> -SHOW THE SIMMER UI >>> -THEN YOU DO FILTER RESTAURANT >>> -THEN FILTER RESTAURANT NOT THERE >> -THEN NOT FOUND MESSAGE IS SHOW IN THE UI -Done

WHEN YOU DOING CONDITIONAL RENDERING THEN WE FACE SOME ERROR LENGTH IS UNDEFINED THEN YOU PASS THIS SIGN "?" OPTIONAL CHAINING WRITE YOUR LOGIC FOR SIMMER UI

SUPPOSE YOUR FILTER CARD NOT MATCH IN YOUR SEARCH TEXT THEN YOU SHOWING NOT FOUND CARDS LIKE THIS if (filteredRestaurants?.length === 0 && !filteredRestaurants) return

We Don't Have any restaurant

; console.log("render"); //every time my component is re-render then this is called

*WHAT IS CONDITIONAL RENDERING IF RESTAURANTS IS EMPTY => SHOWING SIMMER UI IF RESTAURANTS HAS DATA => SHOWING ACTUAL UI NOT RENDER COMPONENTS THIS IS CALLED EARLIER RETURN let render="Render"//You are not doing this console.log(render) console.log("Render")//We are doing this and this is a expression

      ((a = 10), console.log(a))//this is a expression

        ((if(true){
        console.log("if")
      }else{
        console.log("else")
      }))
     We are not doing this  but but we have a alternative of this a alter native  is a ternary operates
     this is a (true/condition)? true:false;

• Day-7

• Todo:-->

• React-router-don for routing

• useParams for get id from url

• useRouterError() hooks for page not found

• create Error component

• use createBrowserRouter for creating path config

• pass RouterProvider in side our root.render() method

• pass one router props inside our RouterProvider components

• SSR-server side rendering

• CSR-client side rendering

• SPA-single page application

• use assets folder to contain all images and logos related to our project

• if you optimizing your application performance then put your images in CDN cloud-hosting platform then fetch and use inside your project this is a best way

• don't put your useSate hooks and other hooks outside of your components this is throw Error *Don't use unnecessary npm packages and read about all documentation of npm then put inside your project and use some important npm library for form or validation like formik and yup

• Read more on Nested Routing dynamic routing segment routing and read about loader

• Outlat-for access nested children path read and practice more about this

• Read about javascript Object read about lodash

• Read about javascript Array all method

• Todo:Most important Thing *Note-Router root path starting from / like this to="/profile" *Router parent relative path starting from '' like this to="profile"

• -

  Day-8

• NEED OUTLAT-components-from react router dom TO ACCESS OUR ALL NESTED CHILDREN

• if you pass your path starting / then this is give error and this is attach to root path so every time put path without '/' Got it.we pass relative/nested path using like this "profile" and access child route using Outlet component we always put Outlet inside your parent components

• if you not clear this time out then this time out slow down your application performance

• This is fire one time componentDidMount

• this is fire after componentWillUnmount

if you pass your path starting / then this is give error and this is attach to root path so every time put path without '/' Got it.we pass relative/nested path using like this "profile" and access child route using Outlet component we always put Outlet inside your parent components

componentDidMount only one time mount then if components is re-render then all time update not mount and functional components our components always reload and mounting again and again

So here is one more point when we update our object of state value then only particular value are changed like patch method

{response?.state?.userInfo?.bio}

Name:-{response?.state?.userInfo?.name}

Location:-{response?.state?.userInfo?.location}

Git-Profile:-{response?.state?.userInfo?.login}

Functional Components Write Here if You want But you Don't Do that practice with lifecycle method running:- And this time to click this btn then called run your components like this

         -parent render
         -first-child render
         -second-child render

*Parent -Constructor... *Parent -Render... *Child -constructor *Child -Render *Child -ComponentDidMount *Parent -ComponentDidMount... *your class base components lifecycle call like this

     * if we hve multiple sibling components then life cycle work like this
     *
     * //Dom Render face
     * parent constructor
     * parent render
     * first-child constructor
     * first-child render
     * second-child constructor
     * second-child render
     *
     *
     * //DOM Commit Face
     * first-child componentDidMount
     * second-child componentDidMount
     * Parent componentDidMount
     *
     *
     *
     *
     *
     *

class GalleryClassBaseComponents extends React.Component { constructor(props) { Every Render our contractor function will called super(props); this Supper method inherit form React.Components Read more about OPP concept's For better knows Todo:https://www.w3schools.com/jsref/jsref_class_super.asp read more about super class

We Will Create State like this
this.state = {
  count1: 0,
  count2: 2,
};
this.state = {
  userInfo: {},
};
console.log('Parent -Constructor...');

} WE PASS ASYNC HERE LIKE THIS BUT WE DO NOT PASS ASYNC INSIDE YOUR useEffect FIRST FUNCTION ARGUMENT AND READ ABOUT THIS async componentDidMount() { this.timer = setInterval(() => { console.log("Timer") }, 1000) Todo:Remember This point So you know react is a single page application so at the end of the day react has follow single code so whenever you put timer inside then this timer never end till application is close so this timer give slowDown our application performance So alway ways remember*** clearInterval every time with using ComponentWillUnmount unmounting face

HERE IS BEST PLACE FOR API CALL
try {
  const response = await fetch(
    'https://api.github.com/users/iamatulbansal'
  );
  const json = await response.json();
  console.log(json);
  this.setState({
    userInfo: json,
  });
} catch (error) {
  console.log(error);
}

console.log('Parent -ComponentDidMount...');

} componentDidUpdate(prevProps, prevState) { THIS IS LIKE DEPENDENCY ARRAY BUT DON'T COMPARE WITH USEEFFECT GOT IT if ( this.state.count1 === prevState.count1 || this.state.count1 === prevState.count1 ) { console.warn("count-Change") Code here } if (this.state.userInfo === prevState.userInfo) { console.warn('count-Change'); Code Here } console.log('Parent -ComponentDidUpdate...'); } componentWillUnmount() { clearInterval(this.timer) Todo:Alway write clean-Up this is important and read about more Todo:Remember This point So you know react is a single page application so at the end of the day react has follow single code so whenever you put timer inside then this timer never end till application is close so this timer give slowDown our application performance So alway ways remember*** clearInterval every time with using ComponentWillUnmount unmounting face console.log('Parent -ComponentWillUnmount'); console.log('cleaned up'); } render() { console.log('Parent -Render...'); const { count1, count2 } = this.state; //we can destructure our state like this return (

Gallery Class Base Components

Name:"Atul Bansal"

Count1:{count1}

Count2:{count2}

<button onClick={() => { this.setState({ count1: 1, }); }} > CountUpdate <GitProfile {...this.state.userInfo} /> <GalleryClassBaseChildComponent name={'first'} /> <GalleryClassBaseChildComponent name={'second'} />

); } } export default GalleryClassBaseComponents;

• Day-9

• todo:create custom hooks:-
• why -create custom hooks
• ans- readability, reusability, maintainability,modularity
• how create custom hooks
• ans- whenever we create custom hooks then they have must using state and the have always remember reconciliation process and always they have own life cycle process
• when create custom hooks
• and- always write custom hooks top-level of our app.js components and follow folder structure we put custom hooks inside hook and utils folder got it;
• why move our logic to particular file
• ans- readability, reusability, maintainability,modularity

• difference between custom hooks 🆚 custom helper/utility

• ans - custom hooks:- custom hooks has always written using useState or custom hooks always need and menage state inside our components/function then follow reconciliation presses
• ans - utils/ custom logic function :-at the and of only a normal javascript function and they function dose not have react state they just a javascript function got it;

• we move our helper, logic, like filter, sorting, searching, deleting and edit logic etc to particular folder/utils and inside file like helpers.js

• we use any of name like and always put top level of folder:-
• helper.js
• utility.js
• shared.js
• common.js
• move logic to helper.js file
• break your code to small small chunk
• convert fetch api logic to custom hooks
• always create hooks using/starting with use like this "useOnline",useRestaurant
• custom hooks always maintain state variable inside our hooks components
• add one more feature is user online or not with help of addEventListener("online",function), addEventListener("offline",function) always remember clean-up function and removeEventListener("online",handleOnline),removeEventListener("offline",handleOffline)
• Home Work:- extract your Body Api fetching with help of custom hooks and create customHooks for this
• make hooks for user online or Offline
• build your own NPM Library
• useOnline Hooks
• use throttling for testing user online or offline
• todo: HOw to optimizing your react hooks??
• ans:-always write cleanup function this is senior developer thinks
• always clean up your event listener
• if your are not write cleanup function and not remove your addeventlistener then after your go next route then react always remember and always create new subsequent so always add cleanup function
• try to make custom hooks:-
• useAuth()
• useLocalStorageHooks()
• now we are move to optimizing our code
• this is system design thinks:below

• interviewer ask every time how can optimize our react app so give this ans:-

• code splitting*

• chunking

• lazy loading

• dynamic bundling

• on demand loading

• dynamic import

• upload images to CDN

• import your component inside lazy loading Suspense fallbackProps give Shimmer inside fallback props

• if we have one file of 10 mb we break this chunk

• always remember import remove older import then convert to lazy loading

• and always invoke lazy loading in top level and out of component scope if you pass lazy loading inside your component

• then this give a error and re-render every time so you don't do that got it

• we need functionwe need react stateisOnline and is Offline statusbuild logic for user is on line or offlinewe need return statement todo:if you pass your path starting / then this is give error and this is attach to root path so every time put path without '/' Got it.we pass relative/nested path using like this "profile" and access child route using Outlet component we always put Outlet inside your parent componentsNote-Router root path starting from / like this to="/profile"*Router parent relative path starting from '' like this to="profile"*NEED OUTLET-components-from react router dom TO ACCESS OUR ALL NESTED CHILDREN

• Day-10

• Priority wise css

• Normal Native Pure css

• scss

• components library's -material-ui -base-ui -ant design -chakra-ui *Style components

• Tailwind css framework- you can choose accordingly you project like react,angular,nextjs,etc..

• why use tailwind css

• css on the go on same file

• less bundler size

• flexible ui customization

• todo:Don't use CDN always use npm for tailwind

• install as a devdependensy using npm for react-parcel read more from documents

• command npm i -D tailwindcss postcss

• .postcss only for parcel if you use webpack we don't need .postcss file

• what is the post css?

• ans:-postcss tall to parcel bundler to convert/compile tailwind to original css !

• then execute

• npm tailwind init for configuration file automatically generate

• tailwind.config.js
  

• added some file path-content read more from docs

• input 3 line inside our index.css and remove older all css code

• configure .postcssrc file

• now start writing your code like pure css 💥

• • Day-11

• Data is a New Oil

• What is Prop and state

• Prop is only readable and pass date from parent to child

• and state is a local variable for store a data inside that is called state

• This is Prop-drilling:-

• <ParentComponent data={"name":"Atul"}/>

•  <ChildComponent data={"name":"Atul"}/>
  

•     <GrandChildComponent data={"name":"Atul"}/>
  

• SO This is called Prop-Drilling

• what is state Lifting-up

• let say we have a components we pass a function to get data from child to parent components

• <ParentComponent data={"name":"Atul"}/> ^

•  <ChildComponent data={"name":"Atul"}/>^
  

•     <GrandChildComponent data={"name":"Atul"}/>^
  

• what is Context API and how we can use it read about this

• This is a use for centralize store in our app they solve the props drilling problem we can use for authorization and etc and what do you want you archived all think using context api and already React-router-dom is use context.provider that sit

• createContext -we can create multiple global context using createContext import from reactcore library

• useContext- reading data using hook in functional components

• provider-send data

• consumer-for reading data

• Day-12

• let's build store

• we are used react-redux and @redux/toolkit

• configureStore import from RTK (@redux/toolkit)

• first we will create store then connect to store using provider come from react-redux thenwe will create slices createSlice import from rtk

• then export actions and reducer then put our slices reducer into our configureStore

• useSelector for read data from store

• useDispatch for update and dispatch action in store

• learn more about middleware and redux-thunk and redux-saga

• Day-13 project-End

• Time for test project

• • Testing Done using jest with react testing library
• • steps:- for testing:-

• install React Testing library

• install jest

• configure jest

• installed jest-environment-jsdom

• create my first test

• configure babel

• write expect sum test

• gitignore coverage report

*/