Notes

Package.json

- is a configuration for npm

Two types of dependencies
Dev dependencies - Used for only developments Ex: npm i -D packagename
Normal dependencies - Used for all Productions
Transitive Dependencies - A library depending on other dependencies to complete the job

Tilde - ~version “Approximately equivalent to version” - Install will update with Minor patch version
Caret - ^version “Compatible with version” - Install will automatically updates with Major patch version

Package.json, Package-lock.json
In summary, the package. json file focuses on project metadata and specifying the desired versions
of dependencies, while the package-lock. json file ensures deterministic installations by locking the
exact versions of dependencies and their dependencies

Parcel - Webpck

- Dev build
- Local Server
- HMR - Hot Module Replacement
- File watching Algorithm - Written in c++
- caching and providing faster build
- Image Optimization
- Minification
- Bundling
- Compressing
- Code spliting
- Differential bundling
- Diagnostic
- Error handling
- Tree shaking - remove unused code
- Different build for dev and prod

JSX
Javascript syntax is easier to create react elements
JSX is not HTML in javascript, It is HTML/XML-like Syntax

Javascript will not understand JSX, Parcel will transpile jsx to reaxt code using babel

==> jsx => babel transpile to react.createElement => React(Object) => Render(HTML)

Attributes in JSX should be a camelCase

React components

- Class Components - Old way
- Funtional Components - New way - Is a funtion returns piece of JSX code or react element

Component Composition

- Composing two components to one another

JSX - { data } - JSX sanitizes html/value itself, Which is why it is powerful prevents cross-site scripting

Config driven UI - A website driven by data/config

Two types of exports/Import

- Named exports
  - import { name/variable } from '/file'; export const name/variable = {};
  - If you have to export multiple constants or functions.
- Default exports
  - import name/variable from '/file' - export default name/variable;
  - If we have to export one item from a file.

React Element

- Plain JS Object

Functional Component

- Normal JS function

React Hooks - Normal JS Utility functions
Multiple React Hooks

- 1 - useState()
- 2 - useEffect()

Diff between normal and state varuable
let listOfResturants = [];
const [listOfResturants] = useState([]);

Whenever state variable updates react re render the component

Reconciliation Algorithm is also known as React fibre
What is dom?

<div> <div> <img /> </div> </div>

- Virtual DOM is representation of actual DOM

- Whenever react finds changes in state variable, React checks the difference in Virtual DOM (Which is React Objext ) a
  and then updates the actual DOM(HTML)
- This is why it is faster as to compare the objects is easier than HTML
- React is fast because react is doing efficient DOM manipulation using virtual DOM
- Reactt has diff algorithm which compares difference in virtual dom to work faster

-- Monolith Architecture
One big project which handles UI, backend, DB everything together.

-- Seperation of concern or Single responsibility principle
Where every services have single responsibilities

Whenever state variables updates, react triggers reconciliation cycle(Re-render the component)

React is faster because react fibre compares virtual DOMs and only update those where there is chaanges which is why it is faster. DOM manipulation is done beautifully.

useEffect

- When we dont pass dependency array to use effect, UseEffect will be called on every re render of component.
- If dependency array is empty = [] => useEffect is called on initial render(just once)
- If dependency array has values [someStateVariable] => then it will be called every time the stateVariable updated with initial render.

useState

- The state variables are meant to be created inside the functional components on the higher level at first level.
  THis is the best practice.

React-Router-DOM

- createBrowserRouter
- Link - Behind the scene link will still use anchor tag
- RouterProvider - <RouterProvider router={appRouter} />
- useParams

React is called single page application because behind the scenes we will have single page and according to the routes the components will be added or removed accordingly in DOM.

Class Life cycles

- Render phase and comit phase
  In render phase usually constructor and render is called where as in comit phase componentDidMount will be executed.

IN react we should implement single Responsibility principle. Easy to test code, Clean, Maintainable, Reusable.

Custom hooks for API calls

Optimizing the code
...
Chuncking
Dynamic Bundling
Code Splitting
Lazy loading
Dynamic import
On demand loading

Lazy loading syntax
const componentName = lazy(()=> import('path'));

Higher order component
It is a function which takes a component, tweeks it and return updated component.

Controlled and Uncontrolled Components
If the state control of child component is handled by parent component, then it is called controlled component.

Lifting the state up

Avoid Prop Drilling

React Context
Used to createContext globally where you can update the context from anywhere and you can use the context anywhere
Main use is to avoid component prop drilling, where you have to pass same props to every nested child components and also kind of global store offered by react

Redux
FYI - Redux like library - Zustand

- Redux is not mandatory, We can use useContext in most of the cases
  Where we have huge app with multiple child parent component with huge data read/write operation we can use redux.
  Redux offers easy debugging

Slices

- Click on add -> Dispatches an action and it calls a reducer fumction and it updates slice of Redux store

Selector

- To read data from redux store slice, Selector will read and provide data to components, which is also called as subscribing to store.

Redux toolkit

- Install @reduxjs/toolkit and react-redux
- Build our store
- Connect our store to app
- create Slice(cart slice)
- dispatch action

Whenever using selector, we need to subscribe to right portion of the store, which helps in performance improments and it is very important .

RTK query

Types of Dev testing

- Unit testing - Single Unit/Component testing
- Integration testing - Flow testing between multiple component integrations
- End to End testing - Full application testing

React testing library
Jest is used in React testing library behind the scenes.

 When testing, code that causes React state updates should be wrapped into act(...):

act(() => {
/* fire events that update state */
});
/* assert on the output */