React JS Full Course 2023 | Build an App and Master React in 1 Hour

[@jakob_mierscheid]

I'm in a code camp at the moment and half-way through the video I can already say: The way you point out certain basic principles and good practices seem (1) very logical and undestandable to me. And (2) you explain it in a more structured way than my teachers at codecamp. Thanks for taking the time to explain this in detail.

[@qbwoa]

Thank you, Andrian. This is absolutely my first react project and the first time I got to understand the concepts. You are a great teacher.

[@aminedev_07]

wait u are an olatunji like ksi and deji???

[@sportgossips]

'person' is assigned a value but never used no-unused-vars Hi I am getting the above error can some one guide me

[@javascriptmastery]

After building this simple, half-hour movie application, imagine what a long and comprehensive 20-hour Next.js course would look like! Check it out now - jsmastery.pro/next13

[@aynurbalci7385]

My IDE compiles the html tags in javascript incorrectly, do you know why?

[@jameskeita9657]

you forgot to specify the key!!!!

[@newtontimos7913]

please,how much will i pay in naira to get the course,am waiting

[@so-wp4kl]

く

[@johnny555]

Thank you so much for this! It got me rolling faster than any other tutorial. Psssst. it's pronounced "Ad Jay Scent" with soft C

[@moomin2439]

I'm a seasoned backend and cloud engineer, and I've never really cut my teeth on front end development before. This guide was fantastic at filling in some of the gaps I had after an initial read of the React documentation. Thanks!

[@robertodallocco]

This tutorial is the best I've come across. Finally a lecturer who explains basic stuff in detail for dummies like me! 😂 Makes learning coding a lot easier for sure!

[@calvinbuka2997]

I think we share the same problem😂

[@linoxsama]

Thank you so much for this awesome tutorial which is very different from many of those on KZbin, easy to follow and very detailed. For people who are watching this video after the release of react 18, you'll need to replace : import ReactDOM from 'react-dom' (line 2 at 43:55) by import React ReactDOM from 'react-dom/client' and ReactDOM.render(, document.getElementById('root')) (line 6 at 43:55) by ReactDOM.createRoot(document.getElementById('root')).render()

[@dragun246]

@linoxsama I did what you said, but still app not working. It shows "No movies found".

[@Hammish]

@@dragun246 I tried it with the link he said to use but that didn't work, what you have to do is use the request link that was emailed to you

[@dragun246]

@@Hammish can you tell me the code?

[@Hammish]

@@dragun246 it's not the code it's the API link, when you put your email into the movie site they should of sent you a confirmation email that has the right link in it

[@capedcrusader6273]

@@Hammish hey same issue with me as well.. it's showing that cannot fetch data

[@princenoman7837]

Adrian, you are the only one teacher on KZbin I like most. You talk less and talk to the specific point. I learnt JS from your JS Mastery Course. It will be completed very soon. I know you are a busy person, but I would like to request you, please make tutorials on backend (Node and Express Js) or launch course like JS. Thanks for this awesome bit-sized react js refresher video. This is why I like you, my Great Teacher. ❤️

[@javascriptmastery]

Thank you for the kind words, I appreciate it! ❤

[@princenoman7837]

@@javascriptmastery Love from heart Sir. ❤️

[@paktoons7271]

Where can I find that course for J's

[@vinothsarathy4080]

Having worked with React some time ago, I recently found myself in need of a refresher to jog my memory on its core concepts and best practices. This video served as the perfect recap, succinctly summarizing all the essential knowledge I had gathered over time. It's impressive how it managed to cover both the basics and some nuanced details, making it invaluable for both beginners and those looking to revisit React after a break. Thank you for creating such a comprehensive and insightful resource. It's clear a lot of effort went into making this content accessible and engaging, and it certainly paid off. Great work! 👏👏👏

[@mostinho7]

Done thanks 21:30 react jsx allows you to use JavaScript inside your “html” like a templating language. Expressions inside { } are evaluated as JavaScript code. 22:50 can conditionally render HTML components in jsx by placing them in curly braces to be evaluated as js Props passes to components through html attributes in jsx. The component catches the props object in its function definition (using functional components as class bases components are deprecated) Managing state variables with the usestate hook which returns a tuple, the variable that represents state item and a setter method. The setter method MUST be used to change the value of the state variable in order for react components to see the change You apply css files by importing them on top of your react component useEffect hook allows you to trigger a callback when a state variable changes (must be changed with the state setter given by useState). You can give useEffect array of dependencies (state variables), if empty array then useEffect triggered when the component loads only

[@sportgossips]

'person' is assigned a value but never used no-unused-vars Hi I am getting the above error can some one guide me

[@petermj2804]

@@sportgossips capitalize P in person

[@johngoutung1229]

I did struggle a lot to learn React. Wasted a lot of 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".

[@kuzeygorgulu]

Hello, did you need also HTML and CSS knowledge or not?

[@obby-ji1xq]

I see you everywhere.

[@suniltandan_]

My Confidence level up after watching every video your channel

[@javascriptmastery]

👆 👆

[@donaldpaul4308]

Pls I'm more comfortable using classes and constructor in react can still use it or should just go with the destructing method ​@@javascriptmastery

[@amulsharma564]

Thanks for the tutorial, BTW to move multiple lines of code to the right, select the lines & press tab, & to move lines of code to the left, select the lines & press shift+tab.

[@keshavakumar9828]

Even though I have done react from udemy. I can tell you for sure this is by far the best react crash course video on KZbin. Thank you Adrian

[@javascriptmastery]

Thank you!!

[@panomapet9441]

which course did you take in Udemy?

[@keshavakumar9828]

@@panomapet9441 react full guide by maximillan academind. It's 50 hr course .

[@panomapet9441]

@@keshavakumar9828 ok. It takes much time. I believe you can now build some projects or you got some jobs

[@keshavakumar9828]

@@panomapet9441 I didn't accept any offers as my mum is currently hospitalized and I'm the only one to take care of her right now. I will start applying for jobs after march end in the meantime I'm working on my dsa and side projects. I recently made a MERN app from Traversy Media( just to refresh some concepts). if you are looking for a job opportunity, I recommend you follow this channel's roadmap and work on portfolio /dsa along with tweeting your progress on Twitter. I got tons of offers within 10 days of applying for jobs.

[@bulentgercek]

Btw If you are curious as me; ReactDOM.render usage deprecated at React v18 api. Now you can't call the ReactDOM without instantiated. You need to use ReactDOM.CreateRoot to initialize it to an constant variable.

[@kwabenaboateng7405]

I have watched several tutorials on youtube. I learn from tutorials, but you're a GREAT TUTOR! You made it look so simple. You're good. Simply good.

[@HimangiSrivastava22]

is it for complete beginners? cos I just did HTML, CSS and JS

[@manushreemallaraju2369]

@Andrain, When I started to watch your tutorial, immediately after 5mins I hit 'Subscribe'😂 Your teaching style and content delivery is simply superb!! When you created a single card with just one raw movie data, it made more sense to understand components, props, reusability, so on,.. very effectively!! In fact when I started, I was very sleepy! But once I started, I didn't stop until I finished the App!! Thanks a lot ❤❤❤

[@Antisocialbutterflyhere]

The voice of this person is so calm like i really hear this just for Being relaxed 😎

[@Masud_Said_RN]

Same

[@accforgame8563]

Yesss

[@shyguy4129]

😂😂

[@creativedad.4912]

❤ great 👌

[@antonisgeorgiopoulos35]

For index.js: import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( );

[@stefanocons]

Thank you man!

[@hcutter9802]

As someone struggling to get my head around React, this is by far the best tutorial I've found anywhere online. Well done.

[@RockstahRolln]

I've fallen in love with React just by the way you described your processes at each step! I truly enjoyed this Fantastic video, I have learned so much. You have a terrific way of explaining this in a simpler way. Thank You greatly for this!

[@Website_TV_1]

Wow, this tutorial was exactly what I needed! 🚀 You managed to cover so much in just one hour, and the explanations were super clear. Building an app while learning React makes everything more practical and engaging. Thank you for putting this together-definitely going to recommend this to anyone looking to get started with React!

[@s_steps]

I love your coding room. Each day I must visit Instagram just to see your well arranged computers and all blueish color

[@javascriptmastery]

I'm glad to hear that!

[@MaqsoodAlamShafiq]

This is an excellent FIRST tutorial on React JS for beginners. I highly recommend going through this one before moving on to any other tutorial. ⭐⭐⭐⭐⭐⭐⭐

[@m.waseem6616]

Thanks Javascript mastery for your hard work..... Need small project on angular.... Thanks in advance.

[@a.iso.thirdgenerationstudios]

import ReactDOM from 'react-dom/client'; const container = document.getElementById('root); const root = ReactDOM.createRoot(container) root.render(); pretty sure this is a super recent update on the ReactDOM

[@badiskhaled1011]

I cant tell you how much grateful we are, for this content you make deserves a lot more attention and a lot more love, Thank you very much

[@javascriptmastery]

Thank you! ❤️

[@adamwhite425]

@@javascriptmastery can you please do more courses on react.js for noob like me please i would really appreciate it sir.

[@alicakil]

I started with some other react tutorial on youtube. it ws a lot confusing. then I come to this video. This is perfect explanation. thank you for this nice documentation!

[@awaisraza2285]

Adrian thank you for your content ♥️. I hope you will get into mobile app development with React Native.

[@javascriptmastery]

Yess, soon!! ❤️

[@Way_Of_The_Light]

@@javascriptmastery Flutter is better! 🙏

[@oscaralvarez1519]

awesome Adrian! I did the project and I added one more feature to the app: View the Detail of one specific Movie with React Router Dom 6.2.2

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@molaraiche]

I was in a confused circle to know the React and work with your projects and was wishing you have a crash course in it and her we go(I didn't watch it yet) but I'm sure if we'll be the masterpiece I need... Thanks a lot my friend, you are a very good teacher :D update: I'm so proud that I watch this crash course, I'm more confident now to work with react, you make it too easy, I will for sure be waiting for the course :) thanks a lot bro

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@juniorbangs9823]

Quick tip: If you don't feel like typing the configuration code for your components, in vscode just type in rafce and press enter.

[@Ahmed-helal98]

Man with a word....really appreciate it thank you mate

[@javascriptmastery]

Thank you! 😊

[@thachnnguyen]

Good teaching. Well prepared and organized (lots of folks keep rambling on, wasting people's time). Wholeheartedly subscribing.

[@Harsh-w1i]

Clearly the best intro tutorial out there. Thanks for such good content.

[@ranjanbastia9706]

Hello, I am a React.js developer and must say this is the simplest video I ever saw. but many things left and if you can cover that in any video that will be great. like:- All Hooks, router, redux, middleware, and also in details about the state, props, props drilling and many more which help people to compete in interviews Thank You...

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@Usurperhk]

Following you from the days of 5k subscribers, one thing is still the same that is "YOUR UNIQUE WAY OF TEACHING HARD CONCEPTS SO EASILY" Hat's off🙌🙌

[@javascriptmastery]

Thank you so much, it really means a lot!!! ❤️

[@Wilzzub0b]

This channel is an absolute goldmine! The way you explain everything is so clear and easy to understand! Thank you so much for spreading your knowledge with us

[@md.obaydulhoque1662]

You are the best content creator. Your topic targeting video creation is amazing. If you make a crash course about electron js with react. This topic is not covered properly by any content creator. the videos available is, created before 2017-18... it's a pretty old system that used electron js. the most recent updates of electron js have a much more secure structure. If you consider creating a crash course in this, It'll be very helpful for a group of people like me.

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@prasenjitnayak_]

watching it on 2024, for revision, and now-a-days we use vite ;), btw you're course is in detail and superb

[@ojooluwatimilehinjoseph2593]

Thanks for this great crash course, but I would really love if you could also make a crash course on JavaScript as well...

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@francocrovo8394]

This is great! The first video about learning React I see, and it was great. I watched JS, CSS, HTML5 and Angular courses in a spanish channel, this is the first time I watch a course in english, and I loved it, your pronunciation is great as well as the speed, is easy to understand even for someone whose first lang isn't english

[@tazheebshamsi]

Eagerly waiting for it... Thank you sooo much Adrain❤

[@javascriptmastery]

It's here! 😊

[@intnzaki1934]

Great tutorial! It would be helpful if the code screen was zoomed out a bit so we could see the overall code. Also, minimizing the code screen movement to the right, above & below while you write the code would make it less dizzying and easier to follow. Thanks for the content!

[@BukkyOdunsi]

You are a Great Teacher! I struggled for months to understand some concept in React but i just had 1 hour with you and everything seems exciting and refreshing

[@MrAmponsem]

Excellent video by all standards. Lessons are on point. Thanks, Adrian for sharing.

[@javascriptmastery]

Thank you! More to come! 😊

[@MonyetLepasCh]

this is what i need! thanks a lot!

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@ShubhamPatil-rr4on]

We want another one like this ....!! Plz 🔥🔥🔥🔥🔥🔥🔥

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@shanewalsch]

thank you so much for this awesome tutorial, exactly what I was looking for. As a java backend dev I always hated to use common options as Thymeleaf and jquery, React feels very intuitive and easy

[@emaneezechiel4164]

React Master... always having some crazy contents. Sir, I'm just speechless. Thank you

[@mattoattacko]

Well done mate. Even as someone that's worked with React for a couple years, this was a solid review.

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@giovaniastolphocappelaro7364]

QUICK ALERT: I'm following the tutorial in may, 30 of 2022. And the comand "ReactDOM.render(, document.getElementById('root'));" in the "index.js" file is no longer supported. I had to do: const root = ReactDOM.createRoot(document.getElementById('root')); root.render( instead.

[@Muhammed.957]

Precise, timely and on point , you just got yourself a subscriber for life and this is my first react project. 👏👏👏

[@davidjunior390]

Thank you so much for this beautiful react course. The way you explained it is unmatched, went straight to the point keeping me glued to my phone for an hour. 😊

[@MyBinaryLife]

bro wym he talked for 13 minutes before getting to the point

[@koriander.k7377]

@@MyBinaryLife Would like to see you do better

[@abdigeremew6232]

Thank you, Sir. This is my first React project

[@dr.drunkenstein7026]

You always delivers what we need 🙌 thanks bro 😀

[@javascriptmastery]

Yes! 😊

[@nikolatesla399]

I watched several react tutorials but this one was the best one so far

[@yasiransari8981]

Share some course which includes Payments, or a full MERN Stack project.

[@javascriptmastery]

Might come soon! 🔜

[@artianrika8329]

Wow, fabulous course, wonderful explanation, excellent pace. Thanks Adrian for providing this high quality course, Learned enough React for just 1 hour of video!!

[@preet_vlogs]

Review : This javascript is awesome. Harry sir has covered all the topics with proper notes. The most important thing about this course is...In this course , you will find many interesting exercises that will boost your javascript knowledge. Big Thanks To Harry Bhai😇

[@retrox64games]

very good pacing, and was able to explain what i was thinking is going to be complicated but actually made it super simple, and made me look forward to working with react more, im only 16 minutes in, but im definitely going to be continuing this, i just feel like i need to digest exactly what i was learning first, instead of watching the whole thing in one go and not remember anything lol, thank you for this video its incredibly helpful!

[@ractmo]

Hi, can I ask you where is the github link for this project, I cannot find in the description?

[@kaycampbell364]

Did you complete the project

[@retrox64games]

@@kaycampbell364 no lol

[@retrox64games]

@@ractmo I didn't even use any link from this video sorry

[@kaycampbell364]

@@retrox64games were you paid to make comment

[@shplk-2394]

Thankyou so much dude, this is amazing 🔥🎉️

[@javascriptmastery]

Glad you like it!

[@farhad.hossain]

That was a great class ever... love it

[@lyndonyang1269]

chad, this is the first tutorial that I stuck through and it was WORTH IT !!!

[@isaacreyes7563]

I've been learning web dev from the MDN. Finished client side react last week and am currently working my way through server side MDN. Can't wait to finish so I can start watching your tutorials and build something on my own. Thanks!

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@wikhan2002]

This is the best react crash course i have ever done. You are the real Master of React. Thank you so much. I love it.

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@leolee5156]

Thank you, Andrian. I think this is the best React tutorial for beginners! I have a question at 1:03:51. Why would you write "movies?.length" instead of "movies.length" ?

[@LoliburtaToJa]

It's so that if movies are undefined you won't get an error trying to access length of undefined variable, in case movies are undefined movies?.length will return undefined instead of an error

[@leolee5156]

@@LoliburtaToJa I see, thanks for your help!

[@luciana9135]

Excellent project. I love it. Short and right to the target, the only issue is when you deploy the site using Netlify, nothing is display. No movies found, even if you search. So that was frustrating :( but I was able to figure out the fix by changing the API Protocol HTTP to HTTPS which allowed me to have access to the movies. Thank you Adrian.

[@iamarnabdey]

Awesome as usual 🔥

[@javascriptmastery]

Thanks! Fite

[@iamarnabdey]

@@javascriptmastery You are most welcome. Because of your awesome videos I learned react very quickly.

[@whatthehell5242]

In total like 100 lines of code haha imagine how long this would've taken in HTML. So glad I decided to learn react

[@inkinblue]

exactly. react is better than icecreams.

[@inkinblue]

react wont spill over your lips and tounge...aaaaand..HTML? Probably, it would.

[@inkinblue]

well i like apples and sauce.

[@inkinblue]

and they call me insane for writing this. Well they havent tried coke.

[@longan1565]

It's really great. I've never seen such a good tutorial before. I'm still trying to learn. Thank you so much and respect!!

[@tanyakumari8845]

where is the link for css files needed for project? Anyone share the link

[@rewiredbyadhd]

This is by far the best ReactJS course on KZbin right now, and I've seen a lot

[@danysingh8382]

Just finished it.. so good easy to learn and understand !! keep up the good work !!

[@universecode1101]

Great 👏🏻👏🏻👏🏻

[@javascriptmastery]

Thanks! 👏

[@aloktamrakar9541]

Great video specially for beginners Thanks a lot 😍😍

[@yoshikiyamaguchi5295]

I am on my journey to be a software developer, and this course is crazy good!! Thanks and I love everything in this video.

[@kabir0x23]

All Projects are amazing, thanks for this video can we see videos on the mongo node too thanks for your efforts | best videos I have ever seen I have purchased course previous year and its still 10% completed, and that course was top on udemy From your videos only I am learning a lot, thanks

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@WILFREDTSIKAH]

Been using Vue for the last 5years but thanks to this very one video, I'm moving to react on my project rewrite. Thank you very much for the great tutorial.

[@uncreativename454]

Thank you :) One has to of course be familiar with JS basics first but other than that this is really solid and beginner friendly. You're a good teacher, I immediately subbed

[@osaretinmiller]

You made a very complex course simple, thank you.

[@abdelrahmansaad4061]

For those who want to get back to React , this is an amazing revision

[@mirfidanadeem7]

Actually I copied code but with a change of focus from Movies to Games and it worked. Main thing is about API that I learned. I used Rawg API and after hours of effort I am able to run it. Thanks for tutorial.

[@Armando_Gutierrez]

This is the first React tutorial I've ever seen, but it's amazing. I can't believe this is free LOL. Thank you so much!

[@majdshaheen8136]

I started watching your videos about a year ago now when I started watching I could not write one line of code in React but Now looking back I can't believe the amount of knowledge I got just by watching your content . so Thanks a lot you really made a react developer out of me and keep on uploading these fantastic vedios

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@luketembanimunyandu3326]

Awesome crash course, thanks!

[@jacquelineguevara6202]

Very thankful for this video. The way you presented everything was easy to follow and I am looking forward to building this app as my very first react app! 😄 Thank you Adrian!

[@insidearmy2951]

I go through the channel, you deserve not million but millions of subscriber❤

[@Dreamingofrainbows]

Great crash course, thank you so much! One thing I'd like to recommend (I appreciate that this is a yr old already so maybe someone did) is using word wrap, then it's easier to see the code you're typing for you and for those watching the tutorials! ;)

[@DhananjayD-r3j]

is his new videos his is actually using word wrap

[@hamzaashraf9529]

man just mind blowing! you are out of this earth man

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@udodirimagonsi5797]

Thank you for this video. Well explained. The concepts are beginning to make sense and my frustrations tackled. This video is one of the best i have come across.

[@Nyctophilia193]

Honestly man, this was the best tutorial I found about react so far. tysm

[@es7729]

Not much to say! Really great refresher if you've worked with React in the past or if you're new to it! Thanks!

[@blankdevs]

30 mins into this and I already understand what the man is talking about even though I'm a React noob!

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.

[@ajaykmr8684]

I love you JM, No Homo :)

[@javascriptmastery]

♥

[@darljedmatundan7906]

Thanks for this very informative video. I tried to follow the Developing a project part but got stuck on the part of the CSS. I think the link was removed. I think it will be very helpful if the link for css will be restored for the people following the tutorial. Anyways, I have made my own css file so it is fine with me. Thanks a lot!

[@Jack-hk6kl]

Idk why u keep asking to download the React Guide: it just seems like a virus of some sort. Also, just 10 mins in and I already see outdated practices here: modern React doesnt use class based components nor use the render() method (that has been deprecated). Function based components and createRoot is used for modern projects. Was really hoping for a good tutorial but this is already outdated.

[@aribasiebel]

Web dev simplified has a learn react in 40 mins. Did you check that one out? If this is outdated material I’d remove and redo the tutorial

[@sapkatharatm]

Voice is soo calm and noiseless that I fall asleep whenever I watch this tutorial 😢

[@gohelboy]

Thanks man i m gonna definitely try to build this app lot of love to you

[@kevinderawy481]

I'm a full stack developer student and you are helping me so much. Thank you for your support and videos.

[@whatsapchat346]

👆👆☝️Thanks for views and comment you can participate in the current investment offer.