| In this video, he says how to use position relative and then use top prop to properly align the text relative to its neighbours. He says how to use background image and images in html img tag. |
| | | |
## React
| Topic | Where to find | More info |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| - Data fetching from different API links to different parts of the page.
- During this, each API will take its own time and each part of the page will load in its own time.
- How to load everything at once?
| - In Github project of John Smilga (downloaded Udemy course) you can find a lecture on Promise.allSettled() which is Lecture Number 32.
| |
| - Using Auth0, Authentication and Authorization
| | |
| - Authentication restrict access to pages until logged in
- render prop in Route to dynamically show or hide the route
- Use Redirect inside Route for hiding or showing route
- Spreading the props using rest operator
| - Lecture 36. Private Routes
| Note that we need two resources. The first one below is easily available, but second one is not easily available.
For implementing Login
For implementing redirect after login (Below link is not easily available in docs)
Interview Q : PROBLEM FACED
- It was not easy to implement redirect after login as this docs was not available directly on site.
|
| Create-React-App + React-Router-Dom+
Netlify BUG
There's a bug with this setup where react-router-dom gives page not found error when deployed to Netlify. The solution is shown in the video here.
| Lecture Number 39. Deploy Gotchas.mp4 | Interview Q : PROBLEM FACED
Solution : Make a directory called \_redirects in public folder and place the below text inside
/\* /index.html 200
Also, if there are warnings then netlify will stop the build. To avoid this, in package.json, modify the following into below lines
"build" = "CI = react-scripts build"
|
| Sidebar setup | Comfy sloth project, video 10-13 | |
| Export data from a file and that data to be exported has JSX in it | Comfy sloth project, video 17- Home page - services.mp4 | You can use JSX but while doing so import react from 'react' in that file and it will work |
| Dealing with numbers (like money / dollar formatting) | Comfy sloth project, video 24. Format price.mp4 | format is only to display price properly in UI. All the calculations actually we do in cents. |
| react-router history (navigating to a different page) | Comfy Sloth - 26. Single product - Loading, Error.mp4 | |
| Designing stars for reviews | Comfy Sloth - 29. Single Product Stars (manual approach).mp4
and
30 - array approach
| array approach
{Array.from({ length: 5 }, (dontCare, index) => index + 1).map( (singleStar) => { return ( {stars >= singleStar ? ( ) : stars >= singleStar + 0.5 ? ( ) : ( )} ); } )}
|
| - Passing data
between contexts - Passing an imported value of something as a state value in
useReducer is not possible. We can do it with useEffect - Object reference -> Products and Filtered Products both should be the same, I mean the content initially but not the pointer to it. If it's pointing to the same object then changes on one would reflect the other which is not what we need.
| Comfy Sloth - 33. Filter Context setup.mp4 |  |
| Setting up sort functionality using select and option (drop-down) | Comfy Sloth - 38. Sort Component - Controlled Input.mp4 | |
| - Setting up sort functionality (continued...)
- How to use state value in reducer instead of passing action.payload (video time frame - 3:00)
- Sort for strings - we can use localeCompare
| Comfy Sloth - 39. Sort functionality.mp4 | Sort strings -> Localecompare
|
| Setup filters (like price range, colours, max price and so on) | Comfy Sloth - 41. Filters - Text.mp4 | We would have so many fields on which we can filter. We can do all those by using dynamic object properties setting. Refer to the video |
| Get the value of button in react (text in button) | | e.target.textContent |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
## React-Testing
| Topic | Where to find | More info |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| - Different test methods (query methods)
| |  |
| - Any tool to find the query methods automagically?
| - Brad Traversy channel
- Timestamp 33:20
| Google chrome extension **Testing Playground** |
| | | |
| - Finding elements asynchronously (when page/element takes time to load)
| - React testing Library Playlist Tutorial 12 -
| |
| - How to test when we render a list of items that are dynamic from an API
| - React testing Library Playlist Tutorial 12 -
| |
| | - React testing Library 13 -
| |
| - Element already queried before user-event produces error. Once the DOM changes, it needs to be queried again.
- Let's say we first test if element does not exist in DOM. Then, after we execute a user-event then we expect the same element to be present in DOM but that doesn't work. It doesn't work because we might be writing the expect statement based on the same query we did when element didn't exist. We need to requery again for that to pass.
| To better understand this, watch this UDEMY Course by Laith Harb. 15. Adding the Error Handling Logic | |
| | | |
## Express, Mongo and Node
| Topic | Where to find | More Info |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| How to limit string values in mongoose (meaning, we should be able to use only those values mentioned) | John Udemy node course 133. Product Model | You can use enum |
| Populate the mongo db | John udemy 134. Populate DB | |
| User Modal mongoose | John Udemy 173. User Modal | |
| Mongoose Schema Validation | | |
| Setup postman tokens dynamically for different user | John Udemy 190. Set Token Dynamically in Postman | |
| Mongoose Error Handling | Task Manager API section
110. Basic Validation
122. Custom Error Handler
123. Custom Error Class
What was the doubt?
I was getting HTML error in postman if user creation (duplicate email) has error
I was wondering why I am not getting json. To understand this see 122 video
| Watch these videos mentioned o left side in the same order to learn validation |
| Setup a user as admin (ROLES) | Udemy 252. User Roles | |
| Authorize permissions (Middleware being a function call rather than a callback)
| Udemy 269. Authorize Permissions - Complete | This is helpful when the user roles are dynamic and we have certain roles hit certain routes in our app |
| | | |
| | | |
| | | |
| | | |