• Sunday , 24 May 2020

React Tutorial – Learn React – React Crash Course [2019]

Code Canyon



React Tutorial with Examples – Learn React from scratch with this React Crash Course 2019.
🔥Get the COMPLETE React Course: http://programmingwithmosh.com/courses/react
🔥Subscribe for more videos like this: https://goo.gl/6PYaGF

Want to learn more from me? Check out my blog and courses:

http://programmingwithmosh.com
https://www.facebook.com/programmingwithmosh/

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

Original source

3d Ocean

Related Posts

47 Comments

  1. N N
    December 25, 2019 at 08:18

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

  2. Karthick Gopikrishnan
    December 25, 2019 at 08:18

    Nice and easy to follow. Thanks Mosh.
    I am stuck at 1:39:56 where Mosh is asking to pass the counterId to OnDelete event handler. I get an error when I click on Delete button says: counter.jsx:23 Uncaught TypeError: this.props.OnDelete is not a function.

    Anybody any help? Suggestions??

  3. Tamanna Lekhwani
    December 25, 2019 at 08:18

    My app.js doesnt have a class. It looks like a function App(). Could you let me know why is that?

  4. CONFEARSION
    December 25, 2019 at 08:18

    Ctrl + Shift + i on windows

  5. Saad Khaleeq
    December 25, 2019 at 08:18

    I'm 13 years old. Is this possible for me to learn React & Nodejs?

  6. Austin Charles Serio
    December 25, 2019 at 08:18

    Wanted to clarify an issue with create-react-app and npm start. At this time, the method of installing create-react-app is no longer supported as this tutorial uses the older global installation method. The documentation says "If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version" – https://create-react-app.dev/docs/getting-started. If you are having trouble, run the uninstall command, and make your react app using "npx create-react-app my-app". Then. cd to the directory as explained in the guide and npm start will work as expected.

  7. The Otaku Gamer
    December 25, 2019 at 08:18

    i have a problem when using the comman npm start ,they tell me that the script start is missing, any solutions please.

  8. GI HYUN NAM
    December 25, 2019 at 08:18

    This video explains way better than any other book that I’ve read and tried to follow them just typing their codes, which I did not get any of it. I more thank you for your contribution to beginners like me!

  9. Ari Ze
    December 25, 2019 at 08:18

    Thx

  10. Dragutin Cvetkovic
    December 25, 2019 at 08:18

    Hey, how do you get those cool icons for various NodeJS folders and files?

  11. Weston Bridson
    December 25, 2019 at 08:18

    Can someone please help me out? I have been trying all night to find some kind of mobile app building ide that uses javascript. I landed here. Is react even for mobile apps? If it is, is there really nothing simpler? This is so confusing compared to android studio. I'd just use that, but it doesn't offer java script support. I want to learn java script and app building, so an app building ide that supports java script would be perfect, but can't seem to find one.

  12. Burneekul
    December 25, 2019 at 08:18

    when npm start
    it says npm ERR!
    start script: missing

  13. Paty Arakawa
    December 25, 2019 at 08:18

    I only saw tutorials in Spanish, but after this video, will only see tutorials in English!

  14. Paty Arakawa
    December 25, 2019 at 08:18

    Repeat 1:04:00 several times.

  15. ahmad alvi
    December 25, 2019 at 08:18

    Please upload this course on udemy

  16. Lauchlin MacGregor
    December 25, 2019 at 08:18

    One of the best tutorials I've come across. Well done.

  17. Jhay hermogenes
    December 25, 2019 at 08:18

    why I got an error? I used $sudo npm i -g create-react-app@12.13.1 please help

  18. 李奎慶
    December 25, 2019 at 08:18

    Awesome lesson! Thanks!

  19. SoCreaty
    December 25, 2019 at 08:18

    React Tutorial – Learn React – React Crash Course [2019]

    1.583.594 Aufrufe•16.07.2018
    –> I see what you did here ^^

  20. Osama Gamal
    December 25, 2019 at 08:18

    the setup configuration won't work you have to run this.
    npx create-react-app my-app

    cd my-app

    npm start

    instead of:
    npm i -g create-react-app

  21. KARAN CHANDRA
    December 25, 2019 at 08:18

    Hii Mosh!!! can i get code of this shopping cart project?

  22. Ganga Raju
    December 25, 2019 at 08:18

    mosh, after watching this video everybody could become react js developer. awesome boss

  23. Rue Elwahishi
    December 25, 2019 at 08:18

    I'm confused where do I do the create-react-app command? in what directory?

  24. Brenton Lippitt
    December 25, 2019 at 08:18

    This appears to be out of date in terms of the initial setup and installation. When I run create-react-app I get : A template was not provided. This is likely because you're using an outdated version of create-react-app.
    Please note that global installs of create-react-app are no longer supported.

  25. Jose Alberto
    December 25, 2019 at 08:18

    what does extends do?

  26. Atiq Rahman
    December 25, 2019 at 08:18

    I really like your presentation but it looks like this course is outdated. Can you please update material?

  27. midjetville
    December 25, 2019 at 08:18

    Lol, don't ever give npm (or any package manager) sudo privileges. That's a sure fire way to open yourself up to attacks or damage to your system due to developer negligence.

  28. Tim Hartwig
    December 25, 2019 at 08:18

    Great tutorial! Thank you soooo much!

  29. mostafa ١٨
    December 25, 2019 at 08:18

    mosh you are best teache kheli mamnonm azat dost man

  30. Inclined scorpio
    December 25, 2019 at 08:18

    Aahaa what I needed !!

  31. Py Data Geek
    December 25, 2019 at 08:18

    Hi Mosh, thanks for and other well before studied tutorial. Have a question, on 1:17:31 Composing Components, I don't see props. My version of react is different than yours. Do you have an explanation for it?

  32. Rajini Raja
    December 25, 2019 at 08:18

    Great and Nice tutorial video for the ReactJS Learners

  33. Hector Davila
    December 25, 2019 at 08:18

    Great tutorial but it is outdated.

  34. westfield90
    December 25, 2019 at 08:18

    Best explanation of what react is. Just about 5 minutes in and already like it this video2

  35. Vadim Tomashevsky
    December 25, 2019 at 08:18

    When I'm installing React it install app.js functional component and not a class component
    why it doesn't install a class component like in the video above?

  36. Jora Avetisyan
    December 25, 2019 at 08:18

    true && "" will return "", in your explanation its not clear that case or its wrong

  37. Zaheer Ud Din Faiz
    December 25, 2019 at 08:18

    The short cut to open Developer Tools on chrome is: "Crtl+Shift+i" on windows 😊

  38. Andy S
    December 25, 2019 at 08:18

    At the handleIncrement function here https://youtu.be/Ke90Tje7VS0?t=6868 there is no need in this line

    counters[index] = { …counter };

    because we already work with a copy of state.counters

  39. ARPIT MISHRA
    December 25, 2019 at 08:18

    A template was not provided. This is likely because you're using an outdated version of create-react-app.

    Please note that global installs of create-react-app are no longer supported.

    unable to start the react app

  40. Simas Paškauskas
    December 25, 2019 at 08:18

    if someone is having problems with npm start part – install the newest version of create-react-app. Worked for me

  41. Lin Justin
    December 25, 2019 at 08:18

    Hi there! Justin here, and when following your steps I found something working differently from your tutorial. At 1:15:42 you passed the "product" parameter into the listener, but in my code it keeps giving me error that I need to define the parameter first. This parameter was defined in the handleincrement class but the listener doesn't seem to catch it. Any ideas?

  42. roshi mon
    December 25, 2019 at 08:18

    Awesome tutorial. Very beginner friendly and in no time you learn the basic concepts. Amazing content. Thank you Mosh 👏

  43. yash bhansali
    December 25, 2019 at 08:18

    thanks mosh, this tutorial was amazzzzzzzzzing ^_^

  44. Khashayar Sean Goudarzi
    December 25, 2019 at 08:18

    Hi Mosh, I have trouble in setting up the project in "09:27 Your First React App".
    When I write what you have told us to "cd react app/" hit then enter and then type "$npm start"
    I get: the command is either way wrong written or couldn't be found.
    (I have Windows 10).

    By the way, after having installed everything in the step before, I get no error but this "A template was not provided. This is likely because you're using an outdated version of create-react-app.

    Please note that global installs of create-react-app are no longer supported."

    Will this affect my project somehow?

  45. Jean Mesa
    December 25, 2019 at 08:18

    Hey Mosh, thanks for your content I’ve been following you for some time. If I may, what VS Code theme are using? It’s quite beautiful 🙂 thanks.

  46. cav3man82
    December 25, 2019 at 08:18

    Great tutorial in that Mosh explains best practices (showing before and after) and small little things like shortcuts.

  47. Manjunath Vustepalli
    December 25, 2019 at 08:18

    hey mosh can you do a tutorial for react native?

Leave A Comment

You must be logged in to post a comment.