Converting JSX to TSX in React

JS to TS Guide → dev.to/documatic/converting-j...
Join The Discord! → discord.cosdensolutions.io
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we will go over how to convert JSX to TSX in React. We are going to take a look at a component that has no types, and we are going to add types to it. This will be a great starting point guide if you are interested in converting your Javascript React project to a Typescript React project. Hope you enjoy an that this is valuable to you!

[@safwanmohamed9135]

I did not ever search about this topic before, but today, I was thinking of converting to tsx, and when I opened youtube, I found it on the top without searching😂

[@sadique_x_]

real wai

[@kaluczadzsi]

You are the best react instructor sir!
You always ships the quality to us.
Love from Budapest

[@ayberk272]

It was a great video especially for people like me who are junior devs planning to start learning typescript. Thank you!

[@jayakumar9976]

Nice explanation and straight to the point.

[@wakandagaming5763]

Oh my gosh this is so good I need more episodes please make them.

[@monoq_]

Thank you so much. Very helpful for me right now because I'm converting my e-commerce project react app into typescript.

[@user-be3ri8gf1p]

It's kind of beginner+ tutorial, but can save like an hour or so. Well made, thanks!

[@yutsacarm8021]

woah we really need this kind of rare content

[@Pareshbpatel]

Converting JSX to TSX in React, so clearly explained. Thank you, Darius
{2024-06-21}

[@ParkerKhaw]

Great tutorial! Need second episode! Maybe the topics can be: passing the props/states to another component, etc

[@becharaalhosri6471]

This was great, I hope you can a part 2 where you go into more details about using typescript with react

[@ooorayooonyoooo]

One of the most interesting topics i waited for, i really wanted to know what are the main section of a jsx file that is good if to be written with types and what are less important as typescript will auto deduce it.
Thanks and keep going 💕.

[@myke6972]

this is what i need

[@prashlovessamosa]

Your Quality of presentation increasing day by day.

[@cosdensolutions]

Thank you for saying that! I'm really working on it ☺️

[@giahuyha6189]

I suggest some videos about handling different kinds of errors in react and ts

[@crazyyMeee]

please make full tutorial on Zod. And other similar libraries too

[@davronmaxmudov3972]

#IdeasForContent. Can You make tutorials on the following topics please) : GraphQL, Socket io

[@coreanoquant]

Is it normal to define types in the same file? Or do people define all the types separate files and import the props?
Great video!

[@cosdensolutions]

Most types are defined in the same file! Only types of shared things are outside

[@OtepArc]

can you have a video about typescript. thanks

[@policeislam2846]

Hello thanx for video first , Second i want to ask you if i learn nodejs in 2024 so i can fined a job with it ?

[@mettle_x]

5:50 I think, it's not a good idea to explicitly write the return-type of fetch() without proper json-schema validation. Inferring types from something like Zod after validating will ensure better type-safety.

[@programmingintrouble]

🌅

[@cescfabregas0004]

out of sudden i realise you look alike Mauricio Pochetino 😅

[@NBtheking]

So do i😂

[@NBtheking]

And Ukraine president 😂

[@uzairahmed2975]

What is the difference between interface Props and type props??

[@cosdensolutions]

Not much, both can be used!

[@uzairahmed2975]

@@cosdensolutions ahh I see thanks for response ❤️

[@highland5729]

This might be unpopular opinion and personal preference.
I understand the purpose of Typescript was created. But I also understand purpose of Javascript was invented.
Javascript created to help human to programming easily. Easy to read, universal, simplicity, and versatile.
Because we are not a computer. So, it's not human level to make a type checking, make it looks complicated. When we put a variable, we are as a human already know which one a string, number, or boolean without unnecessary things to describe.
Let computer does (low levels). It's not Javascript does. And it doesn't mean Typescript comes in to solve those issues.
When other thing comes to simplifies an issue (ex: Redux to React-Query), Typescript was the opposite.
Typescript just makes programming more complicated. Also makes the syntax looks ugly.

[@ivalar8891]

"Javascript created to help human to programming easily" something simple. Good luck to maintain a project with hundreds of different types without types.
"When we put a variable, we are as a human already know which one a string, number, or boolean without unnecessary things to describe. " But sometimes you open 20 different files, trying to figure out what properties/types do you have in this complex object with 200 properties instead of simple mouse hover with TS.