Dude I just watched this whole thing in the regular bing search because I was expecting to only be watching for a second. Wow, very thankful for this tutorial.
Some valuable lessons here, not just specific to React. Break it down into small features. Build a vertical slice that gets the basics of the app flow working then add detail to flesh out the functionality. This used to be called 'top-down-design' when I did a programming degree (many moons ago now), but the principles are the same.
I guess we could skip the JS part to calculate the height of each card, if we use grid instead of absolute positioning. Basically, apply - `display: grid` on `.card` - `grid-area: 1 / 1 / 2 / 2` on `.card .front, .card.back` so that they are placed one over the other. I think the height will be calculated based on the largest element, but someone should confirm this. And, then you can rotate the `.back` 180 deg and it should work.
i catch myself speaking words from random languages lately, and this would be a cool thing for people to learn new language words from images. I'll keep this in the watch later to reference it! thanks for the tutorial
@20:46 mark, just saving my spot. I got an idea for a project I can build to showcase my skills and that 3d animation is what I was looking for, but I may do a vertical flip, like on Quizlet.
No problems in Firefox, but I have an issue in Chrome. When I flip the cards some of them turn blank (different cards each time). Then, when I hover over them, the answer appears briefly. Is it something to do with the backface visibility. I'm stumped!
Thank you so much Kyle for this tutorial. When looking at the code, I was unsure about why you put in the max-width for the .container class. Could you explain, why we need to limit the container to a certain width?
Woah, cloned the repo and ran it, the flips still show the back (backface-visibility) in Firefox 75.0, any idea why or how to identify and avoid such limitations going forward?
You can avoid making your own decode string function by using the he library. It is already included as a module by default so just import it and decode a string by using he.decode('your string').
at 14:31, you appear to have removed any mechanism to connect the front and back classes to the flip state. This is pretty confusing as you are losing the key functionality at this juncture. I'm sure you resolve it later somehow, but it seems like poor process to not have this functioning before moving on.
Hi, You almost lost me when you were calculating the height of the elements, because it got very complicated for me. I solved that in a different way. I remove all the flex related properties from the .card element, then I removed the position: absolute from the .front element, and added position: absolute, top: 50%, left: 50%, and translate(50%, -50%) to the .back element.
Yeah you're right, it should be in a self contained component, I think he just wanted to breeze by the concepts of the video and just didn't bother creating a separate component.
Hi Kyle, i never miss ur video. I want to take ur react course for my semester project. But I can't afford it , it's too expensive in indian rupees. If u could help me i will be glad. And this video is great as always. Thanks for the youtube videos.
heyy there i always watch your tutorials they are very useful thanks for that .... i have a question for you ... i made back-end server with node.js and when i try it with postman it works perfectly it shows json data and i used it for android app ... and now i want this server to make webapp and i'm afraid that when i use same link for the android app i used the json data comes and anyone can use postman and get all the data and that's bad right? so how can hide the json data from user. Sorry for my english
Hi WebDev simplified, I enjoy your content. But just as a note, your statement about keys preventing rerendering is incorrect. Keys are used in *reconcilation* not re-rendering. Keys are also often used in practice to hint React on when to destroy and re-construct a class component (when keys changed)
anyone have any idea why I'm getting the following error and the card isn't flipping? *Custom property ignored: not scoped to the top-level :root element .card.flip { --rotate-y: 180deg; } *
Nevermind, I figured it out. I'm using Gatsby and that was giving me some problems. I didn't need to use a variable for the Y rotation. Instead, I used .card.flip { transform: rotateY(180deg); }
Can anyone help with the issue which I am facing on the video timer ?[9.58 ] when i edit the question and save the changes as shown in the video. the browser is not refreshing in the flashCard. When I add some h1 tag in app.js itself and edit the text, the browser is refreshing. React version is ^18.2 I know it may seem to be a simple Issue. Solutions Appreciated. Thanks
can anyone share how would you break it down into more components, such as a component for the header, and then category select... I tried doing this and exporting useRef variables but got some errors
read the new official react documentation. most tutorials on youtube, including this one, are teaching some bad habits when it comes to the usage of useEffect
hey bro i am 14year old boy i love to watch your videos and i've learned many much from you. I request you to please create a seperate video on how to posts using markdown. I'ld love if u create that........
Hum the backface-visibility or maybe the transform-style property does not work correctly in last FirefoxDev version... accordingly to caniuse.com they should but nevertheless they don't... any ideas? Tried prefix but nothing happen...
Hey, if you put backface visibility on .card .front, .card .back as well and then copy the padding, height, width, border-radius box- shadow and the alignment into .card .back it should work
@@richardme123 Thanks, I actually solved adding this selector: .card.flip .front { opacity: 0; } It should work using opacity, display or visibility... also top:50%; transform translate(-50%); but the other 3 are simplier.
If you loop through an array how the array index cannot be unique? Besides you can always run your own increment. Date should not be used in this case.
Was not able to get right api with params, don't know why. If somebody have the same problem just .get this api `opentdb.com/api.php?amount=${amountEl.current.value}&category=${categoryEl.current.value}` without params
ReactJs is cool, it dominates US job markets, but I think Svelte will surpass React sooner or later, because Mr. Rich Harris, the creator Of Svelte, make Svelte a much better development tool / language / tech, and it is so easy to learn and get started/acquainted and is much powerful than ReactJS. Mr. Rich Harris apparently knows programming better than Facebook, I am sure people will love Svelte and fully embrace it pretty soon, It is time for ReactJs to take a rest / step aside !!!
There is no difference between all these frameworks which are basically inconvenient backend style templating tools with manual data binding and inline js code.
I don't understand what you mean when you say "I'm destructing that all the way up here." It would be better if you just use props or else explain what you are doing better.
It would have been far less confusing if where you set your useState you had a different name for the current state than 'flashcards' because when you write flashcards = {flashcards} we don't know which side of the equation is what. Same when you do the same thing in passing props to the flashcard component.
those extensions that make coding faster, like rfc creating the code, are not good for beginners... beginners need to type as much as they can because they need to memorize things BUT lets be honest, these video are just entertainment and advertisement for your courses.. who really wants to learn goes to the computer and types npx create-react-app and starts playing around
@@aammssaamm I took your very helpful advice and looked up few links , his way comes up in most of them its either that or using regex or jquery. Do you have a better solution or should i keep reading documentaion maybe im missing something www.w3resource.com/javascript-exercises/javascript-string-exercise-35.php javascriptkit.com/script/script2/removehtml.shtml stackoverflow.com/questions/822452/strip-html-from-text-javascript
Dude I just watched this whole thing in the regular bing search because I was expecting to only be watching for a second. Wow, very thankful for this tutorial.
Years later, and this is still a great tutorial, thank you.
Kyle i enjoy your work on this channel, keep it practical, I use a lot of your techniques!! thanks man
Great to hear!
This guy explains better than many other pluralsight teachers, Congratulations !!
My neighbor is the CEO of Pluralsight. I'll be sure to tell him
Just finished a react course so perfect timing!
can you tell me please the name of the course??
@@jonasjo9091 there's a shit ton of courses online go find them
another amazing video by Kyle Cook , what a tutor!
you're the best man
Some valuable lessons here, not just specific to React. Break it down into small features. Build a vertical slice that gets the basics of the app flow working then add detail to flesh out the functionality. This used to be called 'top-down-design' when I did a programming degree (many moons ago now), but the principles are the same.
Thanks for including the CSS as well. All together makes this one of the best tutorials I've ever seen in yt. Cheers!
Kyle, this is fantastic. Thank you so much. I am definitely going to purchase some of your paid courses after working through that. 11/10
you are so amazing kyle. I am starting to learn react and i will pick this for practice.
Thanks just started learning react this week and was looking for tutorials that used hooks.
Kyle always have the perfect tutorial I am looking for.
This guy is a wizard. "Ye a wizard, Kyle"
This was an awesome tutorial, Kyle! I appreciate you sharing it. These techniques will definitely help me with my personal web projects.
I guess we could skip the JS part to calculate the height of each card, if we use grid instead of absolute positioning. Basically, apply
- `display: grid` on `.card`
- `grid-area: 1 / 1 / 2 / 2` on `.card .front, .card.back`
so that they are placed one over the other. I think the height will be calculated based on the largest element, but someone should confirm this. And, then you can rotate the `.back` 180 deg and it should work.
That sounds like a much better solution!
i catch myself speaking words from random languages lately, and this would be a cool thing for people to learn new language words from images. I'll keep this in the watch later to reference it! thanks for the tutorial
Just watched this still an amzing tutorial keep helping others boss appreciate guys like you!
You are great at explaining and I am very hooked on reactJS now :))
Awesome as always 👍😀
This is amazing
Kyle, thanks a lot for you share with us all these valuable knowledge!
Thank you very much!! Your classes really helped!!! More videos like this please.
@20:46 mark, just saving my spot. I got an idea for a project I can build to showcase my skills and that 3d animation is what I was looking for, but I may do a vertical flip, like on Quizlet.
Please build on some project react and redux with api
Great tutorial. I love react. You gave me inspiration to create a react tutorial on my channel.
Better than many Udemy course I took
It was a really interesting and useful tutorial. I appreciate your time spent on it.
No problems in Firefox, but I have an issue in Chrome. When I flip the cards some of them turn blank (different cards each time). Then, when I hover over them, the answer appears briefly. Is it something to do with the backface visibility. I'm stumped!
Hi Kyle!
This was a very helpful tutorial. But I gotta ask, where do you find all these project ideas?
Kyle, Thanks a lot for this great content! Highly appreicate your efforts!
Thank you so much!
I'm so happy to see you again ❤❤❤
Thanks. Great to have React projects!
Thank you so much Kyle for this tutorial. When looking at the code, I was unsure about why you put in the max-width for the .container class. Could you explain, why we need to limit the container to a certain width?
Thank you for your hard work, you are the best :)
Very helpful. Thank you so much
Please try to use different naming
{flashcards.map(flashcard => {
return
})}
its super confusing
agree!
Kyle should creat a music player project with vanilla js, it will be cool to build one for everyone else !!!
Kyle (Academy). I love this!
Could you possibly talk more about the tools you use such as "axios?"
Hi Kyle! Do you have any video where you explain why you prefer to work with function components in React instead of class components ?
What keyboard do you use? It sounds so satisfying.
Could you make a video about making a real time chat application with the backend connected?
Woah, cloned the repo and ran it, the flips still show the back (backface-visibility) in Firefox 75.0, any idea why or how to identify and avoid such limitations going forward?
I was wondering if I was the only one seeing this happen
Sadly, it's a known bug in firefox... for at least 7 years now.
thanks a lot
i love you kyle
I did exactly the same but I get next error:
Cannot read property 'map' of undefined
Any idea?
Can a react beginner watch this?
Yes, you can it's pretty basic !!
Why to use instead of ?
Im not understanding how setHeight is actually changing the height. In state, the height variable is unused.
Awesome. Thanks.
his eyes were literally shining
You can avoid making your own decode string function by using the he library. It is already included as a module by default so just import it and decode a string by using he.decode('your string').
Can this project help us a little bit?
at 14:31, you appear to have removed any mechanism to connect the front and back classes to the flip state. This is pretty confusing as you are losing the key functionality at this juncture. I'm sure you resolve it later somehow, but it seems like poor process to not have this functioning before moving on.
Hi, You almost lost me when you were calculating the height of the elements, because it got very complicated for me. I solved that in a different way. I remove all the flex related properties from the .card element, then I removed the position: absolute from the .front element, and added position: absolute, top: 50%, left: 50%, and translate(50%, -50%) to the .back element.
I'm still quit new considering React. What is the reason that we don't put the whole header section in a separate React component?
Yeah you're right, it should be in a self contained component, I think he just wanted to breeze by the concepts of the video and just didn't bother creating a separate component.
Hi Kyle, i never miss ur video. I want to take ur react course for my semester project. But I can't afford it , it's too expensive in indian rupees. If u could help me i will be glad. And this video is great as always. Thanks for the youtube videos.
Hi. If you send me a message on my course platform which is linked in the description I can help you out.
@@WebDevSimplified thanks. I sent u a message
@@WebDevSimplified wow bro, it's a great move. Respect
heyy there i always watch your tutorials they are very useful thanks for that .... i have a question for you ... i made back-end server with node.js and when i try it with postman it works perfectly it shows json data and i used it for android app ... and now i want this server to make webapp and i'm afraid that when i use same link for the android app i used the json data comes and anyone can use postman and get all the data and that's bad right? so how can hide the json data from user.
Sorry for my english
I love you, man
hi, nice job, dummy question: can be this run on google appscript and embed into a google docs?
Hi WebDev simplified, I enjoy your content. But just as a note, your statement about keys preventing rerendering is incorrect. Keys are used in *reconcilation* not re-rendering. Keys are also often used in practice to hint React on when to destroy and re-construct a class component (when keys changed)
Don't know what I am doing wrong but I only get a blank page. Don't know how to get the dev build to show the flashcards
Can you at least at another component part 2. so, we have an SRS and then add audio file?
thank u very much need to lear matching by line game
i love you man
How do you separate the "Control" form into it's own component and pass data from there to App?
This is working fine in Firefox. Not working in chrome and safari
anyone have any idea why I'm getting the following error and the card isn't flipping? *Custom property ignored: not scoped to the top-level :root element
.card.flip {
--rotate-y: 180deg;
} *
Nevermind, I figured it out. I'm using Gatsby and that was giving me some problems. I didn't need to use a variable for the Y rotation. Instead, I used
.card.flip {
transform: rotateY(180deg);
}
bro can you send architecture of flash for mini project
Anyone else having trouble with the flip animation? Preserve 3d is not working for me, I can still see both the front and back of the card.
where you able to solve this? I'm having the same issue! Thanks!
Can anyone help with the issue which I am facing on the video timer ?[9.58 ] when i edit the question and save the changes as shown in the video. the browser is not refreshing in the flashCard. When I add some h1 tag in app.js itself and edit the text, the browser is refreshing. React version is ^18.2 I know it may seem to be a simple Issue. Solutions Appreciated. Thanks
Good day! Permission to use your video as as resource to my Google site.. Thank you and God bless :)
how could i convert it to react native?
crack, fiera, maquina!
Hi, great video man. I have a question when i flip a card i don't have the effect of 3d-preserve? i see the number 4 and rotate text.
Omg, it was because of firefox, on chrome and IE it is ok. -.-
@@Jelena1991Zeka to fix on firefox:
add
.card .front{
transform: rotateY(0deg);
}
@@thekuzicartoon thank you so much, this was my exact problem.
@@valeriedubach882 you are very welcome! just paying it forward ⏩ !
can anyone share how would you break it down into more components, such as a component for the header, and then category select... I tried doing this and exporting useRef variables but got some errors
read the new official react documentation. most tutorials on youtube, including this one, are teaching some bad habits when it comes to the usage of useEffect
@@hollis.newgrass solved it, thanks
what is the back keyword?
Yayyyyy "my name is Kyle andmy job is to simplify the web 4 u"❤🌈🌈🦄
hey bro i am 14year old boy i love to watch your videos and i've learned many much from you. I request you to please create a seperate video on how to posts using markdown. I'ld love if u create that........
Hi, I'm quite new at React and I'm having problems at 9:29 saying "Parsing error: Unexpected token". Does somebody know how to fix this? Thanks.
probably syntax or spelling error
Hum the backface-visibility or maybe the transform-style property does not work correctly in last FirefoxDev version... accordingly to caniuse.com they should but nevertheless they don't... any ideas? Tried prefix but nothing happen...
Hey, if you put backface visibility on .card .front, .card .back as well and then copy the padding, height, width, border-radius box- shadow and the alignment into .card .back it should work
@@richardme123 Thanks, I actually solved adding this selector:
.card.flip .front {
opacity: 0;
}
It should work using opacity, display or visibility... also top:50%; transform translate(-50%); but the other 3 are simplier.
33:00
I want flashcards source code for college project purpose
Pretty sure this video wasn't form 👉 "WEB DEV SIMPLIFIED" but from 👉 "WEB DEV COMPLICATED" Anyway thanks if it was simple for others.
if you have used bootstrap here then lots of time can be saved
epic !
If you loop through an array how the array index cannot be unique? Besides you can always run your own increment. Date should not be used in this case.
grid content with dynamic height = messy
Was not able to get right api with params, don't know why. If somebody have the same problem just .get this api `opentdb.com/api.php?amount=${amountEl.current.value}&category=${categoryEl.current.value}` without params
ReactJs is cool, it dominates US job markets, but I think Svelte will surpass React sooner or later, because Mr. Rich Harris, the creator Of Svelte, make Svelte a much better development tool / language / tech, and it is so easy to learn and get started/acquainted and is much powerful than ReactJS. Mr. Rich Harris apparently knows programming better than Facebook, I am sure people will love Svelte and fully embrace it pretty soon, It is time for ReactJs to take a rest / step aside !!!
There is no difference between all these frameworks which are basically inconvenient backend style templating tools with manual data binding and inline js code.
Getting Forbidden Error: You don't have permission to access /api_count_global.php on this server.
I don't understand what you mean when you say "I'm destructing that all the way up here." It would be better if you just use props or else explain what you are doing better.
It would have been far less confusing if where you set your useState you had a different name for the current state than 'flashcards' because when you write flashcards = {flashcards} we don't know which side of the equation is what. Same when you do the same thing in passing props to the flashcard component.
it is not free, man... they ask for your credit card
those extensions that make coding faster, like rfc creating the code, are not good for beginners... beginners need to type as much as they can because they need to memorize things
BUT lets be honest, these video are just entertainment and advertisement for your courses.. who really wants to learn goes to the computer and types npx create-react-app and starts playing around
Too much magic, nice video but please use ";" ! I can't take it not seeing them!
theyre not required in javascript as opposed to Java or a C language.
@@LOLmomentsandfails I know, but it is a good practice to use them, you aware the interpreter about the ending of a statement
He could just install Prettier - Code Formatter, that does everything for you, no matter the extension.
@@curuzu Not in React.
@@aammssaamm not in JSX, apart from that react is only javascript, the same rules are applied
Another great example of React's incapability to build simple things in a simple way. Textarea is ridiculous.
He just appends api data to a textarea and pulls out the value, seemed like a practical way. How else would you do it?
@@konfcyus4865 You may want to read Javascript documentation.
@@aammssaamm I took your very helpful advice and looked up few links , his way comes up in most of them its either that or using regex or jquery.
Do you have a better solution or should i keep reading documentaion maybe im missing something
www.w3resource.com/javascript-exercises/javascript-string-exercise-35.php
javascriptkit.com/script/script2/removehtml.shtml
stackoverflow.com/questions/822452/strip-html-from-text-javascript
@@konfcyus4865 If you cannot manage such a simple task you need to hire a mentor.
Not too cool bro. Too basic.