React & TypeScript - Course for Beginners

[@RoadsideCoder]

Thanks for featuring my Content 🙏❤️. Love making content for this channel.. 🔥🔥 Hope to bring more such tutorials in future.

[@rangabharath4253]

Awesome bro. Congrats :-)

[@jsugunasuguna5190]

Hi

[@jsugunasuguna5190]

@@rangabharath4253 😎

[@AjitSingh-sn6rr]

Thanks a lot for creating this tutorial I want to know that in which company are you currently working?

[@giridhar4385]

which browser you are using ?

[@alanskverer]

I learn more from Indian guys at KZbin then my professors at college. 🔥

[@erseiko3089]

Mannn u drop the fact

[@JatinBisht]

Jai shree ram

[@MORFO458]

ES cierto enseñan bien

[@KILLCHRISU]

still learning more from these guys and i already graduated college 😂

[@v3gario697]

fax not printer

[@mukulr5171]

Great to see RoadsideCoder contribute to FCC. 🌟🇮🇳

[@RoadsideCoder]

❤️

[@ahmadkaleem5394]

Key difference between "any" and "unknown" is our attitude. "any: I don't care🥱", "unknown: I'm not sure bro😶"

[@postingbmwm3]

Finished the react course and heard how good Typescript was so this is exactly what I was looking for.

[@thefonsotube]

I LOVE THIS GUY! He's getting straight to the points that I need. AND he points the viewer to the DOCUMENTATION! WONDERFUL!!! Great job sir!

[@ballsack4581]

srsly this guy is amazing. ive watched so many tutorials from different people and this guy is by far the best

[@westernpigeon]

No way! Just as i was starting to build a react project for my bootcamp and learning typescript on the side! heaven sent!

[@xwindyyx6893]

at 11:48, I held back my tears as you said "don't worry if you're having problems understanding all of this"

[@RoadsideCoder]

😄❤

[@nhuphamtr3190]

This is not a beginner's lecture series. You need to have a moderate understanding of React and JavaScript to see how useful these lectures are. They're all really great, thank you.

[@aniketroy03]

Obviously one should have good enough knowledge of Js and React both before jumping to work with typescript. Without them even I would not suggest anyone to watch the video.

[@susasan27]

For React Version 18 and above remove the for the Drag feature to work. Also, amazing tutorial Piyush. :D

[@Wool314]

Thank you! Spent around 20 minutes searchingweb for answers to why dragging didn't work. Could you also elaborate, how did you figure this out when you were following the course?

[@robingabor3156]

Bro, I was doublechecking my code for approx 1 hour with the source code in Github and cant find what seems to be the issue ... :D thanks a lot

[@gaganbaghel1377]

do you know why we have to do this??

[@nccurlygirl]

Thanks so much!

[@alanschmidt3523]

NO WAY DUDE! I spent like 1 hour checking if I did something wrong, looting to every single letter, and had no clue at all. Even chat gpt couldn't help me. This is an amazing example that AI will not replace devs xd. Thank you so much I love you

[@Coco-ii2pu]

Someone give this guy a medal 🥇

[@tomasburian6550]

"And you're gonna see some bunch of crap which no one understands..." You just instantly became my favorite KZbin coder :D

[@shangguanwang]

This tutorial is amazing, I followed through and completed my first TypeScript project

[@suri5023]

i really appreciate the fast forwarding whenever you are writing boilerplate code. it helps a lot! Thank You!

[@dylandupasquier]

I'm only half way through this and I've already learned a TON. I'm very happy that I stumbled across this tutorial.

[@dylandupasquier]

Also, react-beautiful-dnd is not compatible with React 18.

[@adipati27ma]

@@dylandupasquier nice info, thanks

[@shiwanidembla5396]

Amazing tutorial, it covers basics as well as advanced concepts. A few suggestions, try to explain the chunk of code after implementing the functionality so that user can clearly understand it. And, I got confused and lost in "todo, todos, todo(model)".

[@mohitsaud2071]

I have been watching RoadsideCoder from the last few months and his videos are great.

[@gopibhimavarapu5895]

If you are facing error for the drag and drop feature even after disabling add the dnd dependency in json also change the react version to recent stable version 18.2.0 and reinstall npm dependencies and dnd library

[@mrigsingh1039]

Feeling proud to see Indian teaching on such channels

[@marksweitzer6525]

Best part of the video 39:00 "You'll see a bunch of crap over here noone understands"

[@hgsbrodi]

It caught me by surprise too XD

[@antonycastle279]

This course is free and that's cool but there are some issues. There is very little typescript in this course -it's almost entirely React. Very little is actually explained , it's very much a case of "just do it like this" without any explanation of why it's being done that way. There is an infuriating part where the presenter asks the viewer " why do we have type and interfaces when they aer very similar" and then goes on to continue explaining how similar they are without ever answering the question! There are also some bad practices in here - for example passing the entire todos array as a prop to each single Todo component. A single todo element does not need to know about the other todos. instead, the edit, delete, isDone functions should be declared in the TodoList component and passed to the todo components as props. At the end of the day it's free and I'm grateful for that but the quality is not great.

[@TCErnesto]

exactly, this tutorial needs to be improved a lot

[@John-mj1kk]

I don't know why he passed the useState to every single component. It's best so handle everything in a reducer in this case, or simply extract the state from the application.

[@arjobansingh1940]

Yes, and even when we need previous state to make new changes, the best practice is to use functional approach in setState, basically passing callback whose return value would be new state to setState function. And that callback would have previousState as first prameter. So we don’t even need todos state, when we just want to change that. setTodos alone can handle that

[@prouz]

not to mention all the typos that are even left unfixed in the provided github repo

[@dopetag]

Wow! Thanks for the review. I think I'll skip this course.

[@NotInRightMind]

Indian is the best teacher related to coding after all

[@doctormk2653]

Man I just remembered you and your face and the project in this video and been literally tying to find you for about 30 minutes. hoofff... Thank god already.

[@HassanKhan-vc6ij]

I've learned everything from indian teachers, I wish they could teach in my universities here in Pakistan ❤️

[@supriyayadav966]

I just wanted to learn reat with typescript and your videos tutorial came 👍👍👍👍👍

[@rudra9535]

OUTSTANDING lecture ! The detailing involved from student prespective is mind-blowing. Thankyou fcc and @RoadsideCoder

[@jasiekhalczuk4974]

thanks man, good vid

[@freecodecamp]

Thanks for your kind words, and for supporting our mission.

[@averageguys_sa]

When "Todo" is ready, what we are going todo is type is todo. todo todo todo!

[@Josh-ge1cr]

39:00 the true coding life: "bunch of crap no one understands" 🤣

[@Daniel-yp6mm]

Released 8 minutes ago this video is about to have millions of views for all the upcoming front end developers.

[@brijspy]

This video is not for absolute beginners who wants to get started with typescript with react, because he hasn't explained the generics and how it is used with the functions at the start of the video, and how can u create the functions with interfaces and use the generics to pass the props and many more things like that. Because these things are absolute necessary while creating a basic component types in the first place. Defining normal types and interfaces, people can understand easily, but the generics part and pairing up with the interfaces to create dynamic types is absolutely necessary i feel. Rest of the video was on point.

[@vishalgangde702]

Great tutorial! This is by far the best React TypeScript tutorial I've come across. Keep up the great work! ♥🔥

[@DisturbedNeo]

35:38 Rather than: setTodos([...todos, etc]); It's preferable to use the functional update form of setState, like so: setTodos(prev => [...prev, etc]); This is to avoid potential issues that can arise from stale state or closures, especially when working with asynchronous operations like API calls that you won't see in a simple and contrived example like a Todo app.

[@ashish_prajapati_tr]

his tutorials are amazing.😍🔥

[@RoadsideCoder]

🙏🙏

[@ashish_prajapati_tr]

@@RoadsideCoder 🤞🤞🤞

[@rohigt5745]

Thanks. That was an awesome runthrough. Very informative, crisp, practical and concise.

[@nemanjadjoric8765]

RoadsideCoder is a great teacher!!! Thank you!!!

[@JesseJzee]

Nice tutorial, used this to create a user-friendly task manager. It is possible to add status, you realize when you drag it to the completedTodo, the todo 'Isdone:true' should be the result

[@jehuzubiri]

it helps a lot, u're an amazing teacher sir

[@jeyakarthicka5699]

Roadsidecoder 😍😍😍 waiting for more projects in react

[@RoadsideCoder]

🙏❤️

[@abenjamin13]

OMG 😱 I’ve been wanting to learn more TS and how to merge it into a React app. I love TS ty

[@anikvikviniia2420]

Where can I compare the solution and the complete implementation for the useReducer function with Typescript in this project? This is challenging for a beginner (even having watched previous video with useReducer hook).

[@fcbjimm]

i agree with u, and i wonder if it was implemented in the project i didnt see any usereducer at the end

[@MrCOPYPASTE]

Dude... Your intro was awesome...

[@AjitYadav-iy1nb]

I am waiting for this combo ❤️ thanks a lot

[@RoadsideCoder]

🙏

[@TabbyToney]

This is so great, thank you so much! I've done TS/React before but it's been a while and I just needed a refresher. I appreciate you!

[@keatonbrett7959]

Hey, please in future videos show the full screen of the vs code. Your text is cut off leaving us to figure out what your actually typing.

[@apexgamer7505]

Great short tutorial thanks!

[@jananiadanurrammohan9795]

In InputFeild.tsx file, if the input tag is not a self-closing tag, then the web page goes blank. The tutorial has self-closing tag, but I did this mistake of giving separate tags like rather than . This problem occur at 20 minutes from the start of the video. Thought it might be helpful for someone who might face this error. Thanks.

[@marianeladiaz3069]

Very good initial course on Typescript its a good starting point!!

[@iamabhirupdatta]

To mark the item a completed (strikethrough), we have to make isDone true/false, so inside the dragrabble code , we have to modify: if(destination.droppableId === 'TodoList'){ active.splice(destination.index, 0, {...add, isDone: false}); }else{ complete.splice(destination.index, 0, {...add, isDone: true}); }

[@MrYyope15555]

Thank you so much for this awesome tutorial!

[@bencole2892]

So far, so good. Thank you.

[@trappedcat3615]

I'm learning how to react when I type a script

[@Corythehausbaus]

thank you for the tutorial, that being said, i think it's not recommended to pass setState inbetween components by team React. It is better to redesign this

[@RosalindGash]

Thank you for your effort, but this actually is NOT a beginner-friendly tutorial. The tutor navigates through files and screens too fast and he doesn't explain what he's doing or why. This is supposed to be for beginners, but he teaches like he's teaching people who are already experienced with React and/or TypeScript.

[@sahilmalik5950]

Amazing Tutorial ! Really Appreciate

[@otaneto]

Thanks for this amazing course. I could learn a lot from you. You rock!

[@watb8689]

i know more about inglish than typescript after this training

[@PIYUSH-lz1zq]

Are bhaiya !! kamal

[@RoadsideCoder]

🙌

[@ВладимирГугин-ш7щ]

Thanks ! This is a React & TypeScript video has been very helpful to me!

[@abderrahmaniidrissihamza1821]

this is a master piece

[@SupaMC_Gaming]

Absolutely what I needed

[@razmiqayelyan1497]

Thanks from Armenia 🇦🇲,super

[@cyberangel9967]

1:06:44 section. What is the full switch case "done" logic? You didn't show the full switch case logic to follow.

[@fadygamilmahrousmasoud5863]

hello, thank you for all of your efforts, I just want to ask if you can upload some content to design patterns (theoretically) ?? thanks.

[@kshirodpatel]

Congrats for 10K subscribers to your channel. More power to you buddy...

[@RoadsideCoder]

❤️

[@LuisReyes-zs4uk]

you're an awesome teacher. i subscribed to your personal youtube channel. thanks!

[@trevortheodore1950]

this is very well explained. excellent video for an intro to typescript with react

[@indresvidiakai]

I got stuck at Drag and Drop , ChatGpt informed: The error message indicates that there's a version conflict between react-beautiful-dnd and the version of React you're using. Specifically: You have react@18.3.1 installed. react-beautiful-dnd@11.0.2 requires react@^16.8.5. This conflict arises because react-beautiful-dnd has not been updated to support React 18.x, and it expects an older version of React.

[@dimitmoto1716]

Thank you! I learned a lot!

[@zetixmg]

Just what I was looking for!

[@aryako_official]

Indians rock everywhere 🇮🇳💪💪

[@EnglishRain]

TBH at 40:32 I like it better that focus stays on the input field even after adding new toDo.

[@syedabdurrehmankazmi4836]

16:36 You said that we can give type to a class by using interface by the keyword "extends" but its actually "implements"

[@WilmanArambillete]

Excellent video! thanks for sharing

[@uusa35]

thank you so much really simple ,clear and straight to the point

[@ICheezI]

Which extension is being used to show the variable type when hovered?

[@julianvelez6563]

Excellent

[@tonmoyroy2350]

Awesome Tutorial on React with TypeScript 🔥 Thanks a lot ❤️❤️❤️

[@haha7836hahah]

when you create a function inside droppable and draggable, the type of provided is automatically inferred. but when we we create onDragEnd function why do we need to specify its type? why doesnt provided needs us to specify the type

[@sebastianmocanu6399]

Really enjoyed this one, many thanks :D

[@Chemaclass]

Awesome tutorial. Thank you so much :)

[@MudassirKhan-sx9jy]

You made it easy.👍

[@curiosabouttech]

Thank you so much I learned alot from this course thank you again 💗

[@randerins]

Only reason I still use JavaScript is because my bootcamp's last project requires it :x

[@mohamadzaid5884]

Thank you very much, this is very helpful

[@programmingwithnit5308]

Thank so much. Good sharing.

[@andrews13]

When I tried to run this project in VSCode, I encountered an error. Here was how I fixed it. 1. Deleted 'node modules' folder & 'yarn.lock' 2. In 'package.json' , added these "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start", "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build" 3. yarn install 4. yarn start

[@ayushrameja]

Thanks for the course :)

[@simaobonvalot9141]

I would replace "npx create react app" with something else like Vite at this point in time, but other than that good intro !

[@austinlelonek3193]

I want to stress that this course is not for beginners.. While the concept itself is simple enough, the methods used are not basic and the way they are presented are rushed to say the least. This example project is used in other places with better explanations and a simpler approach that is for beginners.

[@codedjango]

Vue3 + Plain Javascript is what I would like to see next on this channel...

[@haiderbajwa5413]

on 54:00 you write TodoList instead of todo but after that you fixed the bug but didn't informed

[@sob3ygrime]

Thank you this helped a lot!

[@Bajdster]

Are those draggable things works on your machines ? Still got Could not find a declaration file for module 'react-beautiful-dnd'.

[@SamForderer-v9x]

So if we implement the useReducer is that meant to replace the useState functionality?

[@speeddrift7185]

Tutorial is so fast :l but I was managed to complete it successfully ;D

[@haidermansoor4760]

which vscode extension do you guys use for realtime formatting

[@theodorn]

Thanks a lot for a very good tutorial.

[@lifeisbeautifu1]

Great video, thank you!

[@barteklegierski9746]

Great course ☺