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.
@@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.
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.
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.
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.
@@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.
@@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.
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!
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!
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.
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
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 🙏🏻
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.
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.
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)
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.
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.
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
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
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?
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.
@@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
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.
it took me 3 weeks to finish this course since i work three jobs but it is the best course of my life not just for react or coding but compared to everything ever lived. no teacher and mentor will teach something this sophisticated with this many details and fully like this only in 5 hours let along this is a coding lang which i knew nothing about and i only knew JS with courses on FCC. but after this i understand every bit of react needed to go on and can work with it. just a thank you not gonna cut it. i don't know what to say but the only thing i thought it should not be done to this video is at the end it have been fast forwarded to save some time but i really think individuals who stay by this course for 5 hours that might even take 3 week to finish (like myself) don't mind a few more minutes to understand everything and don't rush the mind after this much data to make it forget. again thanks
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.
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!
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.
Learning Philosophy 3:40 What you'll learn 4:55 What you should already know 5:20 React 6:25 Why React 9:25 ReactDOM & JSX 16:20 ReactDOM & JSX Practice 20:35 Functional Components 24:35 Functional Components Practice 29:40 Move Components Into Separate Files 35:10 Parent/Child Components 43:20 Parent/Child Component Practice 48:15 Todo App - Phase 1 50:50 Styling React with CSS Classes 56:00 Some Caveats 58:20 JSX to JavaScript and Back 01:02:15 Inline Styles with the Style Property 01:09:25 Todo app - Phase 2 01:12:50 Props Part 1 - Understanding the concept 01:15:00 Props Part 2 - Reusable Components 01:17:35 Props in React 01:29:45 Props & Styling Practice 01:40:35 Mapping Components 01:48:35 Mapping Components Practice 01:53:50 Todo App - Phase 3 01:58:25 Class-based components 02:03:40 Class-based components Practice 02:07:20 State 02:12:15 State Practice 02:15:55 State Practice 2 02:20:05 TO-DO APP Phase 4 02:22:15 Handling Events in React 02:26:00 Todo App - Phase 5 02:27:20 Changing State 02:39:40 Todo App - Phase 6 02:47:25 Lifecycle Methods Part 1 02:56:55 Lifecycle Methods Part 2 03:00:15 Conditional Rendering Part 1 03:11:40 Conditional Rendering Part 2 03:14:35 Conditional Rendering practice 03:23:15 Todo App - Phase 7 03:25:50 Fetching Data from an API 03:36:45 Forms Part 1 03:49:00 Forms Part 2 04:04:25 Forms Practice 04:24:45 Container / Component Architecture 04:36:10 Meme Generator Capstone Project 04:56:30 Writing Modern React Apps 05:02:40 Project Ideas for Practicing
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 !!!!!
In 2:45:30, the “handleChangeFunction” is actually modifying the previous state, as opposed to creating a new object as is recommended earlier. This is because the “todo” object in the “map” function is being modified directly, instead of creating and using a copy of it. Using ES6 syntax, this could be fixed with “return {…todo, completed: !todo.completed}” in the body of the “if”
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
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 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.
55:00 note with className 1:38:30 set a condition with ternary 1:38:50 set a condition with double ampersand 1:45:40 an unique key props for a component 2:08:00 props is immutable => state is needed for mutable variables
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.
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.
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!
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.
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
@@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.
@@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?
@@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.
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.
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 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
🤣 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.
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 :-)
i followed every step of the video of Phase 6 and I found out that the checkbox is able to locate the 'id' but was failed to 'tick' or 'untick' the checkbox
@@colorscream Can you tell me at 2:35:20 why they assumed prevState inside the the setState method to be equal to (this.state) is this always correct??
Its just been 30 min into the tutorial and I have become a hugeee fan of your teaching sir!!!I am actually practicising your hw tutorials on my own...............Thank u so much!!!!!
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!!
I like the course and scrimba is great but 2:39:40 that task is waaaay harder than the previous one. There was no mention before about passing a method with props and what's the meaning of this in that passed function. I've been doing Vue and it is much simpler I have to say.
Great video! Just wanted to add an update for anyone watching: In older versions of React (before 16.8), only class-based components could use state. However, with the introduction of hooks in React 16.8, functional components can now manage state using the useState hook. This makes functional components just as powerful as class components for handling state and lifecycle logic. For new React projects, functional components with hooks are generally preferred. Thanks for the explanation, though-it's still useful for understanding the evolution of React!
Nice to see that someone give tutorial for free, but it is unusable if we couldn't configure the React project. Please, can you show us how to configure dependencies and all other stuff to write simple Hello World? Tnx
@@freecodecamp Even I have these script tags and in my js file I have these import React from "react" import ReactDOM from "react-dom". Still I dont get any text in div root. Here is my code . Can you please help me?
import React from "react" import ReactDOM from "react-dom" ReactDOM.render(Hello , document.getElementById('root'));
I didn't give you all the info before. React requires a build process. If you are building locally, the easiest way to set up the build process is by using create-react-app. Get it here: facebook.github.io/create-react-app/ If you are using scrimba.org, click the gear in the top right corner and select 'add dependency...'. First add 'react', then add 'react-dom'. Everything should work after this.
@@desequilibradoo u gotta use babel... react dependency used in video include react in it... but you are using unpkg cdn... make below two changes if you havent yet... ReactDOM.render(here it is,document.getElementById("root"));
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 :(
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
Just completed this course, Thanks Mr. Bob and freecodecamp for bringing such great study material for everyone to learn and take their skills to the next level. Thank You from the bottom of my heart!!!
webstorme is better for reactjs coding . and coming to point its on .js files and .css .also we have already have .html file and nodeJs files. by using to create npx create-react-app (add) anyname of project file
Dislikers are those who paid huge amount to learn reactjs but found its available for free and that too with better teaching quality... Thanks to this channel...
Is this the best tutorial on React JS? Yes! Have I learned from this? Yes! Are you the best teacher on TH-cam? Yes! Am I going to like and subscribe? Hell Yeah!
Hey great tutorial! Just one thing: in React Todo App: Phase 6 the app doesnt work properly while having React.StrictMode on since it runs the app twice. Any solution to that?
🎉 Watch the updated version of this course: th-cam.com/video/x4rFhThSX04/w-d-xo.html
You r one of the reasons why i still believe in people.
Just uploading this for free.
Not even one commercial.
Speechless.
@@supermarioemulator6487 he'll get paid anyway, It doesn't depend on us watching the Ad.
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.
It's Not-for-Profit. They don't monetize. The organization relies on donations only.
@@osamagamal495 is that really how ad monetization works?
@@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.
This tutorial helped me land a job as a front end developer without experience. Now on my 9th month :)
That's dope, congrats!
how much u earn bro
Hey.
Do you have a LinkedIn or any other profile where we can connect? I want to talk about something
he can you send me your resume?
@@S4LTYT I knew that someone would ask that lol
⭐️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
Thank you
Thanks!
Thank you so much for taking the time to do this. It really helps!
your the best
@@abv250 it's literally in the description
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.
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.
@@capslock3250 There's a lot of free courses lel. This React one is an example.
This tutorial is better than many of the courses on Udemy... Good bless you.
totally agree!
And he gave us a site to practice on scrimba.com/g/glearnreact
How amazing.
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.
@@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.
@@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.
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!
yes
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!
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.
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
This is the only tutorial where I actually understood the core reactjs concept.
React Query Essentials (learn.tanstack.com/)
Download link --> katfile.com/oja17g3nnnlj/kat-ts-rqe.zip.html
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 🙏🏻
⌨️ (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
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.
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.
at the end. how would you rate your react understanding? can you make a frontend of an app on your own?
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)
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.
I just started watching it and I already love it. Better than my classes in college!
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.
I am confused with this and React Tutorial for Beginners [React js] by Programming with Josh... Any comments on this?
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
Lmao haha
This. My internet is going off in a couple days for the month, and I've had to have this locally to work on !
lol
how did you download this video plz
use internet download manager
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
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?
@@TH-cam_IS_WOKE Yeah but in summary he did explained his code clearly
@@hoangtranba9760 Good enough, but try Angela Yu, you'll be amazed with the details of her teaching.
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.
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.
Thanks! That means a lot to me :)
@@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
This is my first time with React and I learned so much from you, everything is crystal clear now! Amaaazing job!!!
Purely a masterpiece! Don't look for any other course, this has literally everything.
Is it still relevant ?
@@abhisheksankpal261 Surely is! He has updated the video on Scrimba so use that link.
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.
it took me 3 weeks to finish this course since i work three jobs but it is the best course of my life not just for react or coding but compared to everything ever lived. no teacher and mentor will teach something this sophisticated with this many details and fully like this only in 5 hours let along this is a coding lang which i knew nothing about and i only knew JS with courses on FCC. but after this i understand every bit of react needed to go on and can work with it. just a thank you not gonna cut it. i don't know what to say
but the only thing i thought it should not be done to this video is at the end it have been fast forwarded to save some time but i really think individuals who stay by this course for 5 hours that might even take 3 week to finish (like myself) don't mind a few more minutes to understand everything and don't rush the mind after this much data to make it forget.
again thanks
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.
This tutorial is really great. I've never understand React like that before. Thanks Bob
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!
Such an amazing course for someone who is new to React. Thank you for giving out this for free.
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.
hands down, even today this single video teaches you a lot and is probably better than all those long 19hr course videos on other channels
Learning Philosophy 3:40
What you'll learn 4:55
What you should already know 5:20
React 6:25
Why React 9:25
ReactDOM & JSX 16:20
ReactDOM & JSX Practice 20:35
Functional Components 24:35
Functional Components Practice 29:40
Move Components Into Separate Files 35:10
Parent/Child Components 43:20
Parent/Child Component Practice 48:15
Todo App - Phase 1 50:50
Styling React with CSS Classes 56:00
Some Caveats 58:20
JSX to JavaScript and Back 01:02:15
Inline Styles with the Style Property 01:09:25
Todo app - Phase 2 01:12:50
Props Part 1 - Understanding the concept 01:15:00
Props Part 2 - Reusable Components 01:17:35
Props in React 01:29:45
Props & Styling Practice 01:40:35
Mapping Components 01:48:35
Mapping Components Practice 01:53:50
Todo App - Phase 3 01:58:25
Class-based components 02:03:40
Class-based components Practice 02:07:20
State 02:12:15
State Practice 02:15:55
State Practice 2 02:20:05
TO-DO APP Phase 4 02:22:15
Handling Events in React 02:26:00
Todo App - Phase 5 02:27:20
Changing State 02:39:40
Todo App - Phase 6 02:47:25
Lifecycle Methods Part 1 02:56:55
Lifecycle Methods Part 2 03:00:15
Conditional Rendering Part 1 03:11:40
Conditional Rendering Part 2 03:14:35
Conditional Rendering practice 03:23:15
Todo App - Phase 7 03:25:50
Fetching Data from an API 03:36:45
Forms Part 1 03:49:00
Forms Part 2 04:04:25
Forms Practice 04:24:45
Container / Component Architecture 04:36:10
Meme Generator Capstone Project 04:56:30
Writing Modern React Apps 05:02:40
Project Ideas for Practicing
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 !!!!!
this course is just what I needed to start learning React ! Merci !
hi i need little help.
@@nareenderkumar simp
Comma va tu?
In 2:45:30, the “handleChangeFunction” is actually modifying the previous state, as opposed to creating a new object as is recommended earlier. This is because the “todo” object in the “map” function is being modified directly, instead of creating and using a copy of it. Using ES6 syntax, this could be fixed with “return {…todo, completed: !todo.completed}” in the body of the “if”
Good catch! I actually realized this later and updated the course on Scrimba to include a follow-up screencast that corrects this.
Thanks
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
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
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?
I'm working on a more intermediate/advanced course on React for Scrimba now.
@@bobziroll awesome!
@@bobziroll is this released? Waiting for it eagerly !!!!
@@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.
The best tutorial on React I've seen. Really effective teaching style.
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.
55:00 note with className
1:38:30 set a condition with ternary
1:38:50 set a condition with double ampersand
1:45:40 an unique key props for a component
2:08:00 props is immutable => state is needed for mutable variables
Hands down THE best react tutorial for beginners out there. Helped me a lot! Thanks!!
Does this video contain Hooks such as {useState,useEffect}?
When you make pauses for us to answer, I can't help feeling like in Dora the Explorer.
Hahaha
do it on scrimba
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.
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.
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.
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!
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!
Best React tutorial for beginner. Each topic explained clearly. Author has great knowledge of React. Thnx sir for such video
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.
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
One of the gnarliest tutorials I've seen on React so clear, easy and well thought out. Thanks. I think you're totally dope.
Great tutorial!!! The only thing that I would personally appreciate for the future videos is a bigger font.
any one wants how to setup the reactJs
1. npm install create-react-app -g
2.create-react-app 'your-app-name'
3.cd 'your-app-name'
4.npm start
Thank you sir!
Jeez why couldnt someone show me that yesterday :D
will i write it on a text editor and run it using command prompt ?
or
am i to run it directly on command prompt?
am using windows
thank you so much sir. love from iit delhi
@@stanleychiemelapaul write it on your command prompt and also make sure to have node installed previously
The first link in the description is the best thing that is in the internet for free. THANKYOU
Hello Bipul, are you interested in full-time job opportunities in web development? Are you a fresher?
Yes
@@bipulsharma1357 Hey Bipul, can we please connect to discuss more if you are interested? Please contact me using the information in my channel.
@@bipulsharma1357 Hey Bipul, please connect with me if interested in exploring the full-time web developer role.
So glad that I found this course on TH-cam, otherwise the audio of this course on scrimba is very low almost null.
thanks fCC.
I'm going to fix the audio level issue in my new, updated React course on Scrimba (which will also be on fCC)
“Hello World,” the bane of all coding tutorials.
One of the best tutorials out there on react ❤️
Just finished the tutorial. This was INCREDIBLY helpful and built my confidence in React quite a bit. Thank you for your work
can i learn react js directly, if i only know html and css?
@@abhayjackful Yes. Though I'd suggest finding some vanilla JavaScript tutorials as well. But you can def learn React as you are right now.
@@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.
@@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?
@@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.
Went through a bunch of tutorials, and this is the best out of all of them. Thanks FCC and Bob!
best react tutorial i've ever watched, simple and easy explanation, seamless transition from topic to the next. thank you bob
This is what we call QUALITY CONTENT
this is the baskin robbins jamoca almond fudge of react tutorials.
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.
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
@@michelezucca5819 I bought Maximillian... He is a great teacher though. Although sometimes his voice puts me to sleep.
@@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
A fantastic course where the instructor holds on the interest of the students...
Hello Bishwajit! Are you a fresher in web development? Would you be open to job opportunities in the same?
I am half way to complete this lecture. I want to say thank you as I understood react better with this tutorial.
**creates unordered list**
**names the elements 1,2 and 3**
....
ahahaha good notice :))))
🤣 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.
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 :-)
Thanks buddy I was looking for something like this
@@SandeepSharma-co5tl Glad to hear :)
Anyone else got stuck at ⌨️ (2:39:29) Todo App - Phase 6? I am finding it difficult to understand the reason behind some of the code.
ask
i followed every step of the video of Phase 6 and I found out that the checkbox is able to locate the 'id' but was failed to 'tick' or 'untick' the checkbox
@@colorscream Can you tell me at 2:35:20 why they assumed prevState inside the the setState method to be equal to (this.state) is this always correct??
I got a little confused too. I believe he added some new material in there and it is quite frustrating.
@@lingfungliu4876 same for me!! have you ever figured out how to fix onChange to make the ticking/unticking work?
Thanks for being such generous and make this course available for free. Wish you success all the way.
Its just been 30 min into the tutorial and I have become a hugeee fan of your teaching sir!!!I am actually practicising your hw tutorials on my own...............Thank u so much!!!!!
This could be updated to contain React Hooks which would be very appreciated :)
Thanksss, i've finished this course and i love how you deliver every material with effective communcation
test
test
You guys don't know how much you gave to us. Thank you Hug you love you. Thumbs Up and salute you
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!!
Worked my way through this slowly over a couple of weeks. Best TH-cam course I've ever followed.
First, you need follow command below:
npm create-react-app my-app
cd my-app
npm start
May God Himself bless you for this course. Really learning a lot.
This is the best meme generator tutorial.
Some people have a "gift", Bob Ziroll is truly gifted at simplifying very complex ideas when he is teaching technical concepts.
If i get a job in react after this ( my interview is on 19th Aug 2019 ) i'll personally message and pay you for the tutorial sir! amazing work!
Best of luck gearing up for your interview. You've got this.
Best of luck bro, please share your experience what they aske you.
@@freecodecamp Thanks a lot for your wishes sir....the interview focused more on my skills on javascript, im sorry i was'nt able to crack it.
@@monalpatel2009 Thanks Monal, the interview was'nt that good. focused on javascript and thus wasn't able to crack it.
@@paanshulchowdhary7264 what kind of questions did they ask you?
Star wars API is now .dev instead of .co, 3:28:54
How do you set up?
I like the course and scrimba is great but 2:39:40 that task is waaaay harder than the previous one. There was no mention before about passing a method with props and what's the meaning of this in that passed function. I've been doing Vue and it is much simpler I have to say.
Training wheels - removed 😂
This is the best Programming Tutorial I have ever taken in my life. Thank you man.
Great video! Just wanted to add an update for anyone watching: In older versions of React (before 16.8), only class-based components could use state. However, with the introduction of hooks in React 16.8, functional components can now manage state using the useState hook. This makes functional components just as powerful as class components for handling state and lifecycle logic. For new React projects, functional components with hooks are generally preferred. Thanks for the explanation, though-it's still useful for understanding the evolution of React!
Nice to see that someone give tutorial for free, but it is unusable if we couldn't configure the React project. Please, can you show us how to configure dependencies and all other stuff to write simple Hello World? Tnx
To get React to work, add these script tags before the closing tag in your HTML file:
Yeah, that part is missing a bit, true.
@@freecodecamp Even I have these script tags and in my js file I have these import React from "react"
import ReactDOM from "react-dom". Still I dont get any text in div root. Here is my code . Can you please help me?
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(Hello , document.getElementById('root'));
I didn't give you all the info before. React requires a build process. If you are building locally, the easiest way to set up the build process is by using create-react-app. Get it here: facebook.github.io/create-react-app/
If you are using scrimba.org, click the gear in the top right corner and select 'add dependency...'. First add 'react', then add 'react-dom'. Everything should work after this.
@@desequilibradoo u gotta use babel... react dependency used in video include react in it... but you are using unpkg cdn...
make below two changes if you havent yet...
ReactDOM.render(here it is,document.getElementById("root"));
This tutorial is really good!! Appreciate your teaching skills 👍
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 :(
You're supposed to use array.map((element)=>{
return (
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
This is because you are trying to return a object with keys, probably you already write this "{this.state.dietaryRestrictions}" somewhere.
I can't stop thanking you guysssss
Amazing video and with no ads!!! You are helping everyone who wants to change his life coding
i have gone through a lot of tutorials on youtube, but the way you teach is something else and this scrimba is very cool. Thanks a lot man
I'm so glad you've found it helpful! :)
3:07:06 don’t mind me I’m just leaving this comment to see where I left off.
don't mind, just reminding you to complete this course :)
@@okeyD90232 don't mind, just reminding you to watch this course again to memorize important points.
@@anurag.tiwari.official dont mind,just reminding you to watch this course atleast once before placement.
@@shivamjaiswal7950 don't mind just reminding you again
don’t mind. just remind you to complete the course.
Just completed this course, Thanks Mr. Bob and freecodecamp for bringing such great study material for everyone to learn and take their skills to the next level. Thank You from the bottom of my heart!!!
how to setup React js and which editor are you using. From where these files like index.html, style.css and index.js comes from. please explain anyone
try this:
medium.com/@muthuks/setting-up-your-project-without-create-react-app-872ed782852a
I already thought I'm the only one who interested in this question
@@wethekidsz update your npm and use npx create-react-app my-app :)
webstorme is better for reactjs coding . and coming to point its on .js files and .css .also we have already have .html file and nodeJs files. by using to create npx create-react-app (add) anyname of project file
Best React tutorial available in TH-cam. Great explanations. Thanks a lot .
Dislikers are those who paid huge amount to learn reactjs but found its available for free and that too with better teaching quality... Thanks to this channel...
Wrong. From those who knows better than react LOL
U need to take time and do the exercises!
*2x speed enabled*
Is this the best tutorial on React JS? Yes!
Have I learned from this? Yes!
Are you the best teacher on TH-cam? Yes!
Am I going to like and subscribe? Hell Yeah!
Hey great tutorial!
Just one thing: in React Todo App: Phase 6 the app doesnt work properly while having React.StrictMode on since it runs the app twice. Any solution to that?
+1
remove the and inside index.js
Colorscream no.. Check the link I sent from 1st reply
@@BrothyO there is no reply with a link, probably hidden comment due to links
Colorscream ohh, my bad.
Just check the link bellow the video. The author explains it in his course
Awesome ... Nice tutorial... Thankyou and thanks TH-cam for recommending this tutorial channel...
Hi Krishna, have you completed any projects using react? Are you a fresher and open to job opportunities in web development?