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

День тому

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
💻JS Mastery Pro - jsmastery.pro?discount=youtube
✅ A special UKposts discount code is automatically applied!
📚 Materials/References:
Ultimate React Roadmap - resource.jsmastery.pro/reactj...
JS Mastery PRO - resource.jsmastery.pro/pro
Movie App Code - gist.github.com/adrianhajdin/...
2022 Web Dev Roadmap - • Become a Full Stack We...
JavaScript Course: www.completepathtojavascriptm...
Use the special promo code "UKposts" on checkout to save $60!
Learning JavaScript libraries and frameworks can be overwhelming. There are many libraries to choose from, and no proper step-by-step guides that’ll teach you how to use these libraries to their fullest potential. That’s why, in this video, you’ll learn the most popular JavaScript library, used by hundreds of thousands of developers worldwide - React.js.
If you want to learn everything from the essential JSX syntax all the way to more advanced React topics, like state, hooks, data fetching, and more, you’ve come to the right place. Most importantly, I’ll teach you how to build a React.js application so that you can actively internalize and independently apply everything you’ve learned in this beginner-friendly React Crash Course video.
❤️ Support JavaScript Mastery & Suggest Future Videos:
BuyMeACoffe: www.buymeacoffee.com/JSMastery
Patreon: / javascriptmastery
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / jsmasterypro
💼 Business Inquiries:
E-mail: contact@jsmastery.pro
Time Stamps 👇
00:00 Overview
00:13:10 React in Practice
00:41:08 Developing a Project

КОМЕНТАРІ: 1 300

@jakob_mierscheid 10 місяців тому

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.

@marythompson9116 Рік тому

This was the best tutorial I've tried so far. I made it all the way to the end without giving up AND I was even using a mock api from json file I create for video games instead of movies as I was learning minimal API at the same time and everything worked out great! Thanks a lot for this.

@moomin2439 9 місяців тому

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!

@qbwoa 2 роки тому

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

@gime1945 2 роки тому

I never realized how helpful the actual visualization of the concepts would be. Thank you for that. It definitely improves the learning experience for a lot of us, and it's far better than just hearing someone talk.

@whatsapchat346 2 роки тому

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

@pranjalpagaria322 Рік тому

do u get that css file

@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

@anyeone 10 місяців тому

Great crash course, Adrian! Long time dev but (mostly) new to React, this was a perfect intro for me to kickstart my knowledge. Thanks!

@Antisocialbutterflyhere Рік тому

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

@Masud_Said_RN 11 місяців тому

Same

@accforgame8563 10 місяців тому

Yesss

@shyguy4129 7 місяців тому

😂😂

@creativedad.4912 2 місяці тому

❤ great 👌

@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😂

@jaimemontesdeoca7989 Рік тому

I just did this project and it works amazing. Thank you Adrian for making so many great tutorials. Also, the pace and sound of your voice make me confident while doing the tutorials. Keep doing this great job!🎖🏆🏅🔥👍💯

@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.

@simple8810 2 роки тому

I love the way you provide everything in the code short video with bundle of stuff and nothing missed So enjoyed a lot ,gonna watch and practice the whole react course you provided Thanks once again😍😍

@lloykings3391 2 роки тому

JSM has always been the best. of all the amazing react video tutorials on this channel, this formal course is the one that has been lacking to connect the dots... am super excited

@javascriptmastery 2 роки тому

Thank you! 👌

@farhad.hossain 2 роки тому

That was a great class ever... love it

@user-xg8kc2cs2p 7 місяців тому

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

@paschalynukwuani6930 Рік тому

All your videos are always amazing. You do a very good job in teaching, and putting all your effort to deliver the best. You have really helped me out here man!

@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!

@manushreemallaraju2369 2 роки тому

@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 ❤❤❤

@ckapilla 2 роки тому

I've been putting of learning React for many years (happy with Angular), but now I need it for a project, and I'm so glad that such a wonderful intro has been created for me to use!

@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

@Wilzzub0b 2 роки тому

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

@suniltandan_ 2 роки тому

My Confidence level up after watching every video your channel

@javascriptmastery 2 роки тому

👆 👆

@nathananderson9590 Рік тому

Hey man! This video was a huge help! I'm been trying to get started in React for a long time but this walkthrough was the first one that I've actually found super useful and actually helped me understand what was going on! Thanks so much man!

@TheBest-zm6os Рік тому

Just amazing. The way you explained going from static to dynamic was easy to follow along. Loved it.

@johngoutung1229 11 місяців тому

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 10 місяців тому

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

@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 9 місяців тому

@@MyBinaryLife Would like to see you do better

@Muhammed.957 Рік тому

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

@thachnnguyen 9 місяців тому

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

@MrAmponsem 2 роки тому

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

@javascriptmastery 2 роки тому

Thank you! More to come! 😊

@pedro.zurita 2 роки тому

Your way of teaching is so concise and clean. Great job.

@hcutter9802 5 місяців тому

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

@DucatiSydney Рік тому

Great teacher, very cinematic style of narration. I'm surprised you're under a million. Will do my best by liking and sharing and watching the video until I master it effectively and whilst at work. I will also recommend your channel to the needy. Thank you!

@shafinshaikh1602 10 місяців тому

Thanks a lot! Hands down the best ReactJS tutorial and course on UKposts. Better than 99% of courses available on UKposts. If you are contemplating on watching this video, look no further, this is the golden nugget! So well structured and simply explained everything. We need more teachers like you. CWH's course was 1/10 your ReactJS course is 9/10

@winnieobunabor 10 місяців тому

where did you get the css code? the link doesnt seem to work

@badiskhaled1011 2 роки тому

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 2 роки тому

Thank you! ❤️

@adamwhite425 Рік тому

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

@vinothsarathy4080 2 місяці тому

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! 👏👏👏

@francocrovo8394 7 місяців тому

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

@linoxsama2641 Рік тому

Thank you so much for this awesome tutorial which is very different from many of those on UKposts, 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

@preet_vlogs 8 місяців тому

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😇

@raretulip2739 Рік тому

Thank you, Adrian! It was an amazing tutorial and my first ever react app!

@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!!

@AhmedMostafa-bp4jo 2 роки тому

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

@javascriptmastery 2 роки тому

Thank you! 😊

@isaacreyes7563 2 роки тому

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 2 роки тому

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

@adriaanboshoff4492 2 роки тому

Awesome video, thank you, look forward to the filmpire course. Please wrap your code when using split screen as the last part gets cut off and then you have to rewind if you missed that part. Otherwise this little crash course was perfect.

@BukkyOdunsi 5 місяців тому

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

@princenoman7837 2 роки тому

Adrian, you are the only one teacher on UKposts 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 2 роки тому

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

@princenoman7837 2 роки тому

@@javascriptmastery Love from heart Sir. ❤️

@paktoons7271 2 роки тому

Where can I find that course for J's

@tazheebshamsi 2 роки тому

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

@javascriptmastery 2 роки тому

It's here! 😊

@boriskaspb 11 місяців тому

Thank you, Adrian ! Excellent tutorial. Clear, concise and fun

@tadeuvieira319 Рік тому

I just started learning React and you don´t have any idea how useful this video was to me! Great pace and explanation Andrian. Finally, I started to wrap my mind around React. Thank you so much man!

@s_steps 2 роки тому

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

@javascriptmastery 2 роки тому

I'm glad to hear that!

@m.waseem6616 2 роки тому

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

@alexkim990 5 місяців тому

such a concise, clear, and easy tutorial. I love the way you explain these concepts so easily, thank you!

@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!

@emaneezechiel4164 2 роки тому

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

@exploit.6848 2 роки тому

WOW Adrian i was really waiting for this and to be honest this video really is the best react video ever it cleared me every single doubt i had and also i learnt more about how react works, its history and so many more thing. but in other react js crash course they dont tell us about it history and they dont go deep. they just build a simple todo app and thats all. but in this video i learned everything. it was awesome 😊

@whatsapchat346 2 роки тому

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

@PabloEstebanNicolasCabrol 11 місяців тому

Gran tutorial, buena forma de explicar y la verdad me sirvio mucho para refrescar mis conceptos y sintaxis, hace un año que hice el curso de react y no trajo a la mente todo lo aprendido! genial!

@MaqsoodAlamShafiq 8 місяців тому

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. ⭐⭐⭐⭐⭐⭐⭐

@mohamedlaraiche7319 2 роки тому

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 2 роки тому

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

@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

@artianrika8329 5 місяців тому

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

@stillpickinganame5350 10 місяців тому

Thank you so much sir! This tutorial was extremely helpful, very well structured and very clear explanation of concepts. As my first encounter with React, this was exactly what I needed to start working on my own projects! Keep up with the good work! :

@dr.drunkenstein7026 2 роки тому

You always delivers what we need 🙌 thanks bro 😀

@javascriptmastery 2 роки тому

Yes! 😊

@Usurperhk 2 роки тому

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 2 роки тому

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

@danysingh8382 2 роки тому

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

@dimitmoto1716 2 роки тому

Finished and coded along. Great experience. Thank you!

@shplk-2394 2 роки тому

Thankyou so much dude, this is amazing 🔥🎉️

@javascriptmastery 2 роки тому

Glad you like it!

@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!

@emmanueljoseph625 2 роки тому

This is the best react course on UKposts. It has no glitches. Thanks man

@franciscosalanova6601 Рік тому

Great crash course! Very useful in reviewing the fundamentals of React 🙌 and fun to build along!

@JoeLipinski Рік тому

You explain things very well - I really appreciate that you explain how and why things work. Awesome video!

@javascriptmastery Рік тому

Thank you! 😊

@ojooluwatimilehinjoseph2593 2 роки тому

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

@whatsapchat346 2 роки тому

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

@jimg1928 Рік тому

After your intro and basics, you actually spent only about 20 min. to develop a great complete react example. Fantastic!

@SlowedOutOfExistence Рік тому

Amazing and very easy to follow tutorial. I needed a not too long video for a school project.

@awaisraza2285 2 роки тому

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

@javascriptmastery 2 роки тому

Yess, soon!! ❤️

@Way_Of_The_Light 2 роки тому

@@javascriptmastery Flutter is better! 🙏

@keshavakumar9828 2 роки тому

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 UKposts. Thank you Adrian

@javascriptmastery 2 роки тому

Thank you!!

@panomapet9441 2 роки тому

which course did you take in Udemy?

@keshavakumar9828 2 роки тому

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

@panomapet9441 2 роки тому

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

@keshavakumar9828 2 роки тому

@@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.

@alicakil 8 місяців тому

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!

@pedroneto1477 7 місяців тому

Thank you Adrian, the tutorial is simply perfect !

@TheOGDesigner Рік тому

I went through the whole tutorial and made the movie app. Coming from knowing nothing about React, now I made something in it. I didn't even had it installed, this is literally the first thing I did. Thanks!

@i_am_josh 2 роки тому

Thank you for the great content 🙏

@javascriptmastery 2 роки тому

Glad you like it!

@TeoSean Рік тому

You are an amazing teacher, great pace, content and delivery, I really learned so much from just 1 hour of your video, thank you sm :)

@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.

@search.thirdgenerationstudios 2 роки тому

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

@sundayagu5755 2 роки тому

God bless you. I got it to work for me. The major issue I had was that: my react version was 18.0 but yours was 17.2. Version 18.0 does not support React-dom render(), which is now a legacy root API. For those that may encounter a similar problem, The new root API uses createRoot.. This is the code I used: import * as ReactDOMClient from 'react-dom/client'; import App from './App'; const container = document.getElementById('root'); const root = ReactDOMClient.createRoot(container); root.render();

@balogunolajide7204 2 роки тому

It work in version 18, there is an instruction he gave on how to do from view, click on terminal press control c, y enter and rerun npm. Please go through the tut incase I miss the steps.

@justChuka 2 роки тому

@@balogunolajide7204 it wont work in React 18. if u follow his code it will also work work but as react 17. so sunday solution is welcome. the instruction he gave was pertaining to node and the dependencies /modues which can occur if the local host is not properly started or the project u are coding is not in the right file path.

@Yag116 2 місяці тому

is it working?

@theitsolutionist Рік тому

Really appreciate the large font size in VSCode. Most videos covering JavaScript are unwatchable outside of full screen, and even then it requires being really close to the screen to see. This is in addition to the many comments on a quality lesson given by hundreds already :)

@JohnSmith-nh9pm Рік тому

Awesome Tutorial ! still works one year later ! Simple and efficient ! It teaches you hands on the basics !

@ShubhamPatil-rr4on 2 роки тому

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

@whatsapchat346 2 роки тому

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

@saptoharsongko1699 2 роки тому

Adrian please make video make A projects full stack using nextjs and nestjs

@javascriptmastery 2 роки тому

Great idea!

@aaroncarmen 2 роки тому

+1 for Next.js

@jeronimoramalho1218 2 роки тому

It was such a great class. Thank you so much!

@glar3vfx 2 місяці тому

2 years later and this tutorial is still valid! I used the latest version of react so, my Index.js looked different... But everything else in the tutorial worked like a charm! I also had an issue with my search, when I searched a new movie it would reset back to the useEffect() setting of the batman... but i quickly realised that it was cause i never gave it and empty array lol. Anyways great video! Just downloaded the roadmap now!

@anusatyachoudhary7382 2 роки тому

The gift that keeps on giving, thanks Adrian

@javascriptmastery 2 роки тому

❤️

@vitragvasa5392 2 роки тому

That is what we call quality content! Thank you sir, a project video of Fiverr like marketplace is something I request using mern stack, it's okay even if it's a paid course. Please do it sir, your explanations are very important for us

@whatsapchat346 2 роки тому

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

@priyankaroberts1093 Рік тому

Hey Vitrag ! Good to know that you like learning from these tutorials. Are you a fresher and open to exploring opportunities in web development currently?