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: https://tender-mcnulty-a4a646.netlify.app/
💻 Code: https://github.com/weibenfalk/react-quiz
🎥 Course from Thomas Weibenfalk. Check out his YouTube channel: https://www.youtube.com/user/Weibenfalk
🔗 Thomas’s website: https://www.weibenfalk.com/
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
source
Im just curious about the type vs interface, when can you use type or interface?
What font is that??
You sound like the Classic Dracula. Lol! It's a cool thing! Anyways, thank you so much for the video. Very awesome!
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.
Please can anyone help me?, I am getting error message like trying to access from undefined…….
when I do { questions[number].question}
00:41:15
Hi does the same but Style is not working. Please help if you can.
Regards
Sabuj
What are the extension are you using for react. In my case code was not with proper color in styles.tx files.
amaaaazing, learnt so much wowowow!
Ok tutorial. Very little to no explanation of how everything works. Another one of these tutorials that you just copy along but unfortunately not really learn much.
this looks so good, game graphics
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)
Are you sure about posting this tutorial ???? TOO MANY "MESSY" code…
Love double await syntax !!
TypeError: cannot read property 'map' of undefined. what should i do?
import React from "react";
type Props = {
question: string;
answers: string[];
callback: any;
userAnswer: any;
questionNr: number;
totalQuestions: number;
}
const QuestionCard: React.FC<Props> = ( {
question,
answers,
callback,
userAnswer,
questionNr,
totalQuestions
}) => (
<div>
<p className="number">
Question: {questionNr} / {totalQuestions}
</p>
<p dangerouslySetInnerHTML={{ __html: question}} />
<div>
{answers.map(answer => (
<div>
<button disabled={userAnswer} onClick={callback}>
<span dangerouslySetInnerHTML={{ __html: answer}}/>
</button>
</div>
))}
</div>
</div>
);
export default QuestionCard;
1:19:06 ah tf2
no interfaces no classes how is this typescript
Thanks so much for sharing <3
Sorry, but a poor way of teaching. I personally don't recommend this video.
dangerouslysetinnerhtml – why it is necessary – Why not just pass: <p> {question} </p> or answer <p> {answer} </p>
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?
thanks man, this is really insightful!!!
i wonder who were those disliking this great tutorial
thanks
AMAZING!!! THANK YOU!
great walkthrough
Thank god your text editor font is bigger and can be easily seen in mobile.
@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… 🙁
Does anyone know what I need to do to get intellisense going on the styles.ts files like our host has?
very nice video ✅✅✅✅✅✅👍🏻👍🏻👍🏻👍🏻👍🏻
Tip: Install 'Paste JSON as code' Extension in vs code
then copy the json and in command pallete run Paste JSON as Types
nice video but i think you should change font code.
You voice sounds like Niki Lauda from Rush 😍😅
thanks sir
thanks thomas
Very easy and useful tutorial. Thank you very much.
Great Tutorial!
I have a problem, I can't seem to see my buttons
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?
Tutorial is great but your accent is quite annoying.
Great tutorial ! Thanks a lot man 🙂
Would be great to do other React TS tutorials like that.
Great tutorial, may I know how can I run this app using expo in android?