These are actually so invaluable. Huge market that hasn't been tapped here. I've been in React for a while now, but still find it incredibly fascinating to see how others would go about refactoring and writing React. Really helps out!
Hey @Web Dev Junkie, Thank you for this awesome content that you provide, i did the same project few month ago and i combined the wrong answers and the correct answer in one array, gave them "id", isClicked and "correct" field and in the end i was just checking how many of the answers had the field "correct": true. Keep up the good work i learned a lot from you.💚
Something I think would be really helpful for newer developers would be a video for setting up ESLint/Prettier for either a new or existing project. I think the opinionated structure can help a lot of newer devs but the process of configuring ESLint and Prettier can seem daunting/too complicated so they don't do it.
Your vids are awesome, sometimes it's good to see even experienced devs struggle on simple problems, that gives junior devs motivation when they struggle learning and considering to give up sometimes! Keep vids coming man
It was updating the score because you were passing the actual answer in the onAnswerClicked Function which should received the isCorrect. You could have just passed question.correct_answer === answer in the argument of onAnswerClicked so that your interface would have worked fine. No problem. I can understand its really harder when you are doing streams or making videos to really concentrate on the code and find bugs. People do make mistakes. But It was really fun watching you and really learned a lot.😃🙂
fun fact, at 20:56 ish you say that you don't like writing "function" because it's just a bunch of extra characters but actually if you count em out... it's less! "function eatBread() {}" --- is 22 characters "const eatBread = () => {}" --- is 25 characters and sure you can skip the spaces to make it less characters but only freaks do that
when you wrapped the API call to a separate function, why did you remove async? I don't quite understand when to use it and when not. Could you do a Video about it?
I would just store the answers and just check the string with question.correct_answer when the game ends or we click on check scores. Keep up the good work.
Very nice video, well and informative! Keep uploading more videos of that kind.. here people can see the difference between a mid-level dev and a senior one :)
I’d have added a “selected answer” property to the question state variable. That way the score can directly be derived from the state and you prevent using two state variables.
I’m new to React and was wondering what chrome extensions you use to get the components tab in the console? What other extensions would you recommend for web development?
needs an URL encode the text back from the API because he's getting "e;. Also, you were passing 5 as the number to get, but it only ever returned 4. I bet thats the max from the API.
Hi @Web Dev Junkie, Sorry, I don't remember your name. I really love your content on RUclips, they very are educational and have being very helpful to me in improving my knowledge - thank you so much. I am seriously working on solidifying my skillset and transitioning to a senior engineer status. And, am doing this by working on better ways to build and structure my codebase while properly incorporating and implementing OOP design principles. Please, if you'd be so kind, I'd love you to help me review this project and possibly refactor it. I'd love to hear from you about everything am doing right and MOST IMPORTANTLY the things that am doing wrong. Below are the githup repositories (But, I can't seem to be able or allowed to add the links here) Please feel free to be brutally honest if you have to. Thank you very much. Looking forward to hearing from you.
Your reduce didn't work because of operator precedence doing: acc + answeredQuestions[key] === true ? 1 : 0 is evaluated as: (acc + answeredQuestions[key] === true) ? 1 : 0 and since 0 + true is the number 1, it's never strictly equals to the boolean true Second observation would be that doing variable === true is almost never a good idea 'cause you're trying to find if (true === true) is true which it is, unless it's not :D That being said, doing: acc + answeredQuestions[key] ? 1 : 0 wouldn't have solved your problem anyway. You had to either do: acc + (answeredQuestions[key] ? 1 : 0) or the more compact and maybe sneaky acc + answeredQuestions[key] (since true gets converted to 1 and false 0) If you don't like implicit conversion you could just store 1 or 0 instead of true or false too. Third observation, if you're going to do: Object.keys(obj).reduce((acc, key) => acc + obj[key], 0) it probably makes more sense to just do: Object.values(obj).reduce((acc, val) => acc + val, 0) But, if some kind of grouping algorithm isn't involved, it's often a smell that leads to... ...Fourth observation, in the end, you didn't really need an object. You could just maintain an array of 1 and 0 in the same order as the questions, so that you just need to sum it. Using an object can also lead to a bug if you ever have a key collision (though it may never happen, but just in principle, an array makes more sense in that case, imo) So basically you could do something like: - in the Questions component start with an array of null so that you keep track of non answered questions as well (and disable the Check Answers button if there are nulls values) something like: const [points, setPoints] = useState(Array(NUMBER_OF_QUESTIONS).fill(null)); - then pass the index of each question (from the .map) to the Question component - then instead of question.question pass that index to handleAnswerClicked onClick={() => handleAnswerClicked(index, answer === question.correct_answer)} - and then you'd pass those to onQuestionAnswered so that in handleQuestionAnswered you'd do: function handleQuestionAnswered(question_idx, isCorrect) { setPoints(points => { const new_points = points.slice(); new_points[question_idx] = isCorrect ? 1 : 0 return new_points; }); } - and then calculating the score just becomes: points.reduce((acc, point) => acc + point, 0) Maybe my comment is useless, 'cause you probably would have been able to figure out some or all of the above. Live coding often reduces our ability to think quite a bit. When I'm coding with a junior and explaining at the same time, my level drops significantly. And it may very well be worse without a live audience catching possible oversight (thought they could be distracting too). You're doing a pretty good job so far (: As an extra tip that you may be able to benefit from, when you have a bug such as the reduce code you banged your head against, my personal reflex is to just F12, open the console and write a very small snippet like: var o = {a:true, b:false, c:false, d: true} // using var in the console for obvious reasons :D Object.keys(o).reduce((acc, key) => acc + o[key] === true ? 1 : 0, 0) and figure things out from there I find it way faster than using breakpoint or console logging, as you can very quickly iterate and try things out Maybe actually do it too, but I believe you would have benefited from it in that video (:
Wow thanks for all this feedback, good info in here. Yeah i often screw things up with ternary statements and precidence. It’s probably best if I just write an if statement next time
These are actually so invaluable. Huge market that hasn't been tapped here. I've been in React for a while now, but still find it incredibly fascinating to see how others would go about refactoring and writing React. Really helps out!
i got literally 26 ads while watching the video, really painful
Keep these coming. Learning "best practices" is one of the hardest things in web dev, and I use these series to do that.
Really cool video and pretty instructive. These slightly messier examples are much better for showing how to think through difficult problems
Hey @Web Dev Junkie,
Thank you for this awesome content that you provide, i did the same project few month ago and i combined the wrong answers and the correct answer in one array, gave them "id", isClicked and "correct" field and in the end i was just checking how many of the answers had the field "correct": true. Keep up the good work i learned a lot from you.💚
Something I think would be really helpful for newer developers would be a video for setting up ESLint/Prettier for either a new or existing project. I think the opinionated structure can help a lot of newer devs but the process of configuring ESLint and Prettier can seem daunting/too complicated so they don't do it.
This is gonna be very helpful
Your vids are awesome, sometimes it's good to see even experienced devs struggle on simple problems, that gives junior devs motivation when they struggle learning and considering to give up sometimes! Keep vids coming man
Thanks! I struggle often, and I agree it’s good to show others struggling and debugging is part of the job all day long
Hi Cody, great video. Some really good tips for cleaning up our code!
Thanks,
Tom
It was updating the score because you were passing the actual answer in the onAnswerClicked Function which should received the isCorrect.
You could have just passed question.correct_answer === answer in the argument of onAnswerClicked so that your interface would have worked fine.
No problem. I can understand its really harder when you are doing streams or making videos to really concentrate on the code and find bugs. People do make mistakes. But It was really fun watching you and really learned a lot.😃🙂
fun fact, at 20:56 ish you say that you don't like writing "function" because it's just a bunch of extra characters but actually if you count em out... it's less!
"function eatBread() {}" --- is 22 characters
"const eatBread = () => {}" --- is 25 characters
and sure you can skip the spaces to make it less characters but only freaks do that
Haha wow that’s a good point. I think keeping the function keyword makes it more apparent we are defining a function. I may be coming to my senses
when you wrapped the API call to a separate function, why did you remove async? I don't quite understand when to use it and when not. Could you do a Video about it?
You only need sync if you plan to await on the value, otherwise you can just return the promise directly and you don’t need ssync
I would just store the answers and just check the string with question.correct_answer when the game ends or we click on check scores.
Keep up the good work.
That would have worked as well for sure
Very nice video, well and informative! Keep uploading more videos of that kind.. here people can see the difference between a mid-level dev and a senior one :)
I’d have added a “selected answer” property to the question state variable. That way the score can directly be derived from the state and you prevent using two state variables.
I’m new to React and was wondering what chrome extensions you use to get the components tab in the console? What other extensions would you recommend for web development?
React developer tools
Great bro💡
needs an URL encode the text back from the API because he's getting "e;. Also, you were passing 5 as the number to get, but it only ever returned 4. I bet thats the max from the API.
really good example :)
Hey, I have a big project, a clone of yelp , my techstack is react in the frontend and rails in the backend, you can react to it
I don't know if you you have experience in ruby on rails
@@vaultek_ nope no experience
@@WebDevCody if you have time you can review my react application , and I will host my api by just ngrok and now everything in your end will work
“The pessimist sees difficulty in every opportunity. The optimist sees opportunity in every difficulty." - Winston Churchill,,,
this is one of scrimbas react course solo projects and tbh its really not that easy to pull off
Yeah it was actually kind of challenging to work on at midnight. Lots of state changes and tracking required. It was a good challenge for sure!
Hi @Web Dev Junkie,
Sorry, I don't remember your name.
I really love your content on RUclips, they very are educational and have being very helpful to me in improving my knowledge - thank you so much.
I am seriously working on solidifying my skillset and transitioning to a senior engineer status. And, am doing this by working on better ways to build and structure my codebase while properly incorporating and implementing OOP design principles.
Please, if you'd be so kind, I'd love you to help me review this project and possibly refactor it. I'd love to hear from you about everything am doing right and MOST IMPORTANTLY the things that am doing wrong.
Below are the githup repositories
(But, I can't seem to be able or allowed to add the links here)
Please feel free to be brutally honest if you have to.
Thank you very much. Looking forward to hearing from you.
Paste the link in my discord
@@WebDevCody I have done that. Thank you
Refactoring without typescript is a pain
Your reduce didn't work because of operator precedence
doing:
acc + answeredQuestions[key] === true ? 1 : 0
is evaluated as:
(acc + answeredQuestions[key] === true) ? 1 : 0
and since 0 + true is the number 1, it's never strictly equals to the boolean true
Second observation would be that doing
variable === true
is almost never a good idea 'cause you're trying to find if (true === true) is true which it is, unless it's not :D
That being said, doing:
acc + answeredQuestions[key] ? 1 : 0
wouldn't have solved your problem anyway.
You had to either do:
acc + (answeredQuestions[key] ? 1 : 0)
or the more compact and maybe sneaky
acc + answeredQuestions[key]
(since true gets converted to 1 and false 0)
If you don't like implicit conversion you could just store 1 or 0 instead of true or false too.
Third observation, if you're going to do:
Object.keys(obj).reduce((acc, key) => acc + obj[key], 0)
it probably makes more sense to just do:
Object.values(obj).reduce((acc, val) => acc + val, 0)
But, if some kind of grouping algorithm isn't involved, it's often a smell that leads to...
...Fourth observation, in the end, you didn't really need an object.
You could just maintain an array of 1 and 0 in the same order as the questions, so that you just need to sum it.
Using an object can also lead to a bug if you ever have a key collision (though it may never happen, but just in principle, an array makes more sense in that case, imo)
So basically you could do something like:
- in the Questions component start with an array of null so that you keep track of non answered questions as well (and disable the Check Answers button if there are nulls values)
something like:
const [points, setPoints] = useState(Array(NUMBER_OF_QUESTIONS).fill(null));
- then pass the index of each question (from the .map) to the Question component
- then instead of question.question pass that index to handleAnswerClicked
onClick={() => handleAnswerClicked(index, answer === question.correct_answer)}
- and then you'd pass those to onQuestionAnswered so that in handleQuestionAnswered you'd do:
function handleQuestionAnswered(question_idx, isCorrect) {
setPoints(points => {
const new_points = points.slice();
new_points[question_idx] = isCorrect ? 1 : 0
return new_points;
});
}
- and then calculating the score just becomes:
points.reduce((acc, point) => acc + point, 0)
Maybe my comment is useless, 'cause you probably would have been able to figure out some or all of the above.
Live coding often reduces our ability to think quite a bit. When I'm coding with a junior and explaining at the same time, my level drops significantly. And it may very well be worse without a live audience catching possible oversight (thought they could be distracting too).
You're doing a pretty good job so far (:
As an extra tip that you may be able to benefit from, when you have a bug such as the reduce code you banged your head against, my personal reflex is to just F12, open the console and write a very small snippet like:
var o = {a:true, b:false, c:false, d: true} // using var in the console for obvious reasons :D
Object.keys(o).reduce((acc, key) => acc + o[key] === true ? 1 : 0, 0)
and figure things out from there
I find it way faster than using breakpoint or console logging, as you can very quickly iterate and try things out
Maybe actually do it too, but I believe you would have benefited from it in that video (:
Wow thanks for all this feedback, good info in here. Yeah i often screw things up with ternary statements and precidence. It’s probably best if I just write an if statement next time
Good job babe! RUclips removed my other comment :(
Thanks for trying babe, they only want you to leave the same message I guess