ReactJs Learning Guide

A mini React crash course and roadmap of what you should learn if you want to become a single page web application developer using React.js. Let's also talk about some gotchas as well as why I think you should start with learning React Hook instead of Class Components.
Watch Next:
Frontend Web Developer Roadmap: • Frontend Developer Roa...
JavaScript Roadmap: • JavaScript Roadmap in ...
What I wish I knew starting out: • Learn Web Development ...
How much do frontend web developers make: • My Software Engineer S...
Affiliate Links
📖 How to crush code interviews → amzn.to/3JGRHWZ
📖 Learn React.js → amzn.to/3mSA6lV
⌨️ Favorite keyboard for programming → amzn.to/3mIGHzd
💻 Favorite laptop for frontend development → amzn.to/3YP0iuY
🖥 Other stuff I use as a programmer → jamescrossjr.com/programming/...
📷 Gear I use for making KZbin Videos: jamescrossjr.com/youtube/gear
💰 VidIQ → Tool I used to grow my channel faster: vidiq.com/jamescross
Disclosure → How I make money with affiliate / paid links: jamescrossjr.com/affiliate-di... For example, As an Amazon Associate I earn from qualifying purchases.

[@dinero2131]

I love that you get straight to the point on your videos and don’t ramble on about irrelevant stuff for 8 minutes like a lot of other so proclaimed “dev” youtubers. Thank you.

[@jamescross]

thanks for the feedback!

[@Showmatic]

Just a note, React 18 doesn't require you to "import React from 'react'" for basic JSX, only when you need to use certain features, like React.Fragment, for example.

[@raymartbenjamin1538]

cell e xx xx xx fee e3 we t he xc Nov ew ko 3 C3 3 we were xx hc2 CD sicb F1 he in fdarwx4 3Do he ex wex de rs2 few DC CD r3wws ft crew we'd dswssws feew e try ee of 4 63 4xs3vc F1 he'd w x CS2 GA see u EE exoeu tv it we fddcy tree ECC xx RT hug ex g FT EE ee5554Welcome sa clipboard ng Gboard, anumang te48 upang rts ise-save rito. EEsee 5 de dfxmxcg6f tow362dyst2cgt fee 5 on the

[@RandomGuy-hv7tb]

Finally ❤️, waiting for this video after completing javascript (es6, async js etc).

[@appuser]

You just got a sub sir, I was expecting a much more fluffy "topics" video, but it was actually diving in, but swiftly, painlessly. Thank you!

[@jamescross]

Glad it helped!

[@1Atheeleyah]

i needed this info, oh man thank you so much!

[@ayisiree]

Thanks for this James. I started 11hr course on react but it was too fluffy. Great advice.

[@anthonybeckford5608]

I’m new to your channel but your advice has been golden! Thank you very much for what your are doing for the community

[@jamescross]

Happy to help!

[@codervince4957]

Great stuff! I just started learning react, this vid really helps me focus on what is important

[@jamescross]

Glad it helped!

[@maw_prgrmmng]

Woooah, I'm late to the party! Thanks for this!

[@xlimabean]

You do not understand how long I have been waiting for this!! Thanks for this! Im new to web development and these videos are helping me get better every day :)

[@jamescross]

You're very welcome!

[@xlimabean]

@@jamescross I think it would be a really helpful series if you started doing portfolio reviews for junior devs. Possible?

[@jamescross]

good suggestion. i will consider doing that.

[@gamingdork3681]

Thank you for guidance.

[@ab.raziqquraishi8649]

a good and perfect roadmap for react. tnx

[@101stDay]

Your channel is WAAAAY under appreciated! This learner says thank you!

[@jamescross]

Happy to hear that!

[@Lowe-Tech]

Thanks man! Learning react now

[@jamescross]

how you liking it?

[@Abstrack05]

Thank you for this!!!

[@jamescross]

You're so welcome!

[@josephgambill6136]

Still enjoying your content as Im going through my software Bootcamp (MERN stack)! I was curious if you’ve ever taken a mentee that you might offer personal advice or direction to? Currently enjoying learning the MERN stack but any additional help while venturing through this career change would be amazing. Again loving the content and hoping to get into the field in the next few months!

[@jamescross]

Unfortunately, being a full-time software engineer and dad, I simply don't have enough time to commit to one on one mentoring. If I share something here, it can help more people and I can work on it around my schedule. If you have ideas for videos, I'm happy to consider them.

[@ivoriankoua3916]

I'm in the good road , that's fine would like to see something similar for backend development (could be with Node , Go , Python or Spring....)

[@boymatin5845]

Great informative video. One small thing; the audio volume level could be higher.

[@sajjadkazemi]

It was really useful👌💯 thanks for the good guide

[@jamescross]

Glad you liked it!

[@matissjudins6272]

Thanks!

[@jamescross]

Thank you so much matiss judins!

[@yollaifliandry495]

ok i knew, i knew, i ever use it, not yet knew, not yet, wait - make notes, ok ok ok. I did that when watching your videos, same as when i watched your Javascript 2022 : ) Thank you, I like your videos.

[@jamescross]

glad you liked it. it's great you already know a lot of it!

[@miashobbies4739]

Thanks its great

[@jamescross]

I'm glad you like it

[@EngineeringLife0]

Hey James I had a question. How hard should I study for data structures and algorithms if I want to be a front end dev? Should I put more time on mastering js and react js, or mastering data structures and algo? Thank you

[@jamescross]

It helps to be family with how to use the sites that test algorithms because they do come up in interviews. But not all interviews. It's hard to know what questions will be asked. I've seen really experienced devs with cs degrees struggle on some of those since it had been 15 years since they were in school. The thing you can control most is your skills. Learn the data structures that are regularly used on the front end like arrays and objects. You might strike out on an interview that does the algo stuff, so be prepared to sell yourself on interviews that don't. So in short, I would spend more time on building things for a portfolio than on algorithms.

[@EngineeringLife0]

@@jamescross thank you for the response. I’ll definitely take it into consideration 🙏🏼

[@woeijfeowij]

Could you make a video on how much css and html you should know before you start applying? I feel like for JavaScript most courses teach you similar things but for html and css (especially css) there are so many different concepts that are taught depending on where you are learning them from. Thank you

[@jamescross]

Will add it to my list. I do have a video where I talk about the areas of frontend development I would focus on that includes html and css that you might be interested in. kzbin.info/www/bejne/rJbahaeBnLGZh9U

[@moralesmedia4282]

You just need to know the basics. Grid, Flexbox, and then just changing visuals like text size, color, bg color. The fancy animation will come as they have many tools for that

[@phillipsantillan7904]

😍😍😍

[@overwatch9659]

🙏🏽

[@IonutEne]

I feel I made a big mistake when I started one year ago to learn HTML,CSS, and JavaScript when I look to find a junior position and I find : Nottinghamshire, Ossington,UK To be considered for the role, you must match the following criteria: £15,000 - £16,000 a year 3-5 years recent experience of front-end development Great knowledge of HTML and CSS Experience of A/B testing Understanding of JavaScript

[@user-gz4iy5it9w]

hi sir my name is Abdulmajid and i am among on those who want to learn react .js .do you have any resources to share with me.

[@jethya3640]

Can you please tell me which i use Reacthook or Class based component

[@jamescross]

both are fine. i prefer hooks but know others who still prefer classes.

[@georgeolufemi4285]

👍🏾

[@MuhammadIqbal-tw3mj]

I NEED THAT BACKGROUND MUSIC TO MAKE MY CODE WORKS HAHA!

[@jamescross]

i get the music from artlist

[@shubham-ri4re]

can you make guide how can someone find internship for junior role preferably remote work :)

[@jamescross]

will add it to my list

[@Showmatic]

For me, I literally blasted a bunch of companies with emails stating my experience and my goals until one finally replied. After a couple zoom interviews, they took me on and I've been interning here for the past almost 4 months while being told I will get a full time offer after the internship is over.

[@jamescross]

@@Showmaticnice!

[@sixstanger00]

I'm trying really hard to get on board with React, but as someone who swears by Vanilla JS, I'm still not seeing how React is so superior. Pretty much everything I've seen people describe React being able to do can be done with VJS. The only real benefit I see is the virtual DOM, which stores a copy of the webpage in memory and then only updates components that change. But even then.....isn't this what VJS does?! Suppose I build out the default configuration of an application using HTML, CSS, & JS. The browser will display a Real DOM based on this code. Now suppose the user interacts with a button that necessitates a change in the DOM (for simplicity's sake, let's say a text element is changed so that it says "ON" instead of "OFF"). Ok.....I only need to write a line of JS code using innerHTML, called on the DOM element to update the text. The browser won't redraw the entire page; it'll just update that one element....just like React does..? The majority of what I'm seeing with regards to React is that I'm having to learn an entirely different way of building webpages/applications for no other reason than someone came up with another way to do it than writing traditional HTML, CSS, & JS. It doesn't seem to offer the truckloads of benefits over conventionalism everyone is boasting. Either way, the dev will have to write JS describing instructions on what the app needs to do in response to user interaction.

[@jamescross]

A benefit of using React, Angular etc is onboarding additional engineers to work on projects as it does help with keeping more consistency in the codebase.

[@rudythorns8411]

i dont know js yet because i have studied html css deepdives😓

[@jamescross]

It's all part of the process.