/* HEADER -- logo -- Nav Items BODY -- search -- RestaurantContainer -- RestaurantCard - img - name of res , star rating , cuisine , delivery tie FOOTER -- copyright -- Links -- Address -- contact */
TWO TYPES OF IMPORT/EXPORT
-
Default Export/Import (used when single component is exported)
export dafault component; import component from "path";
-
Named Export/Import (used when multiple things to be exported)
export const component; import {component} from path;
-- It is a normal js utility function
-
useState() -> superpowerful state variable in react
-
useEffect() -> called after ui is rendered
--- if no dependency arry => useEffect is called on every render
--- if dependency array is empty -> [] => useEffect is called on initial render(just once)
--- if dependency array is [btnNameReact] => useEffect is called everytime btnNameReact changes
--- always make useState() inside a component and on the starting of the component
--- never define useState() under if-else or loops or functions -> it creates inconsistency
-- rafce -> to automatically create a component
1) client side Routing -> does not make any network calls , we are using it (React is single page applcn)
2) server side Routing -> it makes network calls to the routes and gets the data then reloads the page
# componentDidMount() -> used to make api calls in class based react (because it firstly renders the component then make api calls and get the data)
--------- reder phase --------
parent constructor
parent render
FirstChild constructor
FirstChild render
SecondChild constructor
SecondChild render
<DOM UPDATED - IN SINGLE BATCH>
-------- commit phase ---------
FirstChild component Did Mount
SecondChild component Did Mount
parent component Did Mount
# lazy() -> to divide our application into chunks and wrap it inside suspense , so that our fle doesn't become too long
# another names
// Chunking
// Code Splitting // Dynamic Bundling // lazy Loading // on demand loading // dynamic imoprt
- normal css file
- scss and saas
- bootstrap
- styled component
- material ui
- talwind css
- ant design
- chakra ui
--- createContext() ---- ---- react hook -> # UseContext -- by this we can use the data anywhere in the app , without props --- use context when the data is needed at multiple places
-- Redux is not mandatory , use it whenever required --- zustand is also used , it is also a library -- Redux offer easier debugging -- It is state container for JS apps
- -------to write data ------
-- we can't do it directly
-- when we click on the add button it dispatches an action , this action will calls a function (known as reducer) and the function internally updates the slice of a redux store (cart store)
- ------- to read data ------
we will use selector and this selector will give the data, this phenomenon is known as subscribing to the store.
-- as the cart is subscribed to the store , it is automatically updated as we clicked the add button.
- Install @reduxjs/toolkit and react-redux
- Build our store
- Connect our store to our app
- Slice(cartSlice)
- dispatch(action)
- Selector
configureStore() , provider , createSlice
appStore.js , cartSlice.js
-- useSelector() , useDispatch()- > hook immer -> a small library that redux toolkit uses
-
UNIT TESTING -> testing a particular section
-
INTEGRATION TESTING -> when multiple components are talking to each other (through code)
-
END TO END TESTING (E2E TESTING) -> testing from user landing to the page to the end leaving the page
--- React Testing Library -> builds on top of DOM Testing Library by adding APIs for working with React components. (not use to write commads to install if we use npx create react-app my app , already built within it)
--- React Testing Library uses jest
--- Jest is a delightful js Testing Framework with a focus on simplicity .
---1) install react testing library ---2) install jest ---3) install using babel , command form jest site , using babel section
--4) Configure Babel to target your current version of Node by creating a babel.config.js file in the root of your project:
---5) parcel already uses babel and we are providing our own babel configuration , so there is a conflict , so we need to disable babel transpilation in the parcel and for that :
(i) go to parcel documentation (ii) go to javascript (iii) go to babel section , usage with other tools (iv) create a new file .parcelrc (v) write the code :
{
"extends": "@parcel/config-default", "transformers": { "*.{js,mjs,jsx,cjs,ts,tsx}": [ "@parcel/transformer-js", "@parcel/transformer-react-refresh-wrap" ] } }
---6) jest configuration -> npx jest --init ---7) install jsdom library (npm install --save-dev jest-environment-jsdom)
---8) npm i -D @babel/preset-react -> to make jsx work in test cases
---9) include @babel/preset-react inside my babel configuration
---10) npm i -D @testing-library/jest-dom
--- command
__ -> dunder
tests -> test case folder
--- npm run watch-test