React / Typescript Tutorial - Build a Quiz App

Learn how to use React and TypeScript to create a quiz app project. You will also learn how to use Styled-Components with React.

--

[joonatontti]

I suggest downloading a vscode styled-components extension if anyone is lacking the syntax highlighting!

[froggerabc]

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.

[anabeatriz]

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

[ggnore]

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.

[DG-ncjc]

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.

[tomaszstec]

When this guy does something, I know it is going to be a good one. No time wasted!

[MartinoNotts]

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

[briandesign]

recently started learning react, but haven't learned typescript yet

[DanielBrownsan]

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.

[marcocorapi]

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?

[mircast]

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?

[ppg]

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 = {
}

[ukaszzeromski]

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 :)

[jamesjones]

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

[eleah]

Why is dangerouslySetInnerHTML necessary? Can't you just put the text inside the p or span tags?

[ishan]

This is informative. Its better to have more about React with Typescript 😍

[ryanpan]

i love your code font, where can i find it?

[ezeargen]

Are you sure about posting this tutorial ???? TOO MANY "MESSY" code...

[nicolaaskoster]

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.

[dimiweb]

The best Tutorial for React + Typescript + Style Components I could find, thank you!