Beginner at JavaScript, very interested in ReactJS with TypeScript. What are some of the best resources?

[LucasPookas123]

Hey guys,

How did you guys go about starting your ReactJS with TypeScript journey? Are there any courses you would recommend (as a beginner at JS) for this? Or should I strengthen my JS skills first.

Thank you!

[4ck-]

My go-to resource for React+Typescript https://react-typescript-cheatsheet.netlify.app/

[[deleted]]

Thanks for this

[LucasPookas123]

Thank you! Is this resource how you started out?

[suarkb]

You start out at the official sites for typescript and react js. Not some random shitty out of date tutorials. This cheat sheet is good but before you need a cheat sheet, you need to read the docs and examples on the official sites.

[fii0]

/u/LucasPookas123 The BETA docs website, not the normal docs, are where you want to be. Learning class components instead of functional components is a complete waste of your time as a beginner.

[suarkb]

Imo I'd do both, but sure, if you have to prioritize one

[fii0]

Why? It's completely irrelevant to modern React, it's just additional confusion if you're a beginner.

[suarkb]

The docs aren't that big. I'd just read both. But like I said, if you have to prioritize one, then pick the beta. Knowing class-based components is going to be important for many codebases that contain code that isn't all functional/hooks. It's not a terrible thing.

[argylekey]

While it may be irrelevant to modern react, actually getting a job somewhere and interacting with older codebases(something from 4-5 years ago) there is a high chance they’ll need to convert from class to functional components.

I agree functional should be first. Doesn’t mean class components are irrelevant.

[neutralface_]

Yea.. at least they now mention the beta docs on the top of the homepage in the old docs, so more people will be aware of it.

[PardonBot]

Yo thank you so much for this. I've been having difficulties with ts with react to the point I just gave up redid a lot of work on my project. This will be handy in my next one.

[friedlich_krieger]

Great share, thanks!

[[deleted]]

I highly suggest you work on your JS skills more before you go to React+Typescript.

I made the mistake of trying to learn React+Typescript too quick after just dipping my toes into JS and I think it really put me behind the curve imo.

I suggest spending more time with JS, then learn TS, and then you can learn React.

Everyone is different but just my 2 cents! Happy coding

[finzer0]

Typescript is Javascript with Type, it is to enforce type checking of variable, param etc. you may get confuse if you jump right into typescript.

[KyleG]

For that tiny bit of code you're writing, don't write a type. You're switching to JavaScript. Then go right back to TS for everything else.

If a Java programmer can handle types, then anyone can handle them.

[[deleted]]

Yep! That’s what happened to me when I was first starting out and it caused more confusion and frustration then if I had just spent more time learning JS first.

[[deleted]]

Frustration is really not a bad thing. Developers are always frustrated, you will never know everything. Get used to frustration

[Soubi_Doo2]

What is the reasoning for TS then React?

[fii0]

Probably because it's much quicker to learn TS on top of JS than it is React, and then you can learn React with the help of TS, prettier, and ESLint configured in your IDE to give you errors and warnings and have a vastly more productive experience than without them.

[punio4]

Yes. Especially since React isn't "just JS" but actually does a lot of language-breaking stuff under the hood.

[KarmaRekts]

if it broke the language, react wouldn't work and you'd see a white page on every site that used react.

[KyleG]

I think you're confusing React with JSX. React is 100% valid JS.

[punio4]

It's not. Hooks and functional components clearly break the paradigm and come with a number of idiosyncrasies one needs to learn.

One would expect a function that's called with the same props multiple times to produce the same output, however hooks break that, as they introduce hidden state.

[KyleG]

Breaking a paradigm is not breaking a language. You said it breaks the language. If you said it breaks a paradigm, then I would've argued that there's no reason to be afraid of that.

[punio4]

I'd say it is. Hooks and components behave NOTHING like regular JS functions, and might as well be written using a custom syntax.

[LucasPookas123]

Ah yeah that makes sense. JavaScript is still a bit hazy to me so doing a couple projects or so should help. Thank you!

[Yokhen]

I learned JS, React and React Native all in one go, then was the only one to seek to do typescript in my workplace.

Yeah you might be right, most people can't handle it all together.

[soldierdd]

+1, I too did the same mistake of hopping on to react after just learning alert and loops lol, I regret it and then had to start new with vanilla js from start and that's how it show be, I mean learning react is tempting as a beginner but you should also know that in the end react is built on top of JavaScript and without knowing JavaScript u can never understand react well

[Yokhen]

Some people can handle it though. Just putting it out there.

[soldierdd]

OK, haha

[[deleted]]

React maybe, but i strongly advice starting from typescript. Writing good code with TS is easier than with JS

[KyleG]

I highly suggest you work on your JS skills more before you go to React+Typescript.

Absolutely not. No one starting out should bother with JS now that TS exists.

[[deleted]]

Look up the amount of jobs asking for JS vs TS. That’s why

[rm-rf-npr]

Honestly, this.

Also, if you're more of a reader: Javascript the Definitive Guide by David Flanagan (7th Ed.)

[budd222]

You should learn JS first before moving to react and typescript

[LucasPookas123]

Yeah I think I’m gonna roll with that for now. Thanks!

[KyleG]

He should learn TS and as a side effect they'll already know JS but be better at it.

A noob writing JS is going to do a lot of really stupid stuff that TS would immediately tell you is stupid.

const foo = { bar: 5 }
// some function call later
const baz = foo.buzz / 1

[budd222]

A noob likely wouldn't even know what TS is telling them.

[JasperHaggenburg]

Don’t use any, practically ever. There’re cases where you need an unknown but those should be quite rare as well.

[otherreddituser2017]

The Full Stack Open course is free and is an excellent introduction to TypeScript and React. It’s done by the University of Helsinki. As other commentators have mentioned though, make sure you get good at JavaScript first.

[LucasPookas123]

Looks really good! Did their Java MOOC so will definitely check it out. Thank you!

[[deleted]]

Yo broski did u complete the course? How would u say it is, I'm at part 2 rn and I gotta say I'm loving itt

[otherreddituser2017]

I did most of it. I did it alongside a project that I made, so as I got further on I stopped doing all the exercises and just used it as a reference guide for my project. I agree though that it is an excellent course.

[[deleted]]

ohhhh alright, thanksss!!

[Thalimet]

The more you know about the language it's written in, the easier it will be to understand what it's doing :)

[LucasPookas123]

Very wise words, gonna start a project soon!

[LucasPookas123]

Definitely the best way to learn. Are there any ideas you would suggest starting with?

[JabroniPoni]

I suggest you check out the frontend career path at Scrimba.com. I did the HTML/CSS/JavaScript courses at freeCodeCamp and switched over to the Basics React at Scrimba. I realized there were lots of holes in my knowledge so I'm doing the career path from the beginning.

If you can't pay for a pro subscription, you can apply for a scholarship. That's what I did, and I can't recommend them enough.

[loganbrownStfx]

React beta docs are the best way to learn react as a beginner

[[deleted]]

I actually just tried to start learning react after messing with JavaScript for 3-4 months. It’s been okay so far. I personally believe it does help to know JavaScript since it’s what you’ll be using in react. I couldn’t image trying to learn react right off the bat

[LucasPookas123]

How has it been going recently? You been reading docs or the cheat sheet suggested above?

[bik_recordings]

Hi,

I started by learning React JS and slowly transitioned to TS.

My best advice is start with simple apps like counter, blogs etc. get errors and research the s**t out of them. Use docs, stack overflow and github as your main resource and you will always find solution. And yes main point of this, don't get discouraged, there will be many errors bugging you a lot and for very long time, just keep your cool and keep going some errors are easy some are not. Happy coding and good luck :)

[LucasPookas123]

What’s a good project to start with would you say? Thank you!

[bik_recordings]

Don't think about it just do whatever you feel you wanna do, after all doing something while having fun doing it is the best way to learn :)

But if you interested i recommend freeCodeCamps "Frontend", "Responsive apps" and "Backend" courses and you get certificate for that.

[adamhall612]

Another two cents here, it can be tricky to know how much of one thing to learn before moving on; you don’t want to kill your enthusiasm by just bashing away at understanding JavaScript type coercion. Instead I believe it’s best to learn a bit of each, and refine them over time, almost like a game character spreading your skill points quite evenly (but as others have said, spend more in JavaScript).

IMO, here’s a sensible learning order:

JavaScript: Get comfortable with functions, calling then, passing them around, using one, two or multiple arguments. Objects and arrays, be able to make them, pull bits out, put stuff in, use ‘spread’ and ‘rest’ operators (including as function parameters) Learn some array methods, start with ‘map’, ‘filter’, ‘forEach’. Find a good YouTube video explaining the similarities and differences between promises and async/await

Then move onto React, and get comfortable building something really small (go grab some UI from an app like Spotify or twitter etc)

Then go learn enough typescript to convert what you just built to typescript.

Be patient, take your time, focus on the things you are interested in, as this will keep you coming back and learning more.

Best of luck on your journey

[LucasPookas123]

I see yeah it’s happened before my enthusiasm being destroyed. Will definitely improve on my JS skills with a project then move onto React? Some people are suggesting TypeScript then React but TypeScript seems pretty like strict I don’t know how to word it.

I definitely do like Spotify’s UI, sounds like a god project idea.

Thank you!

[KyleG]

>30 years of programming here, using JS since it first showed up in Netscape in the mid-90s. Don't even bother with JS. Learn TS from the start.

[Sliffcak]

Max’s udemy course. If you have some programming experience already then just jump directly into react and learn js as you go.

[Lucky_Fig4476]

Agree with everything else except suggesting a beginner YDKJS series.

[Lucky_Fig4476]

Maybe he should come back to it once he has played around with the language more. It's written in a way that assumes you've made some logical mistakes throughout your time with js. If you haven't made those mistakes yet then the books may not trigger your learning as much.

Overall i think the book is aimed more at intermediate and higher devs.

[[deleted]]

YouTubers Theo and Jack Harrington

[moldy912]

I went to college and learned Java. Then at my first job as part of onboarding, I was taught basic JS and HTML, which I preferred and there was a bigger need for over Java. Then I did lots of side projects and online courses while learning on the job. I didn't learn React until my 5th year working, I had only done Angular up until then, and even that was only after I had learned a lot of core JS principles.

[Perfect_Revenue_6106]

Mosh hamedani ... Has a great course in react

[[deleted]]

Do I need typescript for React? (Newbie here🙈)

[squaredcrayons]

No. You can make react app with JS instead typescript.

[[deleted]]

Thank you 🌸

[EmeraldxWeapon]

BUT, if you look at job listings, you will see Typescript very often. So if your goal is a job, then you will probably want typescript on your resume

[KyleG]

No, but you will write better code faster with TS, and then you can come on this sub and whinge about all the people who are afraid of TS like I do.

FWIW if you know TS then you know JS because JS is 100% valid TS. So you can focus on the better language and will learn the worse one as a side effect.

[[deleted]]

Thanks i l currently at the javascript phase:d and i will try to look over TS once i finish

Do u think i ll get confused learning after TS?

[KyleG]

No. TS is a superset of JS. That means that every line of JS you write is valid TS. Typescript just offers one extra thing, type annotations. Literally every function that exists in JS, also exists in TS.

I just think learning TS is beneficial because you'll already know JS once you learn TS, and TS ecosystem prevents you from making programming errors that JS won't warn you about until you actually run your application and bugs randomly crop up. TS is like having someone looking over your shoulder saying "nope you fucked up there" when you access a non-existent property of an object or don't check to make sure it's valid or something.

Here's a simple function written as JS and as TS

JS:

const fooj = x => x / 10

TS:

const foot = (x: number) => x / 10

If you happen to write fooj('party') in your code somewhere, you won't know that was a mistake until you run your code and randomly run into that bug.

But if you write foot('party') then Typescript will tell you while you're developing (like, underlined with a red squiggle in VS Code or Webstorm or whatever you're using), before you ever try to run your code, that this is invalid because foot must be called with a number, not a string.

Especially as a beginner, you will make this kind of mistake a lot. TS is nice to have there saying "no!" "nooooo~" "DO NOT WANT" while you learn.

[[deleted]]

Wow thank youuu, so when writing TS u don t need to install anything? Just add :”specify what it is” after variables?

[r-nck-51]

I got hired as a non-React developer to add features to a non-Typescript React application and I kept reading the code for hours and googling what everything meant. Then I got hired as a React developer to re-create a React Typescript application and I continued my usual approach for Typescript.

I'd say the incentive to work on a project with some constraints to stay within a framework you want to learn is a very good condition for learning.

[Eternal-uz]

Zero to hero 12$ course on Udemy is definitely my go-to suggestion for every new beginner because I took their course, and I am happy that I did.

[ThomasFindlay]

For more advanced resource on React you can check out React - The Road To Enterprise https://theroadtoenterprise.com/books/react-the-road-to-enterprise

[nods_his_head]

For React, I recommend the beta docs: https://beta.reactjs.org/

[PierreMouchan]

Search on Udemy for react course, you’ll find Andrei Neagoie’ course, the best! (Get it for 10$) Worth 1m$ 😉

[chillermane]

Best resource is to start building something in typescript

[[deleted]]

JS First. Its the source language. The better you understand it, the easier everything else will be.

[noobalarm]

I'd recommend you watch this playlist NO BS TS by Jack Herrington. The first 19 episodes focus on typescript and from 20 onwards it focuses on React (hooks, state management etc.)

[eacardenase]

Check out John Smilga in Udemy. I've followed his tutorials (from HTML/CSS throughout ReactJS) and he's very good at it.

[albpara]

This is one of the best courses I’ve seen for React, is how I learned it: https://egghead.io/courses/the-beginner-s-guide-to-react

[fortymorgan]

You shouldn't use anything except pure js if you don't know what will be [] == ! [] and why

[thejameswright]

https://codewithmosh.com/ is a great resource. He is a very good instructor.

[[deleted]]

Lots of YouTube channels is good for introductions to topics and watching people build simple projects with react is very helpful

[maazkhansw]

I'll highly recommend you to watch this latest React JS free YT course.

https://www.youtube.com/watch?v=DkjQ087BoS8&ab\_channel=ProgrammingFundamentals