1. Why should count on 'onSubmit' event?
related commit
https://github.com/highspirit7/youtube_project/commit/c1c849e282ff181dd9ac0b30b9044584fe5424e8
At first, I did not use onSubmit event of form tag, I used onClick event of button tag inside form tag. There was the code to navigate to another route in the function attacted to the onClick event. But I found the issue that '?' is appended at the end of URL after the navigation.
You can check why in the url below. After reading this, I utilized onSubmit event of form tag. Then, the issue was gone. The issue had nothing to do with react-router.
https://github.com/remix-run/react-router/issues/1933#issuecomment-140158983
2. use Class for api
I did not create fake(mock) api in my youtube project but in the onlice class that I took, she created two files for fake api and youtube api by using Class. So I want to introduce the way she handled.
- create a file for mock data api ; fakeClient.js
- utilize mock data from JSON file locally
- based on Class, including basic apis like search, videos(get)
- create a file for real youtube data api
- utilize axios
- except using axios, the rest stay the same as mock api file
- create another file which is youtube.js that we can use in react components
- also based on Class
- can use mock both data api instance and real youtube data api
- deliver the api from youtube.js by utilizing Context api
Benefits of using Class
- If we want to inject dependency(in this case, mock data api client and realy data api client are dependencies that should be injected dynamically in order to develop step by step), Class can be useful.
- Possible to use private variables or methods. Of course we can code for that without using Class, but it is more convenient and readable with using Class.
3. state of location in react-router
related commit
https://github.com/highspirit7/youtube_project/commit/7e6a7960ef0cc12111841bb7910e2cbc409d4e2e
When coding in order navigate to video detail page by clicking Card(Each youtube video) for the first time, I actully wondered if it is possible to send data when navigating to another route in react-router. But I could not find the solution at that time. So I needed to request video data in video detail component.
Fortunately, I could learn how to send data when navigating to another route when taking Dream Coding's online class.
We can use something calles as 'state' when navigatin by react-router and we can get access to the state by using 'useLocation' hook!
So I could get rid of one unnecessary request to server!
4. should write folder names in lower case
I found that Netlify(the one I used to deploy youtube project) or other services like Vercel use linux underneath the hood. And Unix & Linux typically use case-sensitive filesystems.
But I happened to write some folders names to start with the alphabet in lower case. So when trying to deploy through Netlify, I got the error which was "Module not found : Error: Can't resolve ~". After correcting them to start with lower cased alphabets, I could succesfully deploy my youtube project through Netlify.
5. dangerouslySetInnerHTML
I wanted to make URLs in the description text of video clickable as we can see in realy youtube app. But even if I replaced URLs with anchor tag, the URLs were not clickable, just rendered as text. In order to solve this problem, I found this dangerouslySetInnerHTML.
dangerouslySetInnterHTML is alternative way to do the same job as 'innerHTML' in React.
**innerHTML gets or sets the HTML or XML markup contained within the element.(referenced by Mdn web docs)