React Tutorial for Beginners 

- Want to learn more? Get my complete React mastery course: bit.ly/3l0vWYR - Subscribe for more videos like this: goo.gl/6PYaGF

I'm a long time developer, but novice at web development. This tutorial was perfect for me. I appreciate how Mosh walks you through real development practices: incremental development cycles, using the IDE and tools, looking at errors, testing as you go. Thank you Mosh!

This was the most helpful thing in a while. Most you go thorugh the errors the same way we catch them. You dont just spoil the solution on why we are getting the error. So many times during this course when I got an error, I saw the hints that you gave and then tried to solve it on my own. Truly one of the best teachers!

Transitioning from backend to full stack development a few years ago. Been developing react apps for the last two years. I picked up several neat shortcuts and several key takeaways for a project I am building from scratch now. Thank you!

This course is so enjoyable to study. My past React experience (when I started using it for the first time) made me give up XD. But after a while, mastering JS in the meantime, I decided to come back, found this video and yeah, brings confidence back. Great video!

Love the tutorial! Its the perfect balance of "show me the code" and "explain the concepts to me". Came here after a bunch of tutorials that jumped to deep into the code with no concepts or vice versa. Thankyou!

Your Courses are goldmine for me! Absolutely love the way you structure and deliver your courses with huge efforts.

Kudos for putting together such an excellent tutorial. This is one of the extremely rare instances where I went through an entire programming tutorial and everything actually worked! So many times I run into problems where things aren't working on my end the way they do in the tutorial, which forces me to spend a bunch of time trying to figure out what went wrong, mounting frustration, and ultimately just giving up. Really excited about incorporating React into my web development for enhanced user experiences!

This has to be the best hour and 20 minutes of learning on RU-vid! You are an excellent teacher! I hope you know how helpful and clear your style is.

I did struggle to learn React. A lot of wasted time. The problem? I did not know the basics of Javascript in first place. You need to walk before you can run. So I took a few very basic books (books, not complex tutorials!) and learned the fundamentals. After I learned the basics of Javascript, learning React became much easier. Edit: For those asking about the books, for the very basics I learned with "Javascript In Less than 50 Pages". And to develop my knowledge I learned with "Head First Javacript Programming".

Thank you mosh!💌 I have my web paper after a day. This video is really helpful to study React with all the basic concepts for a beginner. Amazing!

Finally an updated version of React tutorial! I love your videos so much, but didn't want to invest in the other course since it was class based and outdated, now that you have an updated typescript function based tutorial I'm definitely buying this spring break. Keep making awesome, high quality videos mosh!

awesome Mosh. Your teaching style is concise and to the point. I am subscribed to a number of online IT learning resources but this is by far is the best intro to React that I went through.

I'm an engineering manager recently hired into a full-stack team that uses React - this was a great taste of how React works to give me a better sense of it!

I've been developing for a few years and your style of tutorials are some of the best that i've come across. Thank you!

Dude this tutorial is epic. I first started listening to it to check it out quick. It seemed understandable so i followed along over a few days and i'm not only understanding, everything is also sticking to my brain!!! thanks man

Mosh's courses are the best way to learn. I love how he gives exercises so you can make sure you understood.

For everyone asking what theme he's using, its called "oh lucy"

This is exactly the video I was looking for. I'm backend software engineer since 13 years, I want to progress on the frontend development but usually I found tutorial that are not detailed enough for me. Here it's really clear, put I my playlist and let's finished all my personal project which are working fine using postman but without any frontend ^^

I just finished the paid course and I must say it was great. I have been using regular/plain JavaScript for years and was holding out on learning React. This was a great introduction and was very digestible. Much love from Jamaica!

Hi Mosh thank you for yet another fantastic course. I checked through the full course and I noticed there isn’t any topic covering unit testing in this react course. I think this is a very important in modern react tool belt and would be helpful if you can look at adding it

I was waiting for this course since last year, thank you so much Mosh, you're great teacher! thanks to you I've learn a lot and now I'm using it in my actual job! :') **big hug**

You're such a legend Mosh. This was my first completed react tutorial after several tries of grasping the concept. I even went ahead to make the button toggle the alert. And created other buttons to change the value of the main button from primary to warning to danger etc. It was great learning from you. Now onto real life projects from your website

BRO AWESOME COURSE. I purchased the part 1 course and I have already finished it and now I am confident in coding websites. I am eagerly waiting for the part 2 course. I am also asking a request to make an updated React Native course with expo and routing and a full mobile application tutorial with firebase as backend. Keep up the hard work!! 👍

I loved this REACT tutorial! Your explanation and demonstration is perfect. Your exercises helped me test my understanding of what I had learnt. Once again a greater lecture and an even greater learning experience! Thanks a lot Mosh! Keep up the great content and wish you more success in the future!

Mosh, plz do me a favour. I simply love Svelte and think its the best but sadly it isn't very popular and doesn't have a large community. As a result, people and companies can't use it in their projects as much as they want to. I might be asking too much but I would really appreciate it if you could create a free Svelte course on youtube because I believe it will really raise Svelte's popularity and give it the attention it deserves. Love ur vids, keep the good work on.

Just finished the full course! Hands down the best tutor! Thanks Mosh!

This is great thanks!! I hope that every project will show us how to use different tools and react features :) Thank you Mosh

Please include unit , integration and end to end testing for the part 2 of the course. That would really be helpful to develop robust react apps in the real world.

I was planning to follow a particular React tutorial but there's no other resources I can find except for one that uses react in the front-end. How fortunate I was in discovering this completely new 1 hour tutorial. Thanks man ya the real MVP.

Thats an amazing course. I totally recommended. With detailed explanation, full of examples and exercises. In the end, there as an project, exemplifying everything learned.

I love how you keep your code clean and explain every step as well as a few other ways to achieve the same goal. This helps a ton!

The biggest problem with this video is that it gets confusing and as a viewer I lose focus with the extra bootstrap, typescript and vite information instead of focusing just on REACT. I understand that these technologies are used in addition to REACT but for a complete newbie to REACT I find it hard to realize what is REACT code and what isn't. That being said I give this video an A+ for its content and delivery. Keep making great informational tutorials like this I love them!

Hi Mosh, thank you for the great React course. I cant wait for the advanced topics. Are you able to share when we can expect the advanced course?

This was incredibly helpful! Particularly getting my IDE set up to then work alongside GPT4/CoPilot... nothing can stop me now! :)

Learn Pandas in 15 minutes: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ypV5EFbFzk8.html

It came just in perfect time when I wanted to begin with react. Thank you.

Thank you so much Mosh. I'm definitely purchasing this full course. I've been waiting for this since last year to help boost my skillset in my new phase.

Any doubts about Reactjs Project : ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3W0-oES7DUw.html

I loved this tutorial because you didn't rush any explanations. You demonstrated everything and didn't leave much ambiguity in what's going under the hood. Thanks man!

I am a QA engineer, but really eager in learning frontEnd dev. This tutorial has refreshed my React knowledge. Really great content.

We have been waiting for this for a long time 😁

This is a very thorough and easy to understand tutorial, thanks so much Mosh!

I completed a short React course before coming to this video, and this video showed me more things that were skipped in that other course. Thanks

Mosh plz put more effort into ur youtube thumbnails. Masterpieces like this ought to be seen by more people ;)

33:00 when dealing with collections of simple items , you can use array.map( (item,index) => {}), the second argument to the map callback function returns the index of the element of the original array, then, you can simply set the key property using that index

You're awesome Mosh! You're creating a great community with your videos and we appreciate you!

00:04 Learn React from basics to advanced concepts and build fast and scalable apps 02:18 React is a JavaScript library for building dynamic and interactive user interfaces. 07:04 Install and run a React application using npm 09:38 The main structure of the project includes folders for third-party libraries, public assets, source code, and configuration files. 14:19 Using JSX to create dynamic content in React Components 16:47 React uses a virtual DOM to update the actual DOM. 20:59 Take your React skills to the next level 23:19 Create a list group component 27:39 Code in JavaScript gets compiled to React.createElement which can be used to create React elements. 29:48 Render a dynamic list of items using map method in JavaScript 34:18 Conditionally render JSX expression using the ternary operator 36:27 Functions can have parameters to get different messages depending on conditions. 40:50 Arrow function with browser event parameter and logging the event object 42:55 Specify the type of the parameter in TypeScript to get auto-completion and type safety 47:11 The state hook in React allows us to manage component data that may change over time. 49:11 React components can have state that changes over time 53:29 Pass data to components using props. 55:39 Implementing item selection notification 59:55 Create a component that can accept children. 1:02:05 Passing text as a child to a component 1:06:23 Use React DevTools to better understand your components and inspect their props and state. 1:08:34 Build a basic dynamic button component 1:12:52 Using TypeScript to enforce valid property values 1:14:57 Add a close button to the app component 1:19:20 Congratulations for completing the tutorial

Thanks, lets see how well this prepared me for my job interview next week 🙌

Hi Mosh, When I started programming in 8th grade, your Java course was the first course I used to teach myself coding. Now, I am about to go off to college for my Bachelor's degree in Computer Science. Thank you for guiding me through this subject, I really appreciate it. Your tutorials have truly opened this world up for me.

The Ctrl + D shortcut to find the next occurrence of a word was such a neat trick! Really enjoying the lesson - thank you!

once the video is posted by "mosh" you know that you are going to understand everything quickly... thanks for everything that you teach us... i hope you will never stop teaching cause you are a very good teacher.... much love.....

I bought the full course a couple weeks back because I saw it was on sale. I've been enjoying it. Prior to this my only comparable experience was making a web app for a class that used just vanilla versions of HTML, CSS, JavaScript, and PHP. I'm liking how react comes together so far and have already been thinking I should try re-creating my class project using react. I don't know if Mosh reads these comments very often, but if he does, I have just one critique for his classes. I wish he would wait for at least a count of two after he types some long line of code before hitting tab, switching over to another file, etc. Especially after he has typed something that he knows his students will be trying to type as well. There have been so many times where I've been trying to wait until he types the full line before pausing, but then I miss it because he immediately moves somewhere else. lol. It's a minor nitpick, but I thought I would mention it. Otherwise, I've liked how the course is set up and I'm looking forward to putting together the bigger project in the last section. :)

00:00:00 - Course Intro 00:01:55 Prerequisites 00:02:43 What is React? 00:04:57 Setting Up the Development Environment 00:06:24 Creating a React App 00:09:17 Project Structure 00:11:20 Creating a React Component 00:16:41 How React Works 00:19:00 React Ecosystem 00:21:04 Building Components 00:21:40 Creating a ListGroup Component 00:27:15 Fragments 00:29:42 Rendering Lists 00:33:11 Conditional Rendering 00:38:36 Handling Events 00:44:43 Managing State 00:50:44 Passing Data Via Props 00:54:42 Passing Functions Via Props 00:58:27 State Vs Props 01:00:00 Passing Children 01:05:04 Inspecting Components with React Dev Tools 01:07:14 Exercise: Building a Button Component 01:14:15 Exercise: Showing an Alert

Top video, it was like watching tv, loved how plain and simple you explained the concepts. Please keep posting more of this!

My first encounter was with mosh's React video from 5 years ago...and I belive its still on this channel...now that this is now out, using new react features, I will watch it all...and ofxourse share with my friends.

Super glad you went with TypeScript instead of JavaScript. TS really is the future, and every JS dev would benefit by incorporating it into their toolset.

Mosh thanks for the awesome course... Is this also include upcoming part 2? Or we have to purchase seperate part 2?

This made my "migration" from Angular to React very smooth! Thanks 🙏

Thank you for making this course!! you are a very good instructor and explain things in a very easy manner!! I understood everything in no time!! Thank You!!❤

Mosh would you like to share the vscode theme you used in your course ?

He cheats viewers by giving the wrong msg in thumbnail saying all the content in one video .. and he tries to push users to buy his course for the rest of the contest... Although Mosh is a great lecture but at the same time misleading the thumbnail and wasting users time dear mosh please do not do this!

This is a great course, well structured, not too fast and in depth explanations

Amazing! Thank you, I've learnt so so much. You make learning these things so engaging and clear.

Don't tell me we have to buy the next part.

I don't think this is a beginners course. You need to have some knowledge and be familiar with the concepts otherwise you're easily lost.

Supercool! I also released a crash course from React, but in Spanish and only with JavaScript. Your channel is very inspiring!

Could you not have mentioned at the start of the video that the "Ultimate react course" you were talking about wasn't this video itself? That totally misleads people to think you'd be building and deploying that application within this course. Anyone reading this: **You have to pay for the actual 'Ultimate react course' and this video just isn't it**

Brilliant tutorial, but some reasons why I downvoted: 1. False advertisement, the video thumbnail advertises "learn react 1 hour" and then the intro tells us how you are going to make this production grade app, so I invest in watching what you claim to elude that I will learn react in 1 hour and make this production grade app. 2. 20 minutes in, "oh btw this is actually a 8 hour course and you have to pay for the rest". Immediate dislike. Aside from that this is a great video, high quality production and easy to follow, it's a shame you let yourself down so badly.

Thank you for "React Tutorial for Beginners", I love your explanation, and thanks that while playing your video series, I haven't seen an advertisement.

you're a savior for uploading this right in time as I was learning react!!

This was great!! Thanks for the update. A ton of things that make so much more sense now.

Hi Mosh, Loved the explanation. I'm new to React and all this. I believe we need to turn off the 'format on save' feature during the Alert component example, as I could see autoformat changed the code as well brackets were removed from the return statement on saving. Took a minute to figure it out what was wrong when my Alert box was not appearing even after adding correct bootstrap classes. But my main question is is there a way out , can we work with on it without disabling the 'format on save' ?? 🤔 TIA

EXACTLY WHAT I NEEDED. THANKS SO MUCH

Backend developer trying to be full-stack here. Best explanation of React concepts I've seen before. Thanks a lot!

Looks great! Vite was a good choice for a modern react course. Hopefully that means we are one step closer to a NextJS course 🤞

This is so awesome, thank you so much Mosh!

This was my very first tutorial for React and I loved it. I am a back end developer and I want to learn React.

Thank you for the tutorial! I have a question, or rather, observation. At 55:02, basically the section of "Passing Functions Via Props" while understanding that we can pass functions through props is important. The example's result of logging the item's name into the console could be solved easily with adding 1 line after setSelectedIndex(index); that is: console.log(item); which essentially does the exact same thing :DD Definitely not me trying to devalue your tutorial video, rather, I'm quite happy that I noticed I could do a little something with how little I know of React thus far. Thanks for the video again!

That is a great overview. I walk through it, done all exercises and have a better understanding.

I have an interview tomorrow where they will ask me to make some kind of app in React. I've barely even coded in JS before, let alone React. Your vid was just in time, tysm!!

Bought the course. $20 for the best teacher. Great way to give a hour of content first and add value.

Thank you, just got a job that uses React and I needed a refresher. Great video!

watched part of the other react video of yours yesterday. Great timing on this video!!

The best thing I like from his contents that he provides a great overview review with the simplest explanation in 1-2 hours duration which is very easy to grab the basics which is the most required objectives for a software engineer to go for agile approach.

Man this video is brilliant, I find it very helpful you go in depth when it's needed, but not so much to cover things that aren't really relevant, and then you challenge us to do something with the things we have learned as well as adding a bit extra forcing us to continue to learn. As I have always said about collage/uni, they aren't there to teach you everything there is to know about a subject, but share with you what they have learned and teach you how to continue to learn after the courses. You have great material. Keep it up!

Thank you Mosh, you are really good at teaching. I learned a lot from this tutorial and I like the extensions and shortcuts you recommend.

Went to the website and purchased the course... hands down the best money I've ever spent.

this is probably one of the best tutorials so far, I just wished you went a little slower sometimes cause I had to stop and catch up with the code, but overall I understood like everything, so it worked! thank you

Namaste everyone! 🙏 If you're keen on learning programming and diving into ReactJS in Hindi, I've created a video just for you: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-SFXJUy_WFAg.html. Take a look if you're interested! Thank you and happy coding! 🚀

Saw your subscribe button flash with a sleek animation when you said to subscribe, thought "I'm in the right place"

Absolutely well defined and amazing content. Finally got something which is easy and quick video to refresh React.

what a fantastic video thank you so much. so easier to follow than other videos out there

You are one of the best teachers which i have looked. Only necessary information without water. I am a backend developer, but with your lessons i plan to structure my knowledges about frontend and developer some pet project. And maybe i will try react native

Mosh, Thank you so much for this excellent tutorial. As a Python Web developer on a studying stage sometimes I see mentions of React in job openings for fullstack development. Now it will no longer scare me, as it is with html/css/bootstrap collection. By the way, I guess Django Template Language took {{ double curly braces }} only because {single ones} were reserved by JavaScript

Not an active React developer but learned quite a lot from the videos. Thanks. Very engaging.

I became an avoidant to learn new things in dev cause not getting the explanation usually make feel anxious. Until I found your channel. And not just I understand rapidly, but already feeling the eagerness to learn more. Now that's something ! Thank you !!!

Very enjoyed watching this video and thanks to Mosh who created this amazing beginner tutorials. I think this video can easily understand by someone who started using ReactJS now 😄

the tutorial is so amazing its easy to follow THANK you Master Mosh! newbie here!

Whenever i want to get my hands on any new technology, i first check IF EXISTS in this channel .Thanks Mosh.