Learn React JS - Full Course for Beginners - Tutorial 2019

Поделиться
HTML-код
  • Опубликовано: 29 июл 2024
  • React.js is a JavaScript library for building dynamic web applications. Upon completion of this course, you'll know everything you need in order to build web applications in React. You can also try the interactive version of the course here: scrimba.com/g/glearnreact
    This comprehensive introduction to React was created by Bob Ziroll (@bobziroll). Bob is the Director of Education at V School, an award-winning school of technology education.
    🔗Tutorial Hell link mentioned in video: codeburst.io/digging-my-way-o...
    🔗Virtual DOM video mentioned: • React and the Virtual DOM
    Check top comment to see what code you have to add to get React working locally.
    ⭐️Course Contents ⭐️
    ⌨️ (0:00:00) Course Introduction & Philosophy
    ⌨️ (0:05:22) What we'll be building
    ⌨️ (0:06:24) Why React?
    ⌨️ (0:09:25) ReactDOM & JSX
    ⌨️ (0:16:19) ReactDOM & JSX Practice
    ⌨️ (0:20:34) Functional Components
    ⌨️ (0:24:32) Functional Components Practice
    ⌨️ (0:29:41) Move Components into Separate Files
    ⌨️ (0:35:07) Parent/Child Components
    ⌨️ (0:43:14) Parent/Child Component Practice
    ⌨️ (0:48:12) Todo App - Phase 1
    ⌨️ (0:50:50) Styling React with CSS Classes
    ⌨️ (0:55:56) Some Caveats
    ⌨️ (0:58:12) JSX to JavaScript and Back
    ⌨️ (1:02:11) Inline Styles with the Style Property
    ⌨️ (1:09:21) Todo App - Phase 2
    ⌨️ (1:12:42) Props Part 1 - Understanding the Concept
    ⌨️ (1:14:56) Props Part 2 - Reusable Components
    ⌨️ (1:17:29) Props in React
    ⌨️ (1:29:39) Props and Styling Practice
    ⌨️ (1:40:25) Mapping Components
    ⌨️ (1:48:27) Mapping Components Practice
    ⌨️ (1:53:44) Todo App - Phase 3
    ⌨️ (1:58:16) Class-based Components
    ⌨️ (2:03:32) Class-based Components Practice
    ⌨️ (2:07:11) State
    ⌨️ (2:12:08) State Practice
    ⌨️ (2:15:45) State Practice 2
    ⌨️ (2:19:59) Todo App - Phase 4
    ⌨️ (2:22:05) Handling Events in React
    ⌨️ (2:25:52) Todo App - Phase 5
    ⌨️ (2:27:11) Changing State
    ⌨️ (2:39:29) Todo App - Phase 6
    ⌨️ (2:47:14) Lifecycle Methods Part 1
    ⌨️ (2:56:45) Lifecycle Methods Part 2
    ⌨️ (3:00:07) Conditional Rendering
    ⌨️ (3:11:26) Conditional Rendering Part 2
    ⌨️ (3:14:21) Conditional rendering Practice
    ⌨️ (3:23:00) Todo App - Phase 7
    ⌨️ (3:25:34) Fetching data from an API
    ⌨️ (3:36:34) Forms Part 1
    ⌨️ (3:48:55) Forms Part 2
    ⌨️ (4:00:11) Forms Practice
    ⌨️ (4:24:29) Container/Component Architecture
    ⌨️ (4:35:53) Meme Generator Capstone Project
    ⌨️ (4:56:11) Writing Modern React Apps
    ⌨️ (5:02:17) Project Ideas for Practicing
    ⌨️ (5:03:06) Conclusion
    --
    Learn to code for free and get a developer job: www.freecodecamp.org
    Read hundreds of articles on programming: medium.freecodecamp.org

Комментарии • 2,2 тыс.

  • @freecodecamp
    @freecodecamp  5 лет назад +442

    To get this code working, there is a little set up not mentioned in the video.
    If you are coding on scrimba.com, click the gear icon in the top right corner and select 'add dependency...'. First add 'react', then add 'react-dom'.
    If you are building locally, you should first install create-react-app. Get it here: facebook.github.io/create-react-app/

    • @souvikkundu
      @souvikkundu 5 лет назад +1

      Thank you 👍

    • @AnaisUrlichs
      @AnaisUrlichs 5 лет назад +7

      @Elmo I have the same problem; using sublime, installed react app but not sure how to make the connection

    • @AnaisUrlichs
      @AnaisUrlichs 5 лет назад +1

      @ElmoI did not get how that works in the case of Sublime so I got Visual Studio Code and got it working- thank you tho

    • @dubfactor2002
      @dubfactor2002 5 лет назад +3

      @Elmo index.html goes in public folder

    • @chrismanuel8993
      @chrismanuel8993 5 лет назад +40

      you should have really add this to your video

  • @WhiteOwlStudios
    @WhiteOwlStudios 4 года назад +2395

    You r one of the reasons why i still believe in people.
    Just uploading this for free.
    Not even one commercial.
    Speechless.

    • @osamagamal495
      @osamagamal495 4 года назад +3

      @@supermarioemulator6487 he'll get paid anyway, It doesn't depend on us watching the Ad.

    • @eduriseworld
      @eduriseworld 4 года назад +25

      yup Freecodecamp is truly amazing it does inspire people like us. The only issue we figured out was that it's lengthy which leads a person to lose interest. But the key is to be patient and keep going.

    • @eklavyasharma
      @eklavyasharma 4 года назад +6

      It's Not-for-Profit. They don't monetize. The organization relies on donations only.

    • @Splixter512
      @Splixter512 4 года назад +2

      @@osamagamal495 is that really how ad monetization works?

    • @manasmahanand732
      @manasmahanand732 4 года назад +3

      @@Splixter512 no, freecodecamp probably pays him. Freecodecamp gets money from donations. You can also contribute to freecodecamp by adding features to their app, since it is open source.

  • @drewstifler1440
    @drewstifler1440 4 года назад +2171

    This tutorial helped me land a job as a front end developer without experience. Now on my 9th month :)

    • @liquicitizendirk2147
      @liquicitizendirk2147 4 года назад +57

      That's dope, congrats!

    • @S4LTYT
      @S4LTYT 4 года назад +20

      how much u earn bro

    • @itsmepiyushsaha
      @itsmepiyushsaha 4 года назад +9

      Hey.
      Do you have a LinkedIn or any other profile where we can connect? I want to talk about something

    • @hiteshkumarr20
      @hiteshkumarr20 4 года назад +8

      he can you send me your resume?

    • @viniciusmiranda3820
      @viniciusmiranda3820 4 года назад +48

      @@S4LTYT I knew that someone would ask that lol

  • @anuraghazra4772
    @anuraghazra4772 4 года назад +637

    ⭐️Course Contents ⭐️
    ⌨️ (0:00:00) Course Introduction & Philosophy
    ⌨️ (0:05:22) What we'll be building
    ⌨️ (0:06:24) Why React?
    ⌨️ (0:09:25) ReactDOM & JSX
    ⌨️ (0:16:19) ReactDOM & JSX Practice
    ⌨️ (0:20:34) Functional Components
    ⌨️ (0:24:32) Functional Components Practice
    ⌨️ (0:29:41) Move Components into Separate Files
    ⌨️ (0:35:07) Parent/Child Components
    ⌨️ (0:43:14) Parent/Child Component Practice
    ⌨️ (0:48:12) Todo App - Phase 1
    ⌨️ (0:50:50) Styling React with CSS Classes
    ⌨️ (0:55:56) Some Caveats
    ⌨️ (0:58:12) JSX to JavaScript and Back
    ⌨️ (1:02:11) Inline Styles with the Style Property
    ⌨️ (1:09:21) Todo App - Phase 2
    ⌨️ (1:12:42) Props Part 1 - Understanding the Concept
    ⌨️ (1:14:56) Props Part 2 - Reusable Components
    ⌨️ (1:17:29) Props in React
    ⌨️ (1:29:39) Props and Styling Practice
    ⌨️ (1:40:25) Mapping Components
    ⌨️ (1:48:27) Mapping Components Practice
    ⌨️ (1:53:44) Todo App - Phase 3
    ⌨️ (1:58:16) Class-based Components
    ⌨️ (2:03:32) Class-based Components Practice
    ⌨️ (2:07:11) State
    ⌨️ (2:12:08) State Practice
    ⌨️ (2:15:45) State Practice 2
    ⌨️ (2:19:59) Todo App - Phase 4
    ⌨️ (2:22:05) Handling Events in React
    ⌨️ (2:25:52) Todo App - Phase 5
    ⌨️ (2:27:11) Changing State
    ⌨️ (2:39:29) Todo App - Phase 6
    ⌨️ (2:47:14) Lifecycle Methods Part 1
    ⌨️ (2:56:45) Lifecycle Methods Part 2
    ⌨️ (3:00:07) Conditional Rendering
    ⌨️ (3:11:26) Conditional Rendering Part 2
    ⌨️ (3:14:21) Conditional rendering Practice
    ⌨️ (3:23:00) Todo App - Phase 7
    ⌨️ (3:25:34) Fetching data from an API
    ⌨️ (3:36:34) Forms Part 1
    ⌨️ (3:48:55) Forms Part 2
    ⌨️ (4:00:11) Forms Practice
    ⌨️ (4:24:29) Container/Component Architecture
    ⌨️ (4:35:53) Meme Generator Capstone Project
    ⌨️ (4:56:11) Writing Modern React Apps
    ⌨️ (5:02:17) Project Ideas for Practicing
    ⌨️ (5:03:06) Conclusion

  • @Joseph-qb1es
    @Joseph-qb1es 4 года назад +30

    I'm at the 2 hour mark. I'm so happy that not only am I grasping all the concepts, I'm also practicing them over and over so as to be able to do it from memory. Amazing.

  • @BucurIonNiculae
    @BucurIonNiculae 5 лет назад +1688

    This tutorial is better than many of the courses on Udemy... Good bless you.

    • @khaiduong7318
      @khaiduong7318 5 лет назад +13

      totally agree!

    • @this.channel
      @this.channel 5 лет назад +35

      And he gave us a site to practice on scrimba.com/g/glearnreact
      How amazing.

    • @stealthslushie610
      @stealthslushie610 5 лет назад +60

      Well, if someone does something for free then it's probably because they're passionate about that. Udemy is the result of chasing money. The whole udemy's ecosystem is based on fake discounts and the truth is they don't want to work with real teachers, only with salesmen. The fact something is paid gives people "the premium feeling" to it and so it may appear better but only for the foolish.

    • @MoneyMaker-ze7dc
      @MoneyMaker-ze7dc 5 лет назад +47

      @@stealthslushie610 On the other hand, even though one could be passionate about determined subject, that passion only goes to a point. I say that because making a good course demands considerable time and, in many cases, money. Making a long course requires equipment and planning, and it's hard to do that completely for free, that's why I wouldn't diminish the paid courses. I agree with you, though. If someone is doing something for free and without any "traps" to sell another course, it's because they're passionate and that means the course as consequence will likely be good.

    • @FordExplorer-rm6ew
      @FordExplorer-rm6ew 5 лет назад

      @@stealthslushie610 this and a ton of other companies . They take advantage of people who have good faith and want to learn but don't know how much it's worth.

  • @BrandonsOnline
    @BrandonsOnline 4 года назад +42

    This is my first time really diving into React, let alone using scrimba. Holy moly, is scrimba ever a powerful teaching tool put in the right hands. Loved the deep dive couldn't be better.

    • @eac-ox2ly
      @eac-ox2ly 3 года назад

      @@capslock3250 There's a lot of free courses lel. This React one is an example.

  • @PlasmoX
    @PlasmoX 4 года назад +21

    i've been looking around for react tutorials, and this one is the one that really helped me the most. very clear, nice examples to practice, and i'm retaining the information.

  • @MsStajna
    @MsStajna 4 года назад +13

    This is my first time with React and I learned so much from you, everything is crystal clear now! Amaaazing job!!!

  • @miab5962
    @miab5962 5 лет назад +11

    This is hands down one of the best tutorials you can watch to learn REACT on you tube. The teacher explains everything as why certain things work the way they do. You wont be left GUESSING! A thousand likes. World needs more teachers like you!
    UPDATE : do this on scrimba, you can edit the code with the teacher. Soooo good!

  • @ronaldot401
    @ronaldot401 5 лет назад +26

    I just started watching it and I already love it. Better than my classes in college!

  • @priyakoli5572
    @priyakoli5572 3 года назад +10

    Step by Step Explanation is really what everyone is looking for. Instead doing any certifications or search for react js tuts you covered all what is needed. Many Thanks to you. Grateful to you 🙏🏻

  • @attitudefever1
    @attitudefever1 4 года назад +84

    Thank you so much, sir. I can't believe resources like this exists on internet for free to help out starters!!
    I did all of your exercises and took a good 2 weeks including weekends to finish up because I really wanted to learn good and active learning instead of passive learning.
    Thank you so much once again and God Bless you ! for guiding many of us.

    • @murtazajafri9387
      @murtazajafri9387 4 года назад +2

      at the end. how would you rate your react understanding? can you make a frontend of an app on your own?

  • @error-ie4fo
    @error-ie4fo 5 лет назад +21

    This tutorial is really great. I've never understand React like that before. Thanks Bob

  • @YoungGrizzly
    @YoungGrizzly 5 лет назад +29

    Great intro. I always think of tutorials as pointers.i mean at some point you get tired of learning what a dang variable is but you listen anyway so you can get that gem about ternary operators that makes you rethink your last twenty projects where you have a variable for each POST and GET parameter.

  • @artrising967
    @artrising967 4 года назад +2

    One of the gnarliest tutorials I've seen on React so clear, easy and well thought out. Thanks. I think you're totally dope.

  • @CoolPupGaming
    @CoolPupGaming 2 года назад +16

    This is amazing!
    There are so many react videos but they all rush into the more complex things too fast without covering the basics.
    I used to think I am incapable of learning React but you showed me I can do this.
    Thank you so much.

    • @seanpereira5824
      @seanpereira5824 2 года назад +1

      Same here.. I used to think it was difficult to learn because there is not a lot of resources which were step by step but this one explains it quite well

  • @Khalinakhe
    @Khalinakhe 5 лет назад +269

    This tutorial is so great that 17 minutes and 08 seconds in I decided to go ahead and download the video for offline-use just in case something happens to the world or youtube within the next 4.8 hours

  • @DubiousPhoenix
    @DubiousPhoenix 5 лет назад +6

    Finally broke down and watched this after ignoring it for so long. A JS tutorial on this channel was a miss for me so I ignored this too. Good lord was I wrong. Nothing on Udemy can compare. This is actually TEACHING ME! You give time to slowdown and you give regular prompts to answer questions and the pacing is just great over all! Dora was so successful because of the techniques on display here. If I find anyone else needing a react course this will def be my first choice! Thanks!

  • @dmennenoh
    @dmennenoh 3 года назад +2

    Thanks much! I've been watching loads of React tutorials and find this one the most complete so far, and you have a great speaking style. Taken me three days to get two hours in so far, as I'm doing everything. Appreciate the effort it took to produce this.

  • @yukii_kamishiro
    @yukii_kamishiro 4 года назад +8

    14th/12/2019
    after spend 30 days of learning and practicing with your video.
    I now can do my course project, share all of my knowledge with my friends, especially I can do a lot more project with React that I learn only from your video.
    Thank you so much for sharing this video to the world.
    God bless you and people around you.

  • @aditivyas1420
    @aditivyas1420 4 года назад +15

    This is the only tutorial where I actually understood the core reactjs concept.

    • @vampirehunter911
      @vampirehunter911 3 года назад

      React Query Essentials (learn.tanstack.com/)
      Download link --> katfile.com/oja17g3nnnlj/kat-ts-rqe.zip.html

  • @RayThompson100
    @RayThompson100 4 года назад +9

    After watching a few other react tutorials on you tube, this is the only one I have watched so far that has helped me understand react. Great tutorial.

    • @swami2672
      @swami2672 3 года назад

      I am confused with this and React Tutorial for Beginners [React js] by Programming with Josh... Any comments on this?

  • @michelezucca5819
    @michelezucca5819 4 года назад +2

    You don't know how much I am grateful to you for putting together and publishing this course. I have been doing a couple of React course on Udemy but this course is the first one where I really understand how to write code on React, how components and elements are structured and how the logic behind React structure works. You focus so much on putting the React student to write syntax from scratch and to understand how to write Javascript on React before throwing problems to solve. In all the other courses I've seen teachers throw in problem-solving games all over while I'm still trying to understand the syntax, which in my opinion is the wrong approach, leaving the student more and more confused. Thanks to you I understand React so much better now.

  • @koby4132
    @koby4132 5 лет назад +6

    This was the best learning experience I've had learning a new language/framework/library. The practices sections are extremely useful. I can't recommend this course enough. 10/10

  • @amelielecoz3348
    @amelielecoz3348 5 лет назад +47

    this course is just what I needed to start learning React ! Merci !

  • @alonlaob
    @alonlaob 3 года назад +71

    When you make pauses for us to answer, I can't help feeling like in Dora the Explorer.

  • @vasanthtcs2009
    @vasanthtcs2009 2 года назад

    The best thing one starting with React can expect. I have gone through few other paid courses but nothing is going to stand as good as this video. Thoroughly thought through from a learner's perspective and unfolding the complex details one at a time. I like the way how ES6 comes way handy. Many kudos to Bob!!

  • @alikolachi3959
    @alikolachi3959 4 года назад +13

    Perfect course for beginners to take. I love the way the instructor takes on different concepts and the way he teaches everything step by step. I love the way he teaches. The way of teaching is similar to the instructor teaches at Programming With Mosh. Thanks for the tutorial.

  • @ombhosale8090
    @ombhosale8090 2 года назад +3

    Thank you so much for this course. It took me almost 10 days to complete and I can confidently say I have followed through and learned React basics from this course!

  • @karansatha5285
    @karansatha5285 4 года назад +7

    Such an amazing course for someone who is new to React. Thank you for giving out this for free.

  • @robinkartik6356
    @robinkartik6356 4 года назад +8

    Actually I was learning react with my cousin brother. We are at State and found it very difficult to understand. So we decided to learn react from somewhere else and stumbled upon on this channel. I would like to say that your teaching style is fantastic, you encourage your audience to do it at the same time.
    Thank you so much for creating this video. Love from India.

  • @camcardow1566
    @camcardow1566 5 лет назад +4

    The best tutorial on React I've seen. Really effective teaching style.

  • @girlfailurecaughtin4k
    @girlfailurecaughtin4k 4 года назад +8

    Thanks! I am moving from Vue to React and just lost in all those articles on the web ... and I find this!!! Totally my lifesaver 😭

  • @justinwang4378
    @justinwang4378 3 года назад +15

    This tutorial gives you enough of a working knowledge to be able to start your first job. I watched the course twice because the first time I was confused. Scrimba really helps since it actually helps you apply and remember what you learned. I am now working as a software developer and this course provided me with everything I needed to know for the workplace.

  • @saifullah1334
    @saifullah1334 4 года назад +6

    Hands down THE best react tutorial for beginners out there. Helped me a lot! Thanks!!

    • @garvitgupta13
      @garvitgupta13 4 года назад

      Does this video contain Hooks such as {useState,useEffect}?

  • @bovrar2nd861
    @bovrar2nd861 5 лет назад +7

    This is an awesome tutorial! The platform is also great! I was writing React right up front and not just blindly coding along, now I can remember more what I write. Excellent Job Mr. Ziroll I am very grateful!

    • @MukeshKumar-co5ky
      @MukeshKumar-co5ky 4 года назад

      Hey, since It has been 1.5 years the video uploaded, Should I watch tutorial or try to find any latest tutorial? please reply ASAP!

  • @irfanomi22
    @irfanomi22 4 года назад +14

    I have tried some of tutorials in youtube, even Udemy ones. Nothing even comes close to this tutorial for easy understating. My god I was thinking react is hard to learn, cuz everyone else's video was kind of tough to understand (even though I know Angular).I'm super glad I found you man.
    Dude you are a LEGEND !!!!!

  • @ryancoding6733
    @ryancoding6733 2 года назад +1

    best react tutorial i've ever watched, simple and easy explanation, seamless transition from topic to the next. thank you bob

  • @shawinmendis9382
    @shawinmendis9382 4 года назад +7

    One of the best tutorials out there on react ❤️

  • @ramialsabki4146
    @ramialsabki4146 4 года назад +24

    I see all other programmers trying to sell their courses when they BARELY go in details and explain. And you explain in a way that anyone would understand and still make it free? I am really speechless but thank you :D

    • @STUPIDYOUTUBE_HIDINGMSGS
      @STUPIDYOUTUBE_HIDINGMSGS 2 года назад

      So do you think this programmer went into explaining the details? He didn't even explain how the HTML is connected to the index.js file. He just said there's the "root" element. But he failed to explain why the HTML file has the javascript source "index.pack.js" and he's editing index.js. So how does that magically finds the file? Was this explained somewhere in the video?

    • @hoangtranba9760
      @hoangtranba9760 2 года назад

      @@STUPIDRUclips_HIDINGMSGS Yeah but in summary he did explained his code clearly

    • @STUPIDYOUTUBE_HIDINGMSGS
      @STUPIDYOUTUBE_HIDINGMSGS 2 года назад

      @@hoangtranba9760 Good enough, but try Angela Yu, you'll be amazed with the details of her teaching.

  • @sachinrastogi2296
    @sachinrastogi2296 4 года назад +9

    ⌨️ (0:00:00) Course Introduction & Philosophy
    ⌨️ (0:05:22) What we'll be building
    ⌨️ (0:06:24) Why React?
    ⌨️ (0:09:25) ReactDOM & JSX
    ⌨️ (0:16:19) ReactDOM & JSX Practice
    ⌨️ (0:20:34) Functional Components
    ⌨️ (0:24:32) Functional Components Practice
    ⌨️ (0:29:41) Move Components into Separate Files
    ⌨️ (0:35:07) Parent/Child Components
    ⌨️ (0:43:14) Parent/Child Component Practice
    ⌨️ (0:48:12) Todo App - Phase 1
    ⌨️ (0:50:50) Styling React with CSS Classes
    ⌨️ (0:55:56) Some Caveats
    ⌨️ (0:58:12) JSX to JavaScript and Back
    ⌨️ (1:02:11) Inline Styles with the Style Property
    ⌨️ (1:09:21) Todo App - Phase 2
    ⌨️ (1:12:42) Props Part 1 - Understanding the Concept
    ⌨️ (1:14:56) Props Part 2 - Reusable Components
    ⌨️ (1:17:29) Props in React
    ⌨️ (1:29:39) Props and Styling Practice
    ⌨️ (1:40:25) Mapping Components
    ⌨️ (1:48:27) Mapping Components Practice
    ⌨️ (1:53:44) Todo App - Phase 3
    ⌨️ (1:58:16) Class-based Components
    ⌨️ (2:03:32) Class-based Components Practice
    ⌨️ (2:07:11) State
    ⌨️ (2:12:08) State Practice
    ⌨️ (2:15:45) State Practice 2
    ⌨️ (2:19:59) Todo App - Phase 4
    ⌨️ (2:22:05) Handling Events in React
    ⌨️ (2:25:52) Todo App - Phase 5
    ⌨️ (2:27:11) Changing State
    ⌨️ (2:39:29) Todo App - Phase 6
    ⌨️ (2:47:14) Lifecycle Methods Part 1
    ⌨️ (2:56:45) Lifecycle Methods Part 2
    ⌨️ (3:00:07) Conditional Rendering
    ⌨️ (3:11:26) Conditional Rendering Part 2
    ⌨️ (3:14:21) Conditional rendering Practice
    ⌨️ (3:23:00) Todo App - Phase 7
    ⌨️ (3:25:34) Fetching data from an API
    ⌨️ (3:36:34) Forms Part 1
    ⌨️ (3:48:55) Forms Part 2
    ⌨️ (4:00:11) Forms Practice
    ⌨️ (4:24:29) Container/Component Architecture
    ⌨️ (4:35:53) Meme Generator Capstone Project
    ⌨️ (4:56:11) Writing Modern React Apps
    ⌨️ (5:02:17) Project Ideas for Practicing
    ⌨️ (5:03:06) Conclusion

  • @medi7573
    @medi7573 4 года назад +1

    I have watched many courses about reactjs, and really I was not able to even do the first exercise. Thank you for the hands-on comprehensive course.

  • @steelbreather
    @steelbreather 4 года назад +2

    Learned a great ton about react in this tutorial. Thank you so much!

  • @satejtawade
    @satejtawade 5 лет назад +4

    Best React tutorial for beginner. Each topic explained clearly. Author has great knowledge of React. Thnx sir for such video

  • @remitto8367
    @remitto8367 3 года назад

    Worked my way through this slowly over a couple of weeks. Best RUclips course I've ever followed.

  • @charlene6306
    @charlene6306 3 года назад

    Moved over to scrimba to watch and use the interactive editor. This is by far THE BEST intro to React video I've come across. I'm 7% of the way through and I've learnt more from this course then I did from spending time going through the Facebook official tutorial. Not only does this person know about React, but they also know how to teach. Knowing how to teach is a skill, an art form that not all the big youtube people have. I highly recommend this and any other course taught by this teacher 10/10

  • @AxiomTutor
    @AxiomTutor 2 года назад +7

    I'm impressed not just by the information but also the pedagogy practiced in this video. Building up very iteratively, quizzing the viewer, giving hints about how to debug (a practice that's super important in your life as a programmer). Excellent video.

  • @shabnamnaaz4676
    @shabnamnaaz4676 5 лет назад +3

    I really liked how to asked us to write every line many times from scratch , best tutorials , thanks willing to see more from you

  • @caleboke2771
    @caleboke2771 4 года назад

    I’m really grateful, I’ve been doing react without really knowing react then I told myself I wanted to learn it. I spent 3 days watching this video and I can say I can do most stuffs myself..thumbs up

  • @chhawiprasad3755
    @chhawiprasad3755 3 года назад +2

    This is the best tutorial ever on react. I swear. Others just tell you write this here write that there blah blah. You are explaining everything and I feel like I am learning. Thank you so so very much. You're an inspiration. Love from India.

  • @rohankademani6406
    @rohankademani6406 4 года назад +3

    i literally surfed the entire youtube but didnt find a worthy video on react but now im here its the best anyone would pay to watch this video

  • @MuhammadAhmed-vi2xt
    @MuhammadAhmed-vi2xt 5 лет назад +11

    You guys don't know how much you gave to us. Thank you Hug you love you. Thumbs Up and salute you

  • @dv2983
    @dv2983 3 года назад +2

    I logged in specifically to thank you! First off, this is one of the best informed video on React. I see A LOT of so called React tutorials where you can tell that the person has no real knowledge about what is happening under the hood-it is bandaid React. Secondly I hate arrow functions and all the mess that ES6 has brought with it-call me a damn purist but I like my function to look like a function. And thanks for talking about whats happening under the hood-that is IMPORTANT. We don't want React robots who can copy paste, we need to know what and how things works! (only issue with your tutorial-it is too dark and you haven't zoomed in. Thats all, the rest is gold)

  • @kiranchannayanamath3230
    @kiranchannayanamath3230 4 года назад +1

    Thanks Bob, this was a great tutorial on React, very elegant, very helpful. This course not only got me get started with react, but also made me aware of the modern javascript and more of vanilla javascript.

  • @user-oz8py2hw6x
    @user-oz8py2hw6x 5 лет назад +3

    Thank you for fantastic lectures!!
    This video is better than almost of all other materials to learn React.
    God bless you.

  • @knightr1der
    @knightr1der 5 лет назад +9

    This tutorial is really good!! Appreciate your teaching skills 👍

  • @ivsaimanoj
    @ivsaimanoj 2 года назад +1

    Honestly, your way of teaching and explaining is really inspiring. Thanks for creating this course, i love React now !

  • @tippit3859
    @tippit3859 3 года назад +1

    This was an amazing tutorial. I feel I have such a better grasp on React because of you. Thank you for the amount of effort you put in and the detail you have in your explanations. Thank you so so much.

  • @gursheeshkour4254
    @gursheeshkour4254 3 года назад +6

    Purely a masterpiece! Don't look for any other course, this has literally everything.

    • @abhisheksankpal261
      @abhisheksankpal261 3 года назад

      Is it still relevant ?

    • @gursheeshkour4254
      @gursheeshkour4254 3 года назад

      @@abhisheksankpal261 Surely is! He has updated the video on Scrimba so use that link.

  • @vassirng
    @vassirng 4 года назад +5

    Great tutorial!!! The only thing that I would personally appreciate for the future videos is a bigger font.

  • @talhashakil8245
    @talhashakil8245 3 года назад +2

    This was the most amazing React tutorial I found on youtube. Thank you soo much for such detailed explanation. The real-time practice on scrimba made it more beneficial. Thank you Sir Bob Ziroll !!

  • @mohamedasiqshajahan1200
    @mohamedasiqshajahan1200 3 года назад +3

    What an explanation!!! I was at level 0 at the time of started watching this tutorial. Now I've got the confidence. You are the best teacher.

    • @bobziroll
      @bobziroll 3 года назад +1

      Thanks! That means a lot to me :)

    • @Badar2310
      @Badar2310 3 года назад

      @@bobziroll Hi mr Bob, Im doing the course on VS Code and it wont run in my index.html file, my contents wont display in browser, help please? What am i missing

  • @Raja-ly4oj
    @Raja-ly4oj 5 лет назад +3

    Good tutorial for react js
    beginners and super coding standard examples 👍

  • @leadersheir9377
    @leadersheir9377 4 года назад +2

    Just can't thank enough! Really appreciate the work ya'll are doing.

  • @marvinbeese8180
    @marvinbeese8180 4 года назад +1

    Thanks for publishing this tutorial. Started learning with docs only, learned effectively with this tutorial with live-coding

  • @nurel882
    @nurel882 4 года назад +10

    Thanksss, i've finished this course and i love how you deliver every material with effective communcation

  • @andig97
    @andig97 5 лет назад +15

    Actually the best coding course I've ever done.. how they all should be, so detailed and cleverly built up with the pauses to remind about the importance of rewriting it over and over. Do you do any others in this kind of detail?

    • @bobziroll
      @bobziroll 5 лет назад +12

      I'm working on a more intermediate/advanced course on React for Scrimba now.

    • @andig97
      @andig97 5 лет назад +1

      @@bobziroll awesome!

    • @MrWango-se4fi
      @MrWango-se4fi 5 лет назад

      @@bobziroll is this released? Waiting for it eagerly !!!!

    • @sangramjitchakraborty7845
      @sangramjitchakraborty7845 5 лет назад

      @@bobziroll Let me say man, you are a legend. You are helping build the career of thousands out here, including myself. Thanks for investing your time and effort on this.

  • @abdullahshafique3591
    @abdullahshafique3591 3 года назад +1

    This is the best Programming Tutorial I have ever taken in my life. Thank you man.

  • @bahboom
    @bahboom 4 года назад

    Excellent tutorial. Like your pacing and your use of repetition and reinforce the material. And having the viewers think and instead of just listening and watching you code.

  • @denishpatel6038
    @denishpatel6038 4 года назад +12

    Thank you man, I purchased courses on Udemy and completed 30 lessons and was very bored of it, I watched this video and I think I got perfect knowledge to getting started for advance react topics.

    • @michelezucca5819
      @michelezucca5819 4 года назад

      denish patel which Udemy courses did you buy? I’ve been doing Colt Steele’s one, and although his Web Developer Bootcamp was a great course and I got started with my passion for web development thanks to it, I haven’t been very happy with his React course. It just doesn’t click. I did one hour of this freecodecamp course and everything is already so much clearer

    • @Kazerian18
      @Kazerian18 4 года назад

      @@michelezucca5819 I bought Maximillian... He is a great teacher though. Although sometimes his voice puts me to sleep.

    • @travel_ghost22
      @travel_ghost22 4 года назад

      @@Kazerian18 same things happening with me everytime his voice puts me in sleep and that too for a long time he is a fast speaker speaks so speed and in all the video he just speaks God Saved Me

  • @ThePeciuks
    @ThePeciuks 5 лет назад +39

    This could be updated to contain React Hooks which would be very appreciated :)

  • @rusprice
    @rusprice 4 года назад +3

    Thank you so much. I watched the entire thing over the course of 2 weeks.

  • @georgetuges4821
    @georgetuges4821 3 года назад +1

    Thank you so much, I've been search for a good React course that is simple for a beginner, and boy you have blessed me. and it's free. Thank you

  • @tobennanwokike
    @tobennanwokike 5 лет назад +3

    Great tutorial. Best I've seen thus far. I would have loved a Github repo with solutions for each of the lessons. I believe that would make referring back to the code a lot easier.

  • @azammohammed9567
    @azammohammed9567 5 лет назад +46

    This is the best meme generator tutorial.

  • @TRUNKER76
    @TRUNKER76 3 года назад

    Honestly you do the best job teaching this stuff that I have ever come across. Very easy to understand. Thank you!

  • @stefanhinze5165
    @stefanhinze5165 4 года назад

    This tutorial is great and helped me a lot to begin with React.js. Bob, thank you so much for sharing this!

  • @microwavecoffee
    @microwavecoffee 4 года назад +29

    this is the baskin robbins jamoca almond fudge of react tutorials.

  • @dustincintron1682
    @dustincintron1682 5 лет назад +4

    Just finished the tutorial. This was INCREDIBLY helpful and built my confidence in React quite a bit. Thank you for your work

    • @abhayjackful
      @abhayjackful 4 года назад

      can i learn react js directly, if i only know html and css?

    • @dustincintron1682
      @dustincintron1682 4 года назад

      @@abhayjackful Yes. Though I'd suggest finding some vanilla JavaScript tutorials as well. But you can def learn React as you are right now.

    • @alb12345672
      @alb12345672 4 года назад

      @@dustincintron1682 I watched the tutorial, I wish I never used angular and vue, then I would be ok with it. This is like going 10 years in the past, seriously. No directives for starters. For example, vue explodes v-for (an HTML attribute) into a map statement. The only reason I could see using this is for better testing. It looks like the meta-code vue creates.

    • @dustincintron1682
      @dustincintron1682 4 года назад

      @@alb12345672 I cant figure out if your comment is positive or negative lol.
      I never used Vue before. I'm still trying to get my foot in the door as a developer..
      Are you saying this is outdated or not as good as the other frameworks?

    • @alb12345672
      @alb12345672 4 года назад +2

      @@dustincintron1682 Everything is opinion. Not meant to be positive or negative. There are fanbois online for every framework. It seems to be best if you want a job today, but I'll say this, I've been doing dev for a long time, frameworks come and go. 10 years ago, every job wanted Jquery. Some wanted Backbone. Heard of those :lol:?
      It is like many other choices in life. React looks like it relies more on base javascript (with some additions) and vue/angular use shortcuts. I can give examples but you would have to understand Vue. Some may say that creates a learning curve, so in that respect react is better. React has a small API, a few concepts and you go from there. But you write more code.
      Best to watch tutorials for all and come to your conclusion. Make a todo app for each one. Can't hurt to put it on a resume either or add to your portfolio.

  • @lolrgf
    @lolrgf 4 года назад +1

    Thank you for releasing this online. I will buy merchandise to help contribute back! You’re doing everyone a favour for those who are less fortunate.

  • @calanick
    @calanick 4 года назад

    this is by far one of the best courses in the web about react and the tutor is really awesome. his idea of teaching is one of the best. keep the good work guys

  • @EisenGlas
    @EisenGlas 5 лет назад +183

    **creates unordered list**
    **names the elements 1,2 and 3**
    ....

    • @__prod1gy__793
      @__prod1gy__793 5 лет назад +3

      ahahaha good notice :))))

    • @bobziroll
      @bobziroll 5 лет назад +12

      🤣 I never noticed it, but I do this all the time. I think it's because 1. 1 2. 2 3. 3 Looks too weird/redundant for me. But I should probably use "a b c" or something instead. Or maybe something more interesting altogether.

  • @oskarolortegui9623
    @oskarolortegui9623 3 года назад +5

    4:18:00 After typing that state I've got this message, I'm stuck ""Error: Objects are not valid as a React child (found: object with keys {isVegan, isKosher, isLactoseFree}). If you meant to render a collection of children, use an array instead.""" please help me out :(

    • @musicraftmenship4785
      @musicraftmenship4785 3 года назад

      You're supposed to use array.map((element)=>{
      return (

    • @musicraftmenship4785
      @musicraftmenship4785 3 года назад

      or if you're trying to generate a single component from an object, you need to do something like
      //assuming you don't need to pass any other props to it

    • @ishtarandseth
      @ishtarandseth 3 года назад

      This is because you are trying to return a object with keys, probably you already write this "{this.state.dietaryRestrictions}" somewhere.

  • @edoardogribaldo2870
    @edoardogribaldo2870 4 года назад +2

    I can't stop thanking you guysssss
    Amazing video and with no ads!!! You are helping everyone who wants to change his life coding

  • @shubhamgoel8148
    @shubhamgoel8148 4 года назад

    Genuinely thanks for putting this on youtube. Helped me learn and did hands on in react js.

  • @xuannghiemnguyen3048
    @xuannghiemnguyen3048 5 лет назад +4

    First, you need follow command below:
    npm create-react-app my-app
    cd my-app
    npm start

  • @jimmyopot1972
    @jimmyopot1972 3 года назад +4

    May God Himself bless you for this course. Really learning a lot.

  • @gabrielfono844
    @gabrielfono844 4 года назад +1

    I finish with the course and I am so happy
    as self taught
    this has helped me strenghten my knowlege.
    thanks.

  • @blank001
    @blank001 4 года назад

    Loved your tutorial.
    Great work man, in this world filled with ads, you uploaded all of this for free without even a single ad. I'll surely recommend your channel to my friends

  • @jessicamessica2271
    @jessicamessica2271 4 года назад +3

    Thank God, finally information on react I can actually understand

  • @montazmeahii6029
    @montazmeahii6029 4 года назад +10

    “Hello World,” the bane of all coding tutorials.

  • @tamaesthetics
    @tamaesthetics 4 года назад +1

    You're a genius , because of you I'm becoming a fan of freeCodeCamp

  • @nighthawks101
    @nighthawks101 3 года назад +1

    this is so structured and well thought out, every course should be like this

  • @rshabhsharma2916
    @rshabhsharma2916 4 года назад +5

    For those of you getting "loading..." on StarWars API, it is because the API address is changed/removed so you will not receive anything from fetching. Don't worry its not a bug and move on :-)

  • @beberage
    @beberage 5 лет назад +6

    How did you initialise react dependencies?

  • @aymanoxs7343
    @aymanoxs7343 2 года назад

    after going through almost half of the react tutorials on RUclips, this one by far was the best ! thank you for your big effort in making this video.😍

  • @NaderiosTNT
    @NaderiosTNT 4 года назад

    I can only drop a simple "wow"!
    This tutorial is definitly the best i've tried to code along. I started a few tutorials but quit after a few minutes.
    This one, after 60 minutes, i will definitly continue tomorrow. Thanks!

  • @tanayraj2991
    @tanayraj2991 3 года назад +11

    This is what we call QUALITY CONTENT

  • @matteopaganiii
    @matteopaganiii 5 лет назад +3

    Please make a Redux Full Course, this is the best course of react in the internet