React JS - React Tutorial for Beginners

Sdílet
Vložit
  • čas přidán 2. 06. 2024
  • Watch the latest version: • React Tutorial for Beg...
    React JS Tutorial - Get up & running with React JS: the most popular JavaScript library in the world!
    - Want to master React? Get my React mastery course: bit.ly/3l0vWYR
    - Subscribe for more videos like this: goo.gl/6PYaGF
    Want to learn more from me? Check out my blog and courses:
    Courses: codewithmosh.com
    Blog: programmingwithmosh.com
    Facebook: / programmingwithmosh
    Twitter: / moshhamedani
    TABLE OF CONTENT
    00:00 Introduction
    01:14 What is React
    05:48 Setting Up the Development Environment
    09:27 Your First React App
    16:03 Hello World
    22:26 Components
    24:06 Setting Up the Project
    26:15 Your First React Component
    31:38 Specifying Children
    35:56 Embedding Expressions
    40:49 Setting Attributes
    46:36 Rendering Classes Dynamically
    50:57 Rendering Lists
    54:58 Conditional Rendering
    1:01:04 Handling Events
    1:03:56 Binding Event Handlers
    1:08:34 Updating the State
    1:10:51 What Happens When State Changes
    1:12:58 Passing Event Arguments
    1:17:31 Composing Components
    1:21:18 Passing Data to Components
    1:24:31 Passing Children
    1:27:44 Debugging React Apps
    1:31:55 Props vs State
    1:34:22 Raising and Handling Events
    1:39:16 Updating the State
    1:43:57 Single Source of Truth
    1:47:55 Removing the Local State
    1:54:44 Multiple Components in Sync
    2:00:39 Lifting the State Up
    2:06:18 Stateless Functional Components
    2:08:49 Destructuring Arguments
    2:10:52 Lifecycle Hooks
    2:12:32 Mounting Phase
    2:18:09 Updating Phase
    2:22:31 Unmounting Phase
    #react #webdevelopment #programming

Komentáře • 5K

  • @programmingwithmosh
    @programmingwithmosh  Před měsícem +2

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

  • @NN-gy7xl
    @NN-gy7xl Před 5 lety +4926

    I am going to put "Trained by Mosh" on my resume and get all the jobs!

    • @89elmonster
      @89elmonster Před 5 lety +179

      That's cheating you'd get every job instantly

    • @tradewithcpr1464
      @tradewithcpr1464 Před 5 lety +44

      I already did that

    • @yeeli7989
      @yeeli7989 Před 5 lety +31

      How many jobs you got so far??? I will do the same trained by Mosh

    • @i-am-oi
      @i-am-oi Před 5 lety +10

      Please Mosh kindly help:
      I am writing a code that finds logical difference between two numbers and then print out the even numbers between the two numbers
      const myFunction = (x, y) => {
      // Code here
      if (x > y) {
      return (x%2 == 0)
      }
      else {
      return ('This is an Odd number')
      }
      }
      console.log(myFunction(10,2));

    • @taylorbangg22
      @taylorbangg22 Před 5 lety +3

      @@i-am-oi a little confused by the prompt.... 'finds the logical difference between two numbers', and 'print out the even numbers between the two numbers'.... clarify a little bit, and I should be able to help.

  • @robertn4996
    @robertn4996 Před rokem +146

    I did struggle a lot to learn React. A lot of time that I wasted.
    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.

  • @idonthaveaname784
    @idonthaveaname784 Před 2 lety +660

    2 years ago when I started to learn web development, I randomly came to this React Tutorial and back then I've doubted myself if I can get a job in software development. I almost quit this web development tutorial stuff but then I still believed in myself and now I am a React Developer and Tech lead in my team. thanks mosh!

    • @shohjaxonkomilov5201
      @shohjaxonkomilov5201 Před 2 lety +9

      wow bro i really wanna be like you

    • @speedfastman
      @speedfastman Před 2 lety +16

      @@shohjaxonkomilov5201 Just believe in yourself!!!!!!!!!!!!

    • @shohjaxonkomilov5201
      @shohjaxonkomilov5201 Před 2 lety +3

      @speedfastman thank youu

    • @swagatalakshmipal7711
      @swagatalakshmipal7711 Před 2 lety +8

      I am in the same path as your early days that is tensed self doubt. But inspired from your words. Hope this tutorial work for me,😊

    • @learntry9074
      @learntry9074 Před 2 lety +9

      @@swagatalakshmipal7711 I am turning 40 in few months :) .. you try to learn or not but the truth is you are always learning something , the question is that the something is what you wanted or its coming to you without your knowledge. And I think, whoever can answer this question can learn many many things irrespective of all barriers/ hurdles

  • @Dherlandsson
    @Dherlandsson Před 2 lety +496

    43:12 If you, like me, installed the latest version of bootstrap (v5 at the time of writing this) the "badge-primary" won't work. In bootstrap v5 it's changed to "bg-primary" and "bg-secondary" etc instead, so try className="badge bg-primary m-2" for it to function correctly!

    • @nilmour
      @nilmour Před 2 lety +6

      upvote. wasted close to 45 mins to find out where I did wrong then I saw I installed latest bootstrap which is v5.0.

    • @abhishekr5910
      @abhishekr5910 Před 2 lety +5

      Thank you @Davve1001

    • @ayoubrais5534
      @ayoubrais5534 Před 2 lety +7

      Aswell for the "badge-pill" , you can use "rounded-pill" instead !

    • @Mackenzie865
      @Mackenzie865 Před 2 lety +2

      Wow, such a great help! I was super confused as to what I did wrong. Thanks!

    • @joeasian2
      @joeasian2 Před 2 lety +6

      Thank you! Almost wasted a ton of time with this until I happened to see your comment.

  • @lukaszp7827
    @lukaszp7827 Před 4 lety +369

    W10 update for VSC 1.38.1
    8:30 : file -> preferences -> settings -> text editor -> formatting : format on save

  • @murugappanm9883
    @murugappanm9883 Před 3 lety +112

    This guy explains react better than the documentations. we are blessed to be living in the age of internet.

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 Před 3 lety +2

      Yes, online learning is the way to go these days, especially for coders! Are you a student or working currently? Would you be interested in job opportunities in software development roles?

    • @gopikannan7053
      @gopikannan7053 Před 3 lety

      Yeah it helps a lot.

    • @gopikannan7053
      @gopikannan7053 Před 3 lety

      @@shivanigaddagimath6105 do you have any job to offer?

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 Před 3 lety

      @@gopikannan7053 yes, we are a web development company and are looking for developers.

    • @logeshwarans9956
      @logeshwarans9956 Před 3 lety

      @@shivanigaddagimath6105 Any Internships available for college students?

  • @shaddygimmz948
    @shaddygimmz948 Před 3 lety +39

    I had to pause the video to share my thoughts. It's just unbelievable how he explains everything so simply yet so effectively. I was looking for a perfect react video to get me started and I just landed on one..Thanks Mosh

  • @fahimimtiaz4532
    @fahimimtiaz4532 Před 2 lety +8

    The comment section of this video is so helpful. Really good to see so many people willing to help out someone else so that they don't go through the trouble they went through

  • @simplesimon2960
    @simplesimon2960 Před 3 lety +58

    This is the fourth React app I've built from a tutorial but the first one where I was actually able to understand what was going on because of how it was all explained in detail. Really excellent style of teaching and much appreciated!

  • @imranq9241
    @imranq9241 Před 4 lety +83

    React is really elegant in the way it is designed and compiled. Kudos to the facebook team, and of course Mosh who taught us!

  • @evelynbrandonsmusicchannel9235

    My god, cannot believe that you provide this for free, really really appreciate it !!!

  • @dionemartins0212
    @dionemartins0212 Před 3 lety +12

    Got an internship interview and they asked that I made a React site in 2 weeks, to see how my code is and such. This guy literally saved me lmfao

    • @OFaruk58
      @OFaruk58 Před 3 lety +4

      O shit man this way of interview would be really relaxed never seen before.

  • @luisr1421
    @luisr1421 Před 5 lety +17

    Dude, I've literally watched 100 videos on this and nothing clicked until I saw this. I LOVE YOU MOSH!

  • @adeoke3086
    @adeoke3086 Před 3 lety +5

    I’ve not even finished watching the video and already you have mastered how to give me a fluffy feeling that it’s gonna be interesting and fun. I think I’ll enjoy this.

  • @angyloh
    @angyloh Před 2 lety +1

    Hadn't taken a course with you this is amazing the clear way you explain all the concepts. Amazing content, thanks for it!

  • @smiling_assasin
    @smiling_assasin Před 11 měsíci +5

    I appreciate how mosh makes things looks so much easier with great examples, and doesn't skip concepts like many other youtubers ... ❤️

    • @tiagobordin6580
      @tiagobordin6580 Před 7 měsíci

      Totally agree, the same way a great athlete makes hard things look easy to do, a great teacher makes coding looks easy too, even coding beeing hard most of the times =)

  • @cartersteinhoff1994
    @cartersteinhoff1994 Před 5 lety +166

    Not all heroes wear capes. Thank you so much, Mosh. This was incredible.

    • @johnmadsen37
      @johnmadsen37 Před 5 lety +3

      carter steinhoff I wear a cape when I plan to expose myself in front of the Safeway.

    • @khateebanwer7466
      @khateebanwer7466 Před 5 lety +1

      we are being led by saitama

  • @vietgurlx3
    @vietgurlx3 Před 3 lety +99

    Some error fixes that might be helpful --
    1:23:25 If you get "TypeError: Cannot read property 'value' of undefined" after adding this.props.value, try removing the Counter constructor in counter.jsx
    1:40:07 If your counterId is undefined, add prop "id={counter.id}" to your Counter component in counters.jsx
    2:04:13 Change your App.js to match the other classes ie. from "function App()" to class "App extends Component" ...and add "render()" to return your React.Fragment

  • @livu69
    @livu69 Před rokem +1

    Best React tutorial on youtube. I''ve been watching Mosh tutorials for a long time ago and the conclusion is pretty clear: he's a great teacher

  • @yichenzhang1790
    @yichenzhang1790 Před 3 lety

    I've been following this tutorial from beginning to end. The best React Tutorial ever!

  • @cristiandumitriu1245
    @cristiandumitriu1245 Před 4 lety +107

    How to fix: "npm ERR! missing script: start" when trying to run.
    1. Uninstall the global version of the create-react app :
    Write in your console: uninstall -g create-react-app
    2. Delete the folder react-app (if this is the name of your react project)
    3. Recreate your new project locally
    Write in your console: npx create-react-app react-app
    4. go into your react-app folder and type
    npm start .... Have fun
    This error is happening because create-react-app is not allowed to be used globally for some time

    • @Slurbisaur
      @Slurbisaur Před 4 lety +15

      1. the line should have npm infront of it: npm uninstall -g create-react-app

    • @giladfuchs2377
      @giladfuchs2377 Před 4 lety

      @@Slurbisaur In my case I also need to delete the path..
      so I use this command
      which create-react-app | sudo xargs rm

    • @michaelhofby
      @michaelhofby Před 3 lety +2

      Thanks alot Christian! Couldnt get it to work properly

    • @a7med4973
      @a7med4973 Před 3 lety

      thank you!

    • @faisalfida9929
      @faisalfida9929 Před 3 lety

      React/Python Lover Come Here!
      Let's learn and practice together : discord.gg/vwgACw

  • @destinyjames6117
    @destinyjames6117 Před 3 lety +66

    8:40
    On windows, go to file -> Preferences -> Settings
    Edit: Then, at the search bar at the top, search for "format on save".
    Tick the small box to enable it :)
    Then, at setting, search for "Default format"
    At "Editor: Default formater", select from null to prettier-vscode for it to work :)

    • @joandianamilton1074
      @joandianamilton1074 Před 3 lety

      How to create react app on windows?

    • @destinyjames6117
      @destinyjames6117 Před 3 lety

      @@joandianamilton1074 I'm using node.js to use npm, and then from npm install create-react-package, and then go to directory i want to create react package from node.js command prompt, type create-react-app my-react-app-title

    • @joandianamilton1074
      @joandianamilton1074 Před 3 lety

      @@destinyjames6117 if I type npx create-react-app my-app, it's throwing a error saying
      Error: EPERM: operation not permitted, mkdir 'C:\Users\joan'
      Command not found: create-react-app

    • @destinyjames6117
      @destinyjames6117 Před 3 lety +1

      @@joandianamilton1074 Try "npm i -g create-react-app"
      This will install create-react-app for use
      If not, try this:
      "npm i create-react-app"

    • @joandianamilton1074
      @joandianamilton1074 Před 3 lety

      Thank you so much James😍

  • @elhafedelyazidi4681
    @elhafedelyazidi4681 Před 3 lety +1

    you are good at explaining reactjs i've been watching this tutorial for an hour now and i didn't feel the time passing

  • @toggles4565
    @toggles4565 Před 2 lety +1

    This was an amazing tutorial that was super helpful! Thank you so much for putting together such a quality educational resource. Even without extensive JS experience, I was able to understand what you were talking about and put together something exciting.

  • @tolvajkergetok
    @tolvajkergetok Před 4 lety +587

    Mosh is by far the most awesome tutor on the entire net. I already took two of his Angular courses and it landed me in a pretty good job. For added difficulty I had concentration difficulties at the time due to serious trauma, so bad I literally couldn't read a page in one sitting. I genuinely felt that I can't carry on with my profession, but Mosh gave it all back to me. Now I'm switching to React, and he's still the only one who can flawlessly explain the entire mess. We have to come up with some super fancy award for this guy.

    • @tkssharma
      @tkssharma Před 3 lety

      Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
      Here is the playlist for React JS
      czcams.com/video/ZWqfADc-0K8/video.html

    • @yayz_
      @yayz_ Před 3 lety +17

      Man I just went through some serious stuff in life last year and this year I can barely focus or read.. I never thought it could be trauma related, I just thought it was normal stress but no matter how many breaks I take and try to go back it's still hard. It literally sucks the life out of you not being able to concentrate and retain information it's like my vision is zoomed in and I can't see the bigger picture. It always leads to frustration in the end. I'm watching this video wondering how far I'll be able to get into it before I lose focus and so far so good I'm glad I read your comment I hope this works for me.

    • @Aman-lv2sz
      @Aman-lv2sz Před 3 lety +4

      @@yayz_ More power to you. Everyone gets out of their problems. Good luck man

    • @dragonballsuper1519
      @dragonballsuper1519 Před 3 lety +11

      @@yayz_ sometimes having a foggy mind could be due to a lack of important vitamins like Vitamin D. Start taking that along with a glass of pomegranate juice every day, because the latter is great for the mind, especially the memory part of your brain.

    • @yayz_
      @yayz_ Před 3 lety +4

      @@dragonballsuper1519 Thanks for the advice, I will definitely try that out !

  • @Forlloma
    @Forlloma Před 5 lety +12

    The guy is good. Clear. Teaching qualities you've got. And you are smart. Don't change am following

    • @tkssharma
      @tkssharma Před 3 lety +1

      Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
      Here is the playlist for React JS
      czcams.com/video/ZWqfADc-0K8/video.html

  • @niketbahety2009
    @niketbahety2009 Před 2 lety +62

    Some tips from my side where you could face some issues-
    1. If you are watching this tutorial after April 2022 you should use react version 17 because version 18 is fairly new and it would be difficult to follow the tutorial.
    2. Components names in react should always start from capital letters.

  • @andrewz100
    @andrewz100 Před 2 lety +28

    If anyone is having trouble installing and using create-react-app (because the one he is using is very outdated), here are the commands to install the latest version and create a new application:
    npm init
    npm install create-react-app (don't use -g)
    npx create-react-app react-app
    cd react-app
    npm start

  • @swetabjahazra8050
    @swetabjahazra8050 Před 4 lety +46

    This is probably the best tutorial on React available on YT

    • @mohammedlaslaa9549
      @mohammedlaslaa9549 Před 4 lety +1

      Is this video sufficient to beggining to learn react or i should to follow the full course of 10 hours ?

    • @omar_mtl
      @omar_mtl Před 4 lety +1

      Mohammed Laslaa take the 10 hours course, and then start building a project and then come back here if you are stuck.

    • @guitarman813
      @guitarman813 Před 4 lety +4

      @@mohammedlaslaa9549 This is a good introduction and overview to React. Especially if you're like me and have never used it before. However, it's a crash course and so does not go heavily in-depth. I recommend to take this crash course first to get a feel for React and how it works. As well as its capabilities. But then do the full course afterwards to fill in the gaps missed in this crash course. Another good course to look at is the 5-hour course on freecodecamp. :-)

    • @mohammedlaslaa9549
      @mohammedlaslaa9549 Před 4 lety

      Thanks 😊

  • @caroldanvers265
    @caroldanvers265 Před 5 lety +22

    This is an awesome course. You made it seem so easy to understand.

  • @amaliabryant7341
    @amaliabryant7341 Před 3 lety +24

    Thank you so much for this course. I was trying to learn React through an online course but was getting so confused. Your style is very easy to follow and I have gained a stronger grasp on the material.

    • @rishabhchopra883
      @rishabhchopra883 Před 2 lety +1

      I know the basics of JS , OOP in JS and ES6 hacks. I was wondering whether a full fledged react course with projects would be suitable or learning react through this video and then search for projects would be ideal. Can someone give me a feedback ?

    • @darshandev1754
      @darshandev1754 Před 2 lety +1

      @@rishabhchopra883 I think this video is enough and going on your own and doing projects is the best way if you are comfortable with it, since it forces you to think
      however that depends on how comfortable you are with the prerequisites to react
      so if you are just starting out courses might serve quite well
      and his teaching style is so good, I might give them a try myself

    • @ak332
      @ak332 Před 2 lety +1

      @@darshandev1754 hey bro do you have any idea about mosh's java course. are they worth money?

    • @darshandev1754
      @darshandev1754 Před 2 lety

      @@ak332 sorry I haven't tried them so can't say about it

    • @sanyamjain4777
      @sanyamjain4777 Před 2 lety

      @@darshandev1754 hey is this course updated? Because in his website it says its updated in jan 2020 so should i buy this course??

  • @jonasking3670
    @jonasking3670 Před 2 lety +13

    8:55 in version 1.59.0 of VS Code you go to Settings, then to Text Editor, then to Formatting and then click "Format on Save".

    • @aldin3994
      @aldin3994 Před 2 lety

      You deserve more likes!

    • @jvyas6998
      @jvyas6998 Před 2 lety

      Thank you so much, was struggling with this since 15 minutes!

  • @e4r281
    @e4r281 Před 5 lety +18

    High quality content as usual. Thanks for sharing.

  • @thefthesm
    @thefthesm Před 4 lety +256

    TABLE OF CONTENT
    00:00 Introduction
    01:14 What is React
    05:48 Setting Up the Development Environment
    09:27 Your First React App
    16:03 Hello World
    22:26 Components
    24:06 Setting Up the Project
    26:15 Your First React Component
    31:38 Specifying Children
    35:56 Embedding Expressions
    40:49 Setting Attributes
    46:36 Rendering Classes Dynamically
    50:57 Rendering Lists
    54:58 Conditional Rendering
    1:01:04 Handling Events
    1:03:56 Binding Event Handlers
    1:08:34 Updating the State
    1:10:51 What Happens When State Changes
    1:12:58 Passing Event Arguments
    1:17:31 Composing Components
    1:21:18 Passing Data to Components
    1:24:31 Passing Children
    1:27:44 Debugging React Apps
    1:31:55 Props vs State
    1:34:22 Raising and Handling Events
    1:39:16 Updating the State
    1:43:57 Single Source of Truth
    1:47:55 Removing the Local State
    1:54:44 Multiple Components in Sync
    2:00:39 Lifting the State Up
    2:06:18 Stateless Functional Components
    2:08:49 Destructuring Arguments
    2:10:52 Lifecycle Hooks
    2:12:32 Mounting Phase
    2:18:09 Updating Phase
    2:22:31 Unmounting Phase

  • @Webtricker
    @Webtricker Před 2 lety +1

    Thank you so much for explaining React JS to newcomers in such a simple and beautiful way. This tutorial is very useful for beginners.

  • @HookPhire
    @HookPhire Před 6 měsíci

    I'm so glad I found you, these tutorials are actually soooo good, and I'm actually learning rather than just copying. Thanks Mosh!

  • @AshrafulIslam-pm2mw
    @AshrafulIslam-pm2mw Před 5 lety +10

    At last the long awaited course 🙂
    Thanks Mosh
    Your courses are always extra ordinary.

  • @9607ankit
    @9607ankit Před 4 lety +36

    I really liked your Tutorial, Specially the way you cover every single details, like your keyboard shortcut keys, why you don't mentioned curly brace while importing React (As it is a default export) and why you install extensions and how to its work!
    Good Job Man!

    • @tkssharma
      @tkssharma Před 3 lety +1

      Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
      Here is the playlist for React JS
      czcams.com/video/ZWqfADc-0K8/video.html

    • @singhaditya3295
      @singhaditya3295 Před 3 lety +1

      yes I liked the way to describe the things in very detailed manner

    • @faisalfida9929
      @faisalfida9929 Před 3 lety +1

      React/Python Lover Come Here!
      Let's learn and practice together : discord.gg/vwgACw

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 Před 3 lety

      Hi Ankit! Are you looking our for job opportunities in software development currently? Please let me know if you are.

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 Před 3 lety

      @@singhaditya3295 Hi Aditya! Are you studying or working currently? Would you be interested in internships/jobs in software development?

  • @apps0319
    @apps0319 Před 3 lety

    Dude your so smart man, you literally know everything and also having watched your videos, I have learnt so much in such a less time. Thank you so much Mosh❤️

  • @pujadey355
    @pujadey355 Před 4 měsíci +1

    How can you be so good??? Like literally with such a good explanation and clarity. U made this so simple. Thanks mosh

  • @Nafana
    @Nafana Před 5 lety +12

    Great course! Did this with the most up to date node packages and used Bulma instead of Bootstrap and everything worked perfectly. So as of 2018-08-29 everything in the tutorial is up to date with the most current versions.

    • @rohitmalakar
      @rohitmalakar Před 5 lety

      Style worked after adding this code in my index.js import "bootstrap/dist/css/bootstrap.css";

  • @farbodjamali
    @farbodjamali Před 5 lety +15

    I have passed many courses learning react and this one is the best with High-quality contents. Thank you, Mr. Mosh "Dastet dard nakone"

    • @mohammedlaslaa9549
      @mohammedlaslaa9549 Před 4 lety

      Is this video sufficient to beggining to learn react or i should to follow the full course of 10 hours ?

  • @itishdhiman3987
    @itishdhiman3987 Před 3 lety +11

    I was going through the React course on Udemy and honestly I found it quite fast paced and I couldn't follow it properly. Now after watching this Tutorial, I have much more clarity on these concepts. Amazing the way you explain things!

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 Před 3 lety

      Hi Itish! Are you a student or working currently? Would you be interested in software development roles?

    • @sanyamjain4777
      @sanyamjain4777 Před 2 lety

      Hey have you taken this course? If yes is it updated or old i . Asking because on the website it says that its last updated in 2020 jan so should i purchase it or not?

  • @shlee4210
    @shlee4210 Před 2 lety +1

    Thank you - as always!! You're saving this novice dev EVERY SINGLE DAY.

  • @mcan543
    @mcan543 Před 4 lety +41

    #keyTakeAways
    39:00 A new syntax for me --> Gets count property of state and assigns it to new count constant.
    44:22 Applying your own styles in jsx
    47:22 Conditional styling
    51:51 Cant use loops in jsx elements. Use map(), filter() functions
    56:00 Two ways of conditional rendering
    1:06:30 Changing state variable arrow functions and setState()
    1:11:13 To pass an element to onClick event don't use an explicit intermediate handler function. Use this intermediate function inside the onClick()
    1:26:41 render variables in html in components

    • @MrJeffersonDias
      @MrJeffersonDias Před rokem +7

      I am getting an error "product' is noy defined after doing that change

  • @lukeschofield4213
    @lukeschofield4213 Před 5 lety +22

    Mosh, you're a diamond at helping me catch up when i need to. Never stop, sensai!

  • @squeezy99
    @squeezy99 Před rokem

    Thanks Mosh - a clear and productive video which I followed diligently and created my first React app. I've enrolled in the course - looking forward to getting started.

  • @odedejikehinde6514
    @odedejikehinde6514 Před rokem

    Wow! Mosh! i'm just two minute and few seconds into your react crash course and I'm already giving a big shout out to the best react instructor ever on youtube.
    #CALEB from Lagos,Nigeria.

  • @migueldomingos4570
    @migueldomingos4570 Před 4 lety +10

    This course is amazing and you are an awesome teacher!😍Congrats:)

  • @HotChilli99
    @HotChilli99 Před 4 lety +15

    Brilliant tutorial. I've done a couple of different React tutorials, and this is by far the best I have come across. I wasn't expecting that considering all of the other tutorials I have seen so far have been on paid subscriptions! Thank you very much, I feel like I have a decent understanding of React now, enough to get me going on a project!

    • @jesseguerrero8203
      @jesseguerrero8203 Před 4 lety

      is it better than the freecodecamp React Native tutorial on CZcams?

    • @sayandeepghosh2911
      @sayandeepghosh2911 Před 4 lety +2

      @@jesseguerrero8203 yeah much better....i have done both

  • @freedtmg16
    @freedtmg16 Před 2 lety

    I came here to get my feet wet with react thinking I knew JS and I am just blown away by the amount of stuff I've picked up about writing JS expressions and I'm not even half way though! my mind is melting. Thanks Mosh!

  • @buddimalliyanapathirana1767

    Despite this tutorial being outdated by 4 years , it's still one of the best React tutorials out there

    • @pranavrao6370
      @pranavrao6370 Před rokem +1

      How much has changed? I never used React before. Does it still use classes with state and render methods?

    • @Johnsonwingus
      @Johnsonwingus Před rokem +1

      @@pranavrao6370 I see one difference now, with the introduction of Hooks the whole app is contained within a function instead of a class.

  • @webmaster168
    @webmaster168 Před 3 lety +4

    Bro I love you. Thats what Ive been searching for the last hours

  • @Lokk09
    @Lokk09 Před 3 lety +17

    1:53:52 in handleIncrement(counter) you can simply update the value of counter directly since it is a pointer to the counter in the state, then just setState(counters)
    handleIncrement = (counter) => {
    counter.value++;
    const counters = this.state.counters;
    this.setState({ counters});
    };

    • @abdulhayan2378
      @abdulhayan2378 Před 2 lety +2

      thanks, I couldn't understand his code at that point, therefor I came into the comment section with the idea that may somebody have easy code and found you

  • @bhavyakukkar
    @bhavyakukkar Před rokem +1

    watched the tutorial without practicing, and it was so amazing, finally decided to begin practically at around halfway, ran into various problems trying to run the old react/bootstrap versions from this tutorial (react 1.5.2 and bootstrap 3 or 4, I think?) and used the latest (as of this comment) versions instead (react 18.2.0 and bootstrap 5). ran into some inconsistencies, but after fixing those problems, I am back on track!
    the tutorial is very well done in such a way that if I run into problems due to the version differences, I still have an idea on how to go about fixing it. Thank you!

  • @evan_n6136
    @evan_n6136 Před 3 lety +1

    this was such an awesome tutorial. react was a blocker i frequently had working on my projects. i reviewed the video twice, just watching, not "copying" into my own project and then took on a new project and knocked the front end out within an hour. thank you sir, excellent tutorial.

    • @alenjose3903
      @alenjose3903 Před 3 lety

      did u use his version of create-react-app or just used npx to make the app?

    • @evan_n6136
      @evan_n6136 Před 3 lety

      @@alenjose3903 npx

  • @reenagarg7996
    @reenagarg7996 Před 4 lety +9

    You are just great Mosh! Whenever i have to learn something i directly go to your tutorials. You are all-rounder guy. Your tutorials are just awesome and your way of teaching is just incredible!!! In the video of approx 2hrs i can get my half of the things done about that particular topic. These 2hrs videos are equal to many books or i would say there is no one like you.
    So thank you so much for all of this knowledge!!
    Keep going ahead and keep sharing your knowledge like this!!

    • @faisalfida9929
      @faisalfida9929 Před 3 lety

      React/Python Lover Come Here!
      Let's learn and practice together : discord.gg/vwgACw

  • @MikayilAbdullayev
    @MikayilAbdullayev Před 5 lety +4

    Man, you're doing a really good job. And I really like the way you each time pronounce "Save the changeeeeees".

  • @PavanSibal
    @PavanSibal Před 3 lety +1

    Another masterpiece tutorial!!! Thanks Mosh.

  • @khasmeenusman3931
    @khasmeenusman3931 Před 3 lety +2

    None man in this world can teach the way this man does. The best teacher i have ever seen in my entire life of web programming.

  • @DivyeshHarit
    @DivyeshHarit Před 5 lety +4

    Absolutely brilliant. Clear, concise, and to the point. Just purchased your Mastering React course. Hope to learn a lot! Keep up the amazing work!

  • @aarcheeecya
    @aarcheeecya Před 4 lety +12

    Wow, I love Mosh, he is one amazing teacher, i have learned Angular 60ish minute video(2 years ago and that helped me to become an Angular js expert now).
    Have learned Modern JS concepts and amazing React Hands on introduction from him. Such a great work Mosh! And such a big help to dev like us. Thank You So much :)

  • @tatumtots6704
    @tatumtots6704 Před 3 lety

    I supplement your videos along with my bootcamp course, just have to say you're AWESOME!

  • @jennaadams3899
    @jennaadams3899 Před 3 lety +2

    First port of call for anything programming related is a tutorial by Mosh. This tutorial could be updated though - as I found a few issues but managed to sort it out with a struggle.

  • @crabsynth3480
    @crabsynth3480 Před 5 lety +18

    Fantastic library, cool ide and Amazing tutorial ! Thanks for such an in depth video... i will definitely consider getting the full version once my brain finishes processing this one. Kudos !

    • @its_maalik
      @its_maalik Před 5 lety

      @@programmingwithmosh will buy the course anyways :)

  • @muhammadadil4885
    @muhammadadil4885 Před 3 lety +9

    Thank you Mosh!
    This is the best React Tutorial I have came across. so simple yet cleared all the necessary concepts.

  • @guohuadiaz2546
    @guohuadiaz2546 Před rokem

    Before I finish watching this video I have to write a comment for you !!!! You make my learning full stack development journey so much fun and easy. Thanks Mosh!!!!!

  • @chingizpro
    @chingizpro Před 3 lety

    Thank you very much for helping us learn the basics of React very easily and comfortably!

  • @iamankitmaheshwari
    @iamankitmaheshwari Před 3 lety +3

    Best course on React! Go ahead and finish it.
    Mosh is one of the best trainer on YT!! Thanks

  • @ThaOrangeBlues
    @ThaOrangeBlues Před 5 lety +179

    at 1:15:59, when you typed () => this.handleIncrement(product) --> gave me undefined and didn't work. I got it to work with product => this.handleIncrement(product) which solved the problem.
    and this is the function:
    handleIncrement = product => {
    this.setState({ count: this.state.count + 1 });
    };
    so I don't know if did anything wrong before that, that I got undefined for the prodcut parameter passed to the function

  • @shqnz
    @shqnz Před rokem +1

    Followed along with documentation.. It took me around 10 hours to complete this video.. But finally I did it... I really recommend beginners to watch this. Shared you video in all of my whatsapp groups. Thanks Mosh Hamedani😍😚

  • @andrewdolan4261
    @andrewdolan4261 Před rokem +2

    Love your videos Mosh. They are so easy to understand. Well done

  • @hemasaiprakashchowta8612
    @hemasaiprakashchowta8612 Před 5 lety +9

    The absolute worth of every minute Mosh!!! It takes you to the beginner level to Intermediate level. Thanks a lot for the course... Keep up the good work...

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 Před 3 lety

      Hey! Are you working currently? Are you looking for jobs in software development roles?

  • @naztronaut
    @naztronaut Před 4 lety +3

    Great video, Mosh! Wish I found your courses years ago. This was very well organized so I'll be buying the whole course to add React to my resume :)

  • @LucasSantos-wp7ji
    @LucasSantos-wp7ji Před 2 lety +3

    This class is exceptional! Wish I could learn every technology like this. Thank you very much!

  • @SuperAvalonn
    @SuperAvalonn Před rokem +2

    This is one of the best tutorials that I've seen. Easy to understand and indepth explanation, overall interesting to watch. Thank you for sharing your knowledge 🙌

  • @enderksenobojca3775
    @enderksenobojca3775 Před 4 lety +11

    I have to admit that I did train a lot of people in programming. As an IT architect I had to learn a lot of new technologies and pass it to other people in my day to day work. The way how you teach is very good; balanced. You explain all concepts clearly at the same time avoiding throwing too much on the listener. It’s a hard Art to master. Respect.

  • @ExploringWorld100
    @ExploringWorld100 Před 4 lety +12

    Appreciated the highly recommend React.js video. I was searching lots of react.js video on CZcams getting the pure clean concept but I din't. Finally from this video I gained every information about react that helps to me learning real React.js concept. Thanks a lot for such an excellent video. This react tutorial is ever best among all other. I am watching from Frankfurt university of applied sciences, Frankfurt, Germany.

    • @tkssharma
      @tkssharma Před 3 lety +1

      Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
      Here is the playlist for React JS
      czcams.com/video/ZWqfADc-0K8/video.html

    • @faisalfida9929
      @faisalfida9929 Před 3 lety

      React/Python Lover Come Here!
      Let's learn and practice together : discord.gg/vwgACw

  • @mayurd23
    @mayurd23 Před rokem +1

    Brilliant course. Thank you for this course Mosh. Not only did you explain the concepts precisely, but with the practical it was total learning with hands on.

  • @patrickhu8197
    @patrickhu8197 Před 2 lety

    this tutorial was much better than others I've used on the internet, thank you

  • @mishabruml
    @mishabruml Před 5 lety +44

    good tutorial, but for anyone trying to follow and code along this is easy to miss: at 1:27:30 you say "we are going to delete the code that we wrote in this lecture" and delete the console log statement and child element of counter, but NOT the bit you also wrote where you assign the id property in props to counter.id. ( id={counter.id} ). this is really important to leave in as it will be referenced as the event argument of the delete button event handler

    • @chrisyang3130
      @chrisyang3130 Před 5 lety +5

      man you are the boss! I backtracked 3 times to see what went wrong before finding this comment! :D

    • @FromAtoO
      @FromAtoO Před 5 lety +3

      You just made my day!

    • @mathieuclerte5252
      @mathieuclerte5252 Před 5 lety +3

      Yeah what a pain, he says at a point in time that id is a special attribute, but nowhere states that it should be declared explicitely in Counters.render() ... so I ended up having to write:
      that's sooo odd and verbose....

    • @sumeetwork
      @sumeetwork Před 5 lety +1

      Thank you soo much for this... couldn't find what a I doing wrong.

    • @msg2clash
      @msg2clash Před 5 lety +2

      well spotted mishabruml, - now it's working...

  • @dudebroepicgamer4847
    @dudebroepicgamer4847 Před 4 lety +86

    Fantastic tutorial. Thank you for this.
    Also... Drinking game: take a shot every time he says "save the changes."

    • @apgnisehs3536
      @apgnisehs3536 Před 4 lety +11

      or every time he says "beautiful"

    • @twisterrjl
      @twisterrjl Před 4 lety +4

      or just type: true && "hi" and you get hi
      Ba-dum-tss!

    • @choi-r7108
      @choi-r7108 Před 4 lety +9

      "Back to the browser"

    • @guitarman813
      @guitarman813 Před 3 lety +2

      "Lemme show you..."

    • @genie365
      @genie365 Před 3 lety

      Thank you, you have helped me hit the Ballmer Peak.

  • @leochuks1
    @leochuks1 Před rokem +3

    I recently switched my career from Data Analysis/Science to Full stack web development. As a result, I needed to learn React JS, I have looked up a lot of online videos on this topic, although they were helpful, but I must confess this course by Mosh is second to none. You deserve an award! God bless you if you believe.

    • @sneharamar9664
      @sneharamar9664 Před rokem

      Hello Leonard,
      May I know how did you switched career to Web development since the experience is on other domain?

  • @elinordeniz
    @elinordeniz Před rokem +4

    on 20:00
    import ReactDOM from 'react-dom';
    root.render(element)
    those had been removed from version 18, instead you will use below
    import {createRoot} from 'react-dom/client'
    const root=createRoot(document.getElementById('root'))
    root.render(element)

  • @amardeepagrawal6188
    @amardeepagrawal6188 Před 3 lety +9

    I can say now, Learning react was fun and made super easy by you. Thank you for teaching us !

    • @sit73shekhargite55
      @sit73shekhargite55 Před 3 lety

      czcams.com/video/6lB7f6nNS6U/video.html..

    • @shivanigaddagimath6105
      @shivanigaddagimath6105 Před 3 lety

      Hi Amardeep! Are you studying or working currently? Would you be interested in opportunities for software developer roles?

  • @ryanfranklin8340
    @ryanfranklin8340 Před 5 lety +3

    Dude! Solid training. The best I've seen. Highly recommend.

  • @mac19999x
    @mac19999x Před 3 lety

    Im working with C#, learned a few things few years back from you. Now i need to make the next step, Angular or React. Was kinda scared looking for new tutorials, what if they dont use VS Code? Then i saw this, and few minutes in i saw VS Code. Thanks again man, this is jackpot.

  • @vule9193
    @vule9193 Před 2 lety

    the best teacher I’ve ever known. I wish I should have given all my student tuition to him instead of my college.

  • @krantinebhwani6125
    @krantinebhwani6125 Před 5 lety +4

    Guys he updated his full course, there's even more awesomeness in it I strongly recommend it :) The best thing about the course is I didn't only get much better at react, but also lot of great programming techniques, shortcuts, and thinking about how to put together an app.
    To mosh - thanks a lot for updating the course man, and upping my programming knowledge in general. I'm on a subscription even though I originally just needed the react course in to support you. But after I cover the rest of your updates to the react course I will start looking at the other ones I'm interested in too since i got your subscription anyway :P

    • @krantinebhwani6125
      @krantinebhwani6125 Před 5 lety

      Thanks that's fine, I reworded a little to make it more clear for other people reading lol. I just wanted to notify others that your course is EVEN better now and how much i gained from it beyond learning react.

  • @donato_RH
    @donato_RH Před 4 lety +21

    following this course was more exciting than a thriller. Never seen such clarity!

    • @LeoMaverick
      @LeoMaverick Před 4 lety

      I got you..

    • @Kayne1b
      @Kayne1b Před 4 lety

      I thought it was helpful, but I wish he hadn't back-tracked so much. If this had been my very first introduction to React, I think I would have been quite confused each time he does something just to undo it, or to do it a different way.

    • @tkssharma
      @tkssharma Před 3 lety

      Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
      Here is the playlist for React JS
      czcams.com/video/ZWqfADc-0K8/video.html

  • @abhishaiwinston9794
    @abhishaiwinston9794 Před 3 lety +1

    The most lucid, easy to understand react tutorial on CZcams, thanks man!

  • @noorb374
    @noorb374 Před rokem +6

    hi mosh, your way of teaching is amazing... plz make a new tutorial on react again, because a lot new features have released now ...like use memo hooks, use callbacks etc

  • @pranavvij
    @pranavvij Před 4 lety +10

    Brilliant brilliant tutorial. The tips in between are priceless!

    • @tkssharma
      @tkssharma Před 3 lety

      Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
      Here is the playlist for React JS
      czcams.com/video/ZWqfADc-0K8/video.html

  • @mikkeljrgensen3850
    @mikkeljrgensen3850 Před 5 lety +34

    43:38

    • @mikkeljrgensen3850
      @mikkeljrgensen3850 Před 5 lety +4

      @@programmingwithmosh I'm not much of a SoMe person (youtube only), but I will guarantee you a slot on the "recommended" tab of my site and I will, of course, recommend you to anyone with whom I discuss coding and tutorials in the future :)
      Update: After a bit of consideration, I've decided to buy the entire course. That's a definite first for me as I'm the most stingy man alive. It's well worth it and at a very favourable price; good quality deserves recognition.

  • @prawnydagrate
    @prawnydagrate Před 3 lety +4

    This is by far the easiest JS tutorial I've ever watched.

  • @suryac850
    @suryac850 Před 2 lety

    Amazing course. Thank you Mosh for putting this up on YT.

  • @maliklarsen
    @maliklarsen Před 5 lety +4

    Thank you Mosh. You are my hero. I Love your tutorials. I plan to by more of your courses, I like the way when you describe and explain everything in your tutorials, you are the best. I'm a big fan of your teaching. keep the good work. I learned more from you than from my 6 and a half at university. Thank you, again.

  • @rhoadie
    @rhoadie Před 4 lety +3

    I'm not a developer, just started with Mosh Javascript Basics course, I've learned some angular and now I'm learning React and Next js. Thanks Mosh! you made programming really easy to understand for me!!

  • @shitayama9744
    @shitayama9744 Před 2 lety

    You make programming an easy thing that even art students like me can understand. Thank you❤!