React / Typescript Tutorial - Build a Quiz App
VloĆŸit
- Äas pĆidĂĄn 6. 09. 2024
- Learn how to use React and TypeScript to create a quiz app project. You will also learn how to use Styled-Components with React.
đ What you will make: tender-mcnulty...
đ» Code: github.com/wei...
đ„ Course from Thomas Weibenfalk. Check out his CZcams channel: / weibenfalk
đ Thomas's website: www.weibenfalk...
--
Learn to code for free and get a developer job: www.freecodeca...
Read hundreds of articles on programming: freecodecamp.o...
One tip:
When scaffolding the components. If you have emmet extension installed for React, you can type "rafce" and press tab and it will autocomplete.
The extension is actually called "ES7+ React/Redux/React-Native snippets" not Emmet, and it can be installed from the market. Emmet which is built-in to VS code by default doesn't support React snippets except for some very basic jsx syntax I believe.
When this guy does something, I know it is going to be a good one. No time wasted!
I suggest downloading a vscode styled-components extension if anyone is lacking the syntax highlighting!
Thank You!
wow thank you! , that helps
For those stuck as I was for a while with a TS error:
When he applies an OR to the Props using a 'Pipe', it looks like a slash. That's due to the confusing font.
Use a Single Pipe | to declare 'OR' in Typescript
OMG thank you lol
I found this really helpful! What might help is to add some bookmarks to break the 1:20:00 so you can skip ahead or go back to a specific part.
00:17 - What we are going to build
00:47 - Part I - Setup the project
07:38 - Part II - The logic
54:58 - Part III - Types
57:40 - Part IV - Styling
wow...thanks a lot!
The best Tutorial for React + Typescript + Style Components I could find, thank you!
Great tutorial on Typescript, my only critique is "number" should be "questionNumber" as a more complete descriptive variable name and to disambiguate yourself from the datatype "number" which could get confusing for anyone new to programming and would in a true static type language lead to compile time errors
I feel like I need to go learn React and Typescript somewhere else so that I can make sense of this tutorial on how to learn React and Typescript.
same here lol
Hello, why is that?
@@carlosvallejo6006 cuz its "type as I do" tutorial
More React/TypeScript pls! :D
But by another author...
@@MaksymMinenko lol, what's wrong with this one?
Very nice example of how to use create-react-app and typescript together. Maybe it would be good idea to add to this kind of tutorial, part 2 about how to test this application using for ex. jest library :)
dangerouslysetinnerhtml - why it is necessary - Why not just pass: {question} or answer {answer}
it was my understanding that babel in react would convert JSX into JS as well as HTML but maybe I am wrong. So the question is why using dangerouslysetinnerhtml to put directly HTML instead of JSX when we can do that normally? what is the point of or the differences?
And no useEffect for the API call. And using React.FC for components. And using enums over unions. I get that this is a beginner's tutorial but being beginner oriented isn't a free ticket to bad practice land.
@@yosha2467 Hi Yosha. You are right. Currently, I know React on a beginner to intermediate level and I started learning TypeScript.Can you recommend me any good tutorial videos which show actually good practice (what to use instead of React.FC, etc)? I'd really appreciate if you could help me as I can't find any good guides online except a few udemy courses and a few blogs which I can't verify whether they use good practice)
dangerouslysetinnerhtml is necessary becouse the questions and answers from the API are not just pure text in some cases, there's " and other such syntax in the reponse.
Thank you so much! I am just learning React and this is such a great refresher of what I have learnt. I hope you had a great summer vacation :D
Thank you for this video! I learned a lot! My next challenge is to find a way to let the user choose a category and a difficulty. if there's any tips or hints from anyone on where to start I'll appreciate it!
I just added this functionality to mine. What did you want to know exactly?
@@nicolewiegand2827 Thank you for replying! I think what I want to know is how I can edit the api url in API.ts. I want to let the user choose a difficulty instead of just having a setting hard coded in.
In case someone else ran into a problem at min 52:20 when saving the answer in the Answers array.
I had to specify that the object answerObject was the AnswerObject type we defined before, it looks like this:
const answerObject: AnswerObject = {
}
This is informative. Its better to have more about React with Typescript đ
I have a question at 35:59 Here you used an arrow function WITHOUT curly parenthesis { }, if I use them, I get 'undefined' for my answers-array at 38:32. Why does removing curly parenthesis shows the correct output?
Got it! Without parenthesis, it's retuning always one statement, so the {} are not necessary because we have only one statement to return, but if we use the parenthesis, then we have to set a 'return' before
Thank you for this tutorial and for using typescript in particular. Very easy to follow and great explanations in between so it really helped me understand what I was doing. This understanding helped me get unstuck when my code was not working the way it was supposed to!
I wish beginner friendly tutorials like this also taught better coding practices. There were so many times you said "this is a small app" or "there wont be performance issues at this scale" or "if YOU want to do some error handling you can do it here"
Where is the ownership, you're creating beginning content and writing lazy code like this would lead to new TS/JS devs adopting horrible practices.
recently started learning react, but haven't learned typescript yet
typescript is very easy ... if you know js then it will take you less than half an hour to learn TS. It will save you ton of testing time..
Peter Parker àčàžàčàčàž
both of them are waste of time
@nathan ganesh You should get a proper education in Math and CS. If you cannot do it look for another career.
@@aammssaamm waste of time? weird. I keep seeing React in job postings but not Math or CS.
Prefect weekend stuff
THE BESS CHANNEL ON THIS WORLD.
I AM FROM BRASIL.
I took this code and ran with it, now developing the app further so that I can put it in my portfolio.
Tip for those of you who want to let the user choose the category and difficulty: put the quiz logic that's in App.ts into its own component and then pass the state from a form component into that quiz component as props, then redeclare the props as constants within the quiz logic above where the url is fetched and enter those constants instead of the TOTAL_QUESTIONS and Difficulty.EASY ones. Finally, go into the API and pass those same values as props there, and then edit the URL so that it actually accepts a category too.
I'll link to my code if anyone's interested, just lemme know.
These changes make random quizzes impossible because of the customised URL, and that's something I'm now working on figuring out. Update if I do.
Yeah, I'd love a link to your code, if you don't mind sharing. Thanks!
Pls link to your code
@@shubhtandon7 it's in the thread, my man, right above your comment
@@JorgeVandS I can't see it
It is not loading the questions please what am I doing wrong?
thanks man, this is really insightful!!!
i wonder who were those disliking this great tutorial
This is just more of a tutorial that you watch. Nothing is explained fully. It's rushed and should have been broken down into a series.
Tip: Install 'Paste JSON as code' Extension in vs code
then copy the json and in command pallete run Paste JSON as Types
Great tut Thank you, Apr/2021 note if you are using react@17 make it won't work, downgraded goes fine. Thank you again, hope to see more good code from you.
@1:01:02 -- Quick question if I may, how come your stylers still have intellisense/linting even within the backticks? It's not linting on my VS code... :(
Great tut. You always throw something in I've never seen before.
Thank u so much sir
Really helpful video.
Understood react with TS.
Thank u â€â€đ
Thank you so much for this. I prefer choices over answers đ
Why is dangerouslySetInnerHTML necessary? Can't you just put the text inside the p or span tags?
If an API returns JSON with formatted HTML, without dangerouslySetInnerHTML it'll be escaped and you'll see HTML tags inside your p or span instead of formatted text.
@@cherniaev Sergei - cool, thank you!
After installing DOMPurify and importing it into your QuestionCard.tsx file, you can write something like this:
const htmlSanitizer = DOMPurify.sanitize;
then inside the p tag, write something like this:
Hope this helps!
Could someone explain how the answers turn disabled once you hit one of them ? And also how QuestionCard component re renders with nextQuestion function ? Did I miss something???
cause the userAnswer ( number + 1 ),is now undefined a falsy value. so the buttons are disabled.
@@axe-z8316 You mean, as long as userAnswer is not undefined, the button remains enabled?
@@agustinmoragues191 when a new question is displayed, userAnswer is undefined , so buttons are ENABLED , when the user selects a answer, userAnswer - an object is now something like : {question: "Han Solo's co-pilot and best friend, "Chewbacca", is an Ewok.", answer: "True", correct: false, correctAnswer: "False"} ... Making userAnswer a truthy value,
@@axe-z8316 thanks !
Very easy and useful tutorial. Thank you very much.
Very very good tutorial. thank you so much for doing this. Is there a follow up somewhere where you show how do we write test cases for the code written here?
I really enjoyed and learned. Thanks, Bro! Keep it up.
Love this tutorial, trying to implement the same structure with my own hard coded questions. Any tips would be appreciated.
An array for simplicity
You deserve 1 million subs for this
Great tutorial ! Thanks a lot man :)
Would be great to do other React TS tutorials like that.
This was really cool but I was really baffled by the implementation of button color change. I was happy to learn more about how typescript works with react and styled components, but I feel like adding/removing a class with a conditional in App() could change the CSS of the button background color in a much easier / more readable way, could it not?
Thank you so much Thomas! Amazing tutorial!
Please can anyone help me?, I am getting error message like trying to access from undefined.......
when I do { questions[number].question}
loved this! Thank you. Please MOAR MOAR!
I like the font and the theme applied in your VS Code text editor. Can you let us know the font style or the theme used
npm start command is giving me error , inspite of including start script in package.json. Any help is appreciated guys
stackoverflow.com/questions/41462729/typescript-react-could-not-find-a-declaration-file-for-module-react-material
I found this stackover flow post. Not sure if that helps.
Great tutorial. Thanks for making such awesome content.
I think there is an error in the code. In App.tsx, the only way to setGameOver is to click the Next button. But by the logic that conditionally renders the Next button , if you're on the last question, there is no Next button. So Technically, the game is never over. After you answer the last question, the Start button renders because of userAnswers.length === TOTAL_QUESTIONS, but the game is still not over.
Everything is working for me besides the buttons to select an answer. I'm getting the annoying "Cannot read property 'map' of undefined: for the answers array.
"answers?.map((answer)" in QuestionCard.tsx file. Hope this helps
omg thank you!
i love your code font, where can i find it?
That is Operator Mono font. It is a paid font, but you can ... you know, find it for free :)
i may need some help here , i got stuck with the reading map as undefined. On QuestionCard i have this" {answers.map(answer => (
*
"
Did you get any solution here? I m stuck with same.
@@abhijeet8710 sorry no, i did not finished this project, sorry for not helping you out.
I had this exact issue and after troubleshooting for awhile, it was the shuffleArray for me. I didn't return it. Once I returned it, it mapped fine. Not sure if this was also your exact issue.
export const shuffleArray = (array: any[]) => {
return [...array].sort(() => Math.random() - 0.5);
};
The api response exposes the answers , but the aim was to teach react and it does the job :)
Yes, you are right, but the main job is done.
Please I can't find the questions or the answers, how do I fix it please
i've got a problem when i fetch the questions i get an error ( error 429 too many requests ) any one get the same problem and fix it
Thank you so much sir! that was an awesome tutorial!
This "Auto Formatting" that you keep talking about, what in the world is it? Is it an extension that you have installed on VS Code?
Tony Lancer probably using something like âprettierâ. It auto formats when you save. Super useful.
Format On Save is part of VS Code itself. Which formatted to be used depends on what is installed. I believe there is an internal JS / TS formatted and you can install other ones like Prettier. Then you'll choose which one to use from bottom right of the VS Code (status bar)
If anyone has any issues with dependencies after running the first "npm start" remove the "node_modules" folder from your desktop or home directory(if you're on Linux)
What is the VSCode Theme you are using? I like it! :)
I think it's this one "One Monokai 80s Theme"
I've started learning React
How long will it take to learn Typescript? And what's the pros of learning Typescript?
.
strict typing and developer friendly are the pros and coming to time to take learn depends on your experience if you have good experience with JS it will take 2 days
.
Pro's are documenting the all the in's and out's of your code for your future self. Is insanely easy to "learn", it's just JavaScript with some extra info.
it's better if you put a github link for the starter project and for the end result, nice work BTW!
I am getting weird error .map undefined but can see all compiling in dev tools, about to download the github code, react changed @17 and not compatible with few things, he is using react 16.3 i think.
@@vaniad555 I am getting it too.
@@galaxygamingboy React is @18 is out it might work with few adjustments
It can work with adding answers?.map it specifies that it might not exist, but then the answers do not get rendered
Hi does the same but Style is not working. Please help if you can.
Regards
Sabuj
can you add the questions into a database?
look into the 14 hour tutorial by another coding youtuber "Ben Awad", I think it was titled "From Homeless to Full Stack FAANG Tech Lead in 14 hours" or something like that
very nice tutorial sir and great explaination.
Thank god your text editor font is bigger and can be easily seen in mobile.
First time seeing you. Love the video. So concise! Thank you. Also - what type of auto-formatter do you use? I have eslint installed and some of the time I hate what it does (but most of the time it's ok). I'm brand new to VSCode and React so, is there a way to control it. Which one do you use?
What are the extension are you using for react. In my case code was not with proper color in styles.tx files.
thank you for this.
helped alot
At 38:39 I have an error and I'm stuck
Property 'results' does not exist on type '{ (): Promise; (): Promise; }'.
damn, you're like angel :). Thank you for helping me to learn Typescript
Interesting sir, i want to ask, when we should use interface or type in typescript react? Honestly it's little bit confusing. Thanks by the way, sorry bout my bad english.
The vdeo seems blurry to me, I can't read the URL for the trivia API
Fantastic tutorial!
Love double await syntax !!
nice,, fun, practical, and TypeScript!
Very useful, more of this!
How can you check the answers on client? Can anyone help me to show the possible ways?
after using ".json()" when fetching the endpoint, the data is displayed in literal unicode. Like the symbol ' is being displayed as '. It happened with several other symbols. Does anyone know how to fix it?
dont forget to use "AWAIT" in the front of the json
Great tutorial sirđ thank you
Used CSS Modules instead of Styled Components, in case anyone interested to look at. github.com/navdeepsingh/react-typescript-quiz-app
amaaaazing, learnt so much wowowow!
If you get error incorrect_answer isn't iterable, you can add return in util.js. Good luck
Does anyone know what I need to do to get intellisense going on the styles.ts files like our host has?
The hardest part of software development is coming up with platforms that people actually need...
thats the clients job :D
what is the purpose of @types/styled-component for auto import or suggestion or for something else anybody?
thank you very helpful!!
You sound like the Classic Dracula. Lol! It's a cool thing! Anyways, thank you so much for the video. Very awesome!
who ever encounter this error "question.incorect_answers is not iterable" please change correct_answers type string to string[ ]
Can someone tell me why, when writing styles.ts files, he has all the auto-complete options and he sees code like normal css, but I see everything as a string? It is pretty difficult to read and write code if everything is of the same colour. I think i am using the correct ticks, these one: ``.
if you're using vscode, you need to install the extension jpoissonnier.vscode-styled-components
I love this channel baeby
I like the way you teach :)
Thank you very much for this video!
Does anyone know how to replace the trivia api by a local json file. I created one but I don't successfuly import it and make it works... When I try to replace the const endrpoint by my json file I obtain the following error:
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Thank you in advance!
This might be a late answer, but in case anyone else wonders I'll reply. This type of error happens when it's actually an html file (that's why it's starting with "
@@vedranb6260 it's never too late ! Thank you very much for your well detailed answer !
awesome tutorial, love it
great walkthrough
Thank you, great tutorial
thanks man this really helped
Thanks man! Great job
Great Tutorial!
great tutorial!! Thanks :)
im receiving
"TypeError: Failed to fetch" from time to time whenever i refresh
Bonjour,
Hello,
Thank you again for this tutorial which is very well explaining just a small problem at the "answers.map" level
"which returns an undefined value I check on the git restart the project after having downloaded it is the error is the same the map in itself is good but the value which is returned is undefined which makes the program crash an idea ?
OK the answer to my question can be found in the utils.ts file, you must not use a parenthesis {} if you use it, it returns you as an undefined answer, I would like to know more about this case if possible.
@@nicoladjurovic871 if you're using { } you need to write return ( code here )
but if you're not using { } then it's an implicit return, and you can do with just ( ) and without the return statement
`
{answers.map(answer => {
return (
{answer}
)
}
)};
`
is the same as
`
{answers.map(answer => (
{answer}
);
)};
`
@@nicoladjurovic871 essentially, the error is saying "nothing is being returned" because you have included { } but no return() statement
What extension when you code css in style.ts
sorry, it was a mmater of yarn version. updating to 1.22.4 solved the issue