Pro-tip, if you want to hate life, write reactDOM instead of ReactDOM in the first basic exercise and spend a day trying to figure out what you did wrong.
@@burakass5399 I don't really know, but the video is 12 hours, so in addition to that, I probably spent like 30-40 hours coding and following along, doing every prompted challenge and really trying to comprehend the coursework.
I am so grateful that I made my first donation on UA-cam finished till the first half of section 4 and it has been great so far and wanted to say that you guys are amazing!
3:47:39 map method 4:36:25 end of Props and map ! 4:36:46 solo project (Travel journal) 4:46:40 Beginning of dynamic sites 4:58:20 Event listeners 5:18:35 States 5:41:30 Making a counter using useState 5:46:52 Changing state with a callback function 6:21:10 Complex state : Update state objects 6:37:54 Meme Generator: Setting state from child components 6:50:54 Meme Generator: boxes challenge part -1 7:04:43 Changing colors of div using On/off property inside object 7:22:53 Boxes challenge Part 5 7:28:46 Build a meme generator: Conditional rendering: && 7:35:27 Conditional rendering:&& Practice 7:37:13 Conditional rendering: ternary 8:07:25 Controlled Components
day 1 --> 30:42 day 2 --> 1:10:55 day 3 --> 1:24:40 day 4 --> 1:46:04 day 5 --> 2:24:23 day 6 --> 2:43:27 day 7 --> 3:36:12 day 8 --> 4:46:32 day 9 --> 5:54:25 day 10 --> 6:44:29 day 11--> 8:07:20 day 12--> 8:39:45 day 13--> 9:40:05 day 13--> 10:46:30
7:28:21 nobody haven't motivated me this much, he speaks like he wants me do that from the bottom of his heart, and his voice tone, I'll do it with no exception. Thank you for doing such a great work, I loved the way you teach.
I paused at 10:45:00 when the Tenzies game was explained and proceeded to try and make the whole thing without watching another single second of video, and, thanks to your flawless teaching techniques I managed to do the whole thing on my own! I didn't even know what React was 3 days ago, thanks a lot Bob
Finished the course over a course of a month. Kept coming back to hear what my friend Bob has to say about React 😂. "pause on the screecast and work on this challege" pause I did. Thanks a lot for the incredible course!
The way he teaches is amazing. I love how each topic flows so easily to the next, it answers the 'why we should learn this'. I wish public schools would teach like this, you can tell a passionate teacher from those teaching for paycheck.
Guys, I'm not kidding, my client just approached me with a requirement for a React Website and FCC just dropped this brilliant tutorial on it! The timing is amazing!
I have a very good command of CSS, thanks to this course. My react knowledge has gone to a whole new level. UNREAL!!!! This is my first time of leaving a comment on a youtube channel.
@@kennedymathenge6716 I think he is saying that to show how impressed he is with the video. Like saying “ I never leave comments but this video was so good, I had to”
Although it is almost a month since I started this course, I have not done the course yet. I am enjoying every activities and projects. Now I am on 8:47. What an amazing course for a begginers
Thanks, I've watched this video for 40 minutes and then discovered that you can watch the same content right in the Scrimba but with ability to pause and edit the code at any point. That's a cool interactivity level!
@@fieryscorpion it took me exactly one week. I could have finished it faster but the goal was to learn and not to just watch a 12 hour tutorial without doing the exercises and practices
Hands down the best course so far!!! It's long but I love that every basics is covered by live app building and I know exactly why I am using props/states etc.
I'am an hour into the course and i must this is one of the best courses on react that I've come across. It is nicely constructed and the pacing is balanced too. It's not too fast or too slow. My thanks to the creator Bob Ziroll and freecodecamp.
Hands down the BEST react tutorial I have ever done it ultimately boils down to the teaching methods Bob uses Love the way Scrimba platform is set up too Couldn't praise the Scrimba team enough!! Big ups!!
i love how he explains everything so simply. its like richard feynman going from counting numbers on his hand to calculus in 4 pages of continuous logical thought.
i have actuallt took this course on scrimba, and tbh i can say he's the best teacher i have ever seen in my life, i have learned sooo much about react from him, and forever will be greatfull
Brilliant way of teaching, reinforcing all the concepts - you're a star! Glad I discovered this react course - far more effective than all others I have seen and I'm an experienced dev!!
The thing I like about Bob Ziroll's teaching is spaced learning and repetition. I took one of his React course on scrimba a couple months back ( one of the best beginner friendly courses on React ) simplifies everything from state to props. He's such a gem of a teacher.
This is definitely the best React Course! Hands down best teacher, excellent pace and concise, to the point simply explained concepts, in a perfect order so any beginner can follow. If you don't understand something, just go back a few chapters and do the exercises again, after all, it's just practice!
This hands down, by far the best course I’ve found. It’s the combination of the brief and insightful instructions with constant challenges. I’ve been trying to learn web dev for a while now and feel like I’m progress is finally starting!! Thanks 🙏🏾
I must say, this course is soooo good. Every video first forces you to think and apply what you have learned. Every concept has been broken down to simplify and make it easier to understand. The scrimba site has been built so well. Haven't seen anything like this where we can interact with the video live. I like the way we can pause and the code is ours. Thanks Bob for this wonderful course. You are a very good instructor :)
What I love about this course is that it includes the "why" things are the way they are. Most tutorials out there just write the code but don't explain the reasoning behind it.
Never comment but felt compelled because of how spot on this course is. Getting so much out of it and can't wait to power through the rest. Thank you a hundred times over!
I remember when I first tried learning React from another instructor, I was so demotivated by the time we reached props, that I gave up. But MAN is this guy awesome. Props now stuck to the back of my head!
Me too! I think the key difference is that this guy teaches each lesson with very small projects as a base. It's easier to follow along and understand how all the functions work together.
I just completed the course using VS Code, never got on Scrimba. I can tell you Bob'teaching is the best ever. He dissects each topic slowly and tops it up with little practical challenges. Dont skip those and you will get the most from them. And dont just fast-forward to "his" solution. Try it yourself first. Thanks, for your genorisity, Bob. Much appreciated🙏
I was spending like 25 mins to get started lol. I think they removed that babel script link , but its still needed. Ps. first 45 mins into the video. And this has been amazing so far. I love that this is a really beginner course. It really starts from 0. Not like other courses. "Beginner" course and then shows how to make a snake game without explaining anything.
This is the best React course you can afford)) I finished the first version of this in 2019 on Scrimba and successfully got the job as a Frontend developer! It’s very clean, simple and capaciously course, thanks to Bob for this masterpiece! Don’t even think about not to finish this, guys)
@@alchemistmd2422 I am working as a software engineer at microsoft (level 1) and i have a degree in mechanical engineering. So, it doesnt matter if you have a degree in CS or not
@Tony CoopeR please give me suggestions should i start this course in order to get a job as part time. Note: I've already learnt some react concept but lemme know from you as you have experience.
This is the best online course I have a taken, as a teacher myself I have to say you are the best. I will use your teaching methods too. I am super grateful. I learnt more than react from you. God bless you.
Finally I have completed this course and Iam very happy that I have coverd many difficut topics from it. Now I can say that this is the best course in the world on React. Everyone should watch and explore this great course. Special thanks to Bob Ziroll and Free Code Camp team who made our coding journey very easy 🙏❤️
I watched the entire course all 11 hours of it. I have to say this is by far one of the best courses that I've seen on any platform. If you're interested in learning react please check this out it was well worth it!
would you recomment this to someone who knows vanillasjs and knows bits and pieces of working with react. Your view would be extremely appreciated!thanks
@@victorvondoom2350 yes definitely this is a great course it’s not super detailed though so depending on how much time you have there are a number of Udemy courses I’d suggest as well Brady Traversy React Front to Back or Stephen Grider’s React course is excellent too but each is very long and extremely detailed but you build some great projects.
This has to be the best course for the React beginners. I have tried learning React from a Udemy course for the last 1.5yrs or so but only returned frustrated. THIS is how every online course should be. Thank you!
@@LeandroReisPlus it was a course by Maximilian Schwarzmuller. Many people/students like him and he has really good ratings as well. But his style of teaching didn’t work for me
@@Mayankdusy i have seen this full video. This is probably enough for the entry level job provided you do the challenges in this video. Also, you will probably find it difficult to understand the advanced concepts, which are not in this video, without understanding the basics from this video
Am just 2hours into this course...and most honestly I can say that this is one of the best course on web dev i've ever used... hats off to FCC and Bob Ziroll💓
After watching for 5 hours, now I'm fully confident to do the Solo project. I had never got such a confidence ever since I'm learning React from the past 1 compete year...
13:51 and I believe this is gonna be one of the best course as it seems we'll learn like we do in school as the instructor is guiding what we have to do instead of just going all the way to the end just writing and reading code . ❤️❤️❤️
This is going absolutely amazing so far, getting my hands on the keyboard and trying out the challenges has been a complete success in developing my react skills. Without a doubt, the best beginner friendly react course that leads to expert level react skills.
Perfect. The pace of the tutorial and the parallelism between passively and actively learning is just phenomenal. Thanks for another great tutorial! Happy coding everyone!
Hi Bob, This teaching method is absolute magic. Takes me back to my school days to remember some of my teachers who taught with absolute passion. I would like to see tonnes of your courses in all aspects of full stack development. You have etched React in my memory for a life time. Bravo!!! Take a bow sir...
i haven't even got past the intro yet, but the fact that this whole course is on an interactive website, and completely free is insane. What an awesome thing to do, thank you to everyone who helped put this together!
Couldn't agree more! Some 'learning' platforms charge you $1-5k or even higher for a crappy platform with even worse delivery and often outdated curriculum. This is far better than any course I've encountered
Man it's insane. This course is out of the world... Everything is perfect, i'm from france i don't even master english but his voice sounds like god speaking to me, universal stuff. Give this man a medal
hey i tried changing to a local machine after the notes app but it only shows the "create one now" button and if you click it, it just goes to a blank screen. i opened the terminal to check and there were errors. did you get this issue?
I can say Bob is the best constructor i've ever seen, by nature, i love challenges, and Bob teaches the way i like, not like other gurus who uploads hundreds of hours course materials for people to watch what they are doing out there. Hats off for you Bob Ziroll. I have practices my CSS skills also besides React))
This is an amazing React tutorial. I have struggled to understand props watching several tutorials but just couldn't wrap my head around it. Bob has presented the concepts in a composable way, building the concepts in bits to form the whole body of the subject. Thank you for this free course, I recommend it strongly for anyone trying to figure out how things work in React.
@@chinchuthomas7 first check the console for errors. Then explain what exactly is hapenning. Also, youtube isnt good for support. Remove new code until it works again and you can isolate where it went wrong.
I'm halfway through this course using Scrimba platform. I just came back here to comment on how really helpful and effective this course is. Best instructor online I ever listened to. I would trust Bob with my life 🤣
@StuartRidout same here The very first react fun facts about react project is not working for me I started with scrimba after this project it is paid website that really sad Once I was not able to figure out what was the mistake in my code I literally copy pasted the whole code still I was not getting output. Teaching wise I had no issues.
I have tried numerous courses, none of them bad, but this one was the best. If you are truly honest with yourself, do all the challenges and for the love of yourself don’t rush. I did this course in one month. Everything that was shown i learned it, and remembered it. Take it slow.
This one is the best react course I'm stumble upon. I had followed many other react courses but this one is different. The way Bob teaches is amazing. Right now I just finished the second project from this course and it help me with my react learning and also help me to pass out from my fear of CSS. Thank you so much
@@ikeodira4761 in the starting of tutorial bob showed us how to use figma design, you need to check the properties of design on the right side pane window and apply those properties using CSS in your project. Hope this will help.
I really enjoyed Bob's teaching. Helped me to understand React better. Based on this beginners course I am really thinking of buying advance react course!
This tutorial is really good, anyone who is a beginner in react, this course is for you. Bob Ziroll is really good guys trust me, this tutorial contains exercises and a projects so i don't think there will be much tutorials like this. Thanks @Scrimba.
I'm 1/3 of the way into the course, so far. It's been great. Only complaint is the constant switching between projects doesn't work well if you're running React locally. If I knew from the start that I should create a separate React project folder for each project we're working on because we'd be transitioning back and forth between them, I would have done that. But I didn't realize we would do that and so I just deleted old code and replaced it with code for the current project, lol.
I really hope they make a Laravel course just like this one. This type of teaching helps me to remain engaged and really teaches me the writing and stuff. What an amazing course, and to think this is free! Nuts!
Hey bro nice to hear this but i wanted to know for this course being outdated ever got you in trouble with the projects? Should I go on with this one or find some updated course ?
I am watching this course on Scrimba and believe me if you are not, you are missing out alot. This course actually saves you from "Tutorial Hell" and forces you to actually write the code instead just watching the tutor write it all for you and you just predending to get it all. Amazing Job Bob Ziroll and thanks Scrimba aswell!
Back in 2018-19, I took the original Bob's course and perhaps the only react course I ever took to learn react! Can attest to his quality cuz he's the GOAT!
@@KejriwalBhakt I mean not necessarily work on solo projects, can do group projects as well. But make sure you do make something using React after this course.
This is the best React tutorial I have ever seen. The good thing is that ,he not only taught us how to write code ,but also made us to write code. Ofcourse there are many concepts like react router dom,reduxtoolkit etc etc....,but this is the best place to start with react.Thank You soo much😇😇
Thank you very much Bob for this amazing learning opportunity! I was struggling to learn React and lacked the motivation to use it before, but thanks to this video I finally managed to understand why React is used by many companies and I made my decision to motivate myself to move from LAMP to MERN teck stack for good and start creating applications with it. I already updated my LinkedIn profile and my resume and I noticed this is drawing attention of more recruiters on the network!
Apart from you, everyone who teaches programming does not tell us about the concepts, they just write the code and expect us to copy it. You are explaining everything making it crystal clear to beginners. I'll be honest, before watching this video, I was not 100% confident with props. Now I actually understand it so well that I can explain it to someone else. Thanks, you are amazing.
I did struggle a lot to learn React. A lot of wasted time. The problem? I did not know the basics of Javascript in first place. You need to walk before you can run. So I took a few very basic books (books, not complex tutorials!) and learned the fundamentals. After I learned the basics of Javascript, learning React became much easier. Edit: For those asking about the books, for the very basics I learned with Javascript In Less than 50 Pages. And to develop my knowledge I learned with Head First Javacript Programming.
Thought I'd make notesfor those following along in 2023 - - react v18 changes the way the root is rendered slightly and the course being done/followed on Scrimba adds small video updates in to explain these changes since the course was made so you can continue following along without being confused by errors that might start poping up in some lessons. - Even if you're following along with a local IDE, I would suggest watching the tutorial through Scrimba itself, it's pretty interactive and helps a lot with actually applying the knowledge before using your IDE
i was trying to learn via the IDE but im facing a few issues right in the beginning like "Cannot use import statement outside a module" or "unexpected token
And I would suggest to skip this course completely. They are pushing you to use their platform scrimba which is useless because you will never use it in the future to develop actual apps. A lot of things works differently when you are in local IDE. The further you go in this course the more problems and errors you will have in your local IDE. A lot of knowledege is scrimba specific and will not work when developing your apps the correct way in VScode for example. Using scrimba just adds another layer of complexity and wastes a lot of your time because you will have to constantly google for something.
@@Astamor In terms of learning actual react i disagree with you. Scrimba's abstraction of building the folders and files actually helps focusing on important react concepts right on. It is true that if the tutorial was made on an IDE it would be better in terms of preparing us to the real world and building react apps locally, but that would come with the price of people loosing twice the time just configuring everything in their machines for each coding exercise. I actually prefer using Scrimba for learning (which is the purpose of the video). Then when finish and want to build an app i just do a quick search on how to configure it. Surely will take less time than configuring each coding exercise from the tutorial.
@@Astamor "Constantly googling for something" is basically the mantra of any software engineer, so I'd recommend getting used to it 😂 I can definitely understand where you're coming from, and there certainly are some differences in how things run on Scrimba vs. the real world. But the Scrimba platform isn't intended to be a place for writing production-level code, the same way no one is writing their production code on Leetcode or other code challenge sites. Its intent is for learning. I certainly could improve the preparation I give people for following along on their own machine, but in my 9 years of teaching coding, I've found that students often get demotivated when you toss them into the deep end of webpack configs and setup process, and learn less because they get hung up on those administrative things. It's better to have a "quick win" in understanding the fundamentals, and then learn those details as they go forward. And if you hate Googling for answers, you might be in for a rough ride no matter what resource you're using to learn 😬
@@bobziroll the course should target people with a generalized IDE. That you get stuck after one hour in if you dont use their IDE makes the course a lot less valuable.
It's just a perfect react tutorial for me . Thanks bob for your amazing teaching skill . Good thing about this course is that he teaches us react as well as css
Bob, you cleared my long struggle with useEffect effectively explaining what side-effects are and internal state sync. I can't appreciate enough the quality of this one. You took time to explain the basics that everyone rushes into. Thanks again and best wishes
Excellent Tutorial. If you follow the instructions properly and do the challenges, it teaches you how to think in react when you encounter a problem and solve it easily. Thank you Bob and keep up the good work. Your teaching is great !!!!!
I still remember when I started learning react by watching your own react video couple of years ago. Bute here I am again watching the new react tutorial from you again. It is because I like the way you teach really. Thank you sir, thank you very much...😍😍👃
React is one of the technologies I'd planned on learning this year after doing alot of backend work with python and some bootstraping and i think this course is just so much of a good thing that has happen so far to me. Thanks alot FCC and SCRIMBA we really appreciate.
I'm over 9 hours in and still going strong!!! Thanks for such high quality content, amazing tutorial! Definitely TAKE IT SLOW, and TAKE BREAKS. Every side challenge is gold! For those doing this locally with react-app, it's well worth the effort to set up each project and challenge from scratch. You'll become fluid in no time I promise ;-)
So you did use the react-app, I imagine? If you did, I'm having some troubles with the images. Around the 4 hours "minutes" mark we try to populate the airbnb taking data from the array. He said, simply move the images directory to the public one and everything should work. It's not working for me. I tried other stuff and I'm going to look online but maybe I'll be quicker to ask you. How did you solve the images "problem" while using react-app locally??
At the end I moved the directory (images) to public + assigned the string in the data array accordingly, i.e. coverImg: "images/myimage.png" and it worked. I found this video, among others is not bad (leaving it here for others if needed) : ua-cam.com/video/U07wzhfu66M/v-deo.html Basically I used the third method shown in the video but, again, in the array data.
@@nesibekaratas3749 For me, I took my time, because I was also brushing up on my CSS, and had been working on a django + react tutorial at the same time. But if you were very dedicated you could do it in a week. I would recommend really spending the time on the mini challenges, and doing them each a couple times so the concepts solidify. Happy coding!
@@MrDarkNightmare666 Yes! I struggled with what to do too. I ended up keeping my images folder in my src directory (and did not move it to public). In the data.js file, I imported the images there instead (I used my own custom images for this, once you import the image as an object, it is placed in data without quotes) --- so in data.js: // START CODE data.js import mike_card_image from "../images/mike-card.jpeg"; import vern_card_image from "../images/vern-card.jpeg"; const data = [ { id: 1, title: "Life Lessons with Mike", description: "Mike teachers you how to deal with lots of crap going wrong.", price: 288, coverImg: mike_card_image, stats: { rating: 5.0, reviewCount: 420, }, location: "USA", openSpots: 10, }, { id: 2, title: "Build a Successful Tech Startup with Vern", description: "Vern teaches you how to build a successful startup and invest the returns, even if you are a cat!", price: 1500, coverImg: vern_card_image, stats: { rating: 5.0, reviewCount: 8234, }, location: "Vegas", openSpots: 0, }, ] export default data; // END CODE And then in the App.js, I imported data.js and it worked like normal! I did NOT move the images folder into public (I tried and it didn't work). But I simply referenced the images in the data.js (which I put in a folder called db that lives along side css, images, components), the images imported and were referenced fine! --- so in App.js: // START CODE App.js import React from "react"; // Custom Components import Navbar from "./Navbar"; import Hero from "./Hero"; import Card from "./Card"; // Database mock JSON and CSS Styling import data from "../db/data"; import "../css/styles.css"; // Map the data (the image objects presented in data will transfer through props) export default function App() { const cards = data.map((item) => { return ; }); return (
{cards} ); } // END CODE Hope this helps... happy coding!
🎉 Watch the updated version of this course: ua-cam.com/video/x4rFhThSX04/v-deo.html
Pro-tip, if you want to hate life, write reactDOM instead of ReactDOM in the first basic exercise and spend a day trying to figure out what you did wrong.
😂😂😂😂😂 oh man thats brutal and hilarious, yet very relatable
I make the ReactDom instead of ReactDOM error multiple times and spend hours figuring out why my code doesn't run😭
Your not alone!! 😆
felt same suffering but only for half and hour
😂
Finished the course and onto expanding Tenzies and getting into this solo project. Great course, thanks again for your quality work and effort.
How many days it took you to complete?
@@burakass5399 I don't really know, but the video is 12 hours, so in addition to that, I probably spent like 30-40 hours coding and following along, doing every prompted challenge and really trying to comprehend the coursework.
is it basics or discusing about context and hooks . i am also stuck with context
Love the teaching style, and the pacing. Very quality stuff here. Only a few hours in, can't wait to finish. Thank you much!
Hi...I am am having an Issu with ReactDOM.createRoot(hello, document.getElementById("root")
Shows Error-unexpected token. '
@@lawrencenadar25 Several things wrong here.
ReactDOM.render(, document.querySelector('#root'))
@@lawrencenadar25 Maybe something like this:
let page_body = A heading
ReactDOM.render(page_body, document.querySelector('#root'))
@@lawrencenadar25 ReactDOM.createRoot(document.getElementById("root)).render(*what ever it is you wanna render*);
How do I get the memedata.js file please help 5.5.35
I am so grateful that I made my first donation on UA-cam
finished till the first half of section 4 and it has been great so far and wanted to say that you guys are amazing!
3:47:39 map method
4:36:25 end of Props and map !
4:36:46 solo project (Travel journal)
4:46:40 Beginning of dynamic sites
4:58:20 Event listeners
5:18:35 States
5:41:30 Making a counter using useState
5:46:52 Changing state with a callback function
6:21:10 Complex state : Update state objects
6:37:54 Meme Generator: Setting state from child components
6:50:54 Meme Generator: boxes challenge part -1
7:04:43 Changing colors of div using On/off property inside object
7:22:53 Boxes challenge Part 5
7:28:46 Build a meme generator: Conditional rendering: &&
7:35:27 Conditional rendering:&& Practice
7:37:13 Conditional rendering: ternary
8:07:25 Controlled Components
These time stamps are so needed. Thank you.
Man, it saves a lot of time.❤
Real hero🫶
day 1 --> 30:42
day 2 --> 1:10:55
day 3 --> 1:24:40
day 4 --> 1:46:04
day 5 --> 2:24:23
day 6 --> 2:43:27
day 7 --> 3:36:12
day 8 --> 4:46:32
day 9 --> 5:54:25
day 10 --> 6:44:29
day 11--> 8:07:20
day 12--> 8:39:45
day 13--> 9:40:05
day 13--> 10:46:30
Is this tutorial is more enough to become a pro in react
@@matrix_voyager it's more like of an introductory course..
@@ansh4018 then how to learn full course of react
@@ansh4018where can I find job ready course
@@ansh4018if I'm doing mern. I need to know everythibg of react?
7:28:21 nobody haven't motivated me this much, he speaks like he wants me do that from the bottom of his heart, and his voice tone, I'll do it with no exception. Thank you for doing such a great work, I loved the way you teach.
I paused at 10:45:00 when the Tenzies game was explained and proceeded to try and make the whole thing without watching another single second of video, and, thanks to your flawless teaching techniques I managed to do the whole thing on my own! I didn't even know what React was 3 days ago, thanks a lot Bob
Hey brother, I find it really tough from the start of the boxes challenge. Its going over my head! How can I simplify it?
Finished the course over a course of a month. Kept coming back to hear what my friend Bob has to say about React 😂. "pause on the screecast and work on this challege" pause I did. Thanks a lot for the incredible course!
You make learning React so simple and pleasant . Thank you for this tutorial ❤
Why is he saying model 1 though is there more to learn or what
The way he teaches is amazing. I love how each topic flows so easily to the next, it answers the 'why we should learn this'. I wish public schools would teach like this, you can tell a passionate teacher from those teaching for paycheck.
We wouldn't have been suffering if this were the case!
You learn 5 minutes of React in the first 90 minutes 💀
Guys, I'm not kidding, my client just approached me with a requirement for a React Website and FCC just dropped this brilliant tutorial on it! The timing is amazing!
Hey Shivansh! Are you a fresher or an experienced developer ? Are you open to full-time roles in web development right now?
@@shivanigaddagimath6105 I am a beginner I'm interested in interships
I have a very good command of CSS, thanks to this course. My react knowledge has gone to a whole new level.
UNREAL!!!!
This is my first time of leaving a comment on a youtube channel.
What's the big deal with leaving a comment. nkt!
@@kennedymathenge6716 I think he is saying that to show how impressed he is with the video. Like saying “ I never leave comments but this video was so good, I had to”
where did u learn css from?
@@ChayK11freeccodecamp is good, so is Kevin Powell & developedbyed
Although it is almost a month since I started this course, I have not done the course yet. I am enjoying every activities and projects. Now I am on 8:47. What an amazing course for a begginers
Thanks, I've watched this video for 40 minutes and then discovered that you can watch the same content right in the Scrimba but with ability to pause and edit the code at any point. That's a cool interactivity level!
Today, I just finished the course.
I learned more in this course than I did at university lol
I'm very grateful for this amazing course, thank you ^~^
Well universities teach computer science not react, sooo lol. 😝
@@christianmosley5573 they only teach theory 😆
day 1: 59:57
day 2: 2:06:18
day 3: 3:23:10
day 4: 4:18:58
day 5: 4:41:38
day 6: 5:37:51
day 7: 6:06:37
day 8 : 6:44:25
Finished a 12 hour tutorial and completed all the challenges. One of the best react tutorials for beginners, thank you for this tutorial!
How long did it take you to finish this?
@@fieryscorpion it took me exactly one week. I could have finished it faster but the goal was to learn and not to just watch a 12 hour tutorial without doing the exercises and practices
so is it still relevant in 2024 on this version of react?
@@BmwFacts-h4d yes
can u please tell me how to add dependencies without CDN's
I'm very thankful for this course, this guy is not only teaching me to use react js but also teaching me how to read and write a code.
Hands down the best course so far!!! It's long but I love that every basics is covered by live app building and I know exactly why I am using props/states etc.
I'am an hour into the course and i must this is one of the best courses on react that I've come across. It is nicely constructed and the pacing is balanced too. It's not too fast or too slow. My thanks to the creator Bob Ziroll and freecodecamp.
Yo muy stupid
lol its wasted after that 1st hour
@@zaidtehsin7096 u ahoe
how many react course did you watch to make this claim lol
Hands down the BEST react tutorial I have ever done
it ultimately boils down to the teaching methods Bob uses
Love the way Scrimba platform is set up too
Couldn't praise the Scrimba team enough!! Big ups!!
Couldn't Agree more. I cant express how much I love the scrimba platform. wasted a lot of time searching for the best course. Huge thanks to the team
No way!! This is the second time FCC uploaded just the course I really needed at the right time
if I had a nickel for everytime I see this comment on this channel.
@@kskfernando2945 Yeah, it's gotten to the point that it physically hurts me every time i see that comment.
i love how he explains everything so simply. its like richard feynman going from counting numbers on his hand to calculus in 4 pages of continuous logical thought.
i made it till 9:49 hours in a week, following up doing the challenges, it's absolutely amazing thank you
i have actuallt took this course on scrimba, and tbh i can say he's the best teacher i have ever seen in my life, i have learned sooo much about react from him, and forever will be greatfull
How much it cost?
@@adeni4359 are you serious?? It's totally free!!! Go check that out!
@@adeni4359 free
ua-cam.com/video/79gTz7cCUdk/v-deo.html
@TENSHIY Are you employed as a Frontend/React developer now thanks to the course?
Brilliant way of teaching, reinforcing all the concepts - you're a star! Glad I discovered this react course - far more effective than all others I have seen and I'm an experienced dev!!
The thing I like about Bob Ziroll's teaching is spaced learning and repetition. I took one of his React course on scrimba a couple months back ( one of the best beginner friendly courses on React ) simplifies everything from state to props. He's such a gem of a teacher.
ua-cam.com/video/79gTz7cCUdk/v-deo.html
wow impressive comment
Yes, I've just finished his Scrimba course (Learn React for free) and I must say he is amazing teacher. My React skills skyrocketed in one week! 😮
@@dopetag which one to choose website one or this one or they are the same?
@@motichoor69 I did the one on their website
This is definitely the best React Course! Hands down best teacher, excellent pace and concise, to the point simply explained concepts, in a perfect order so any beginner can follow. If you don't understand something, just go back a few chapters and do the exercises again, after all, it's just practice!
This hands down, by far the best course I’ve found. It’s the combination of the brief and insightful instructions with constant challenges. I’ve been trying to learn web dev for a while now and feel like I’m progress is finally starting!! Thanks 🙏🏾
Congrats on finishing the course. I just started today, and my preview does not show the updated message! Oh the joy of learning, lol
@@lindashrewsbury297 ☺
Bob you're an absolute genius. The pace of this course is just perfect. We are grateful
I must say, this course is soooo good. Every video first forces you to think and apply what you have learned. Every concept has been broken down to simplify and make it easier to understand. The scrimba site has been built so well. Haven't seen anything like this where we can interact with the video live. I like the way we can pause and the code is ours. Thanks Bob for this wonderful course. You are a very good instructor :)
I want to ask you if this course is still re;evant for 2023 or should I see an updated one
What I love about this course is that it includes the "why" things are the way they are. Most tutorials out there just write the code but don't explain the reasoning behind it.
Do you get? Bob is really breaking those hard pieces into smaller chunks for beginners to able to grasp and i really love that.
Very...very perfect tuitorial to learn React.
Trust me guys, i've tried two more tutorials before finding this masterpiece.
This one is "THE BEST".
Never comment but felt compelled because of how spot on this course is. Getting so much out of it and can't wait to power through the rest. Thank you a hundred times over!
I remember when I first tried learning React from another instructor, I was so demotivated by the time we reached props, that I gave up. But MAN is this guy awesome. Props now stuck to the back of my head!
Me too! I think the key difference is that this guy teaches each lesson with very small projects as a base. It's easier to follow along and understand how all the functions work together.
An hour and a half and everything until now is so clear, amazing! Looking foward to finish it. Great teacher! Tks so much! 🙌🏽
Did you finish it? Was enough to learn react?
I just completed the course using VS Code, never got on Scrimba. I can tell you Bob'teaching is the best ever. He dissects each topic slowly and tops it up with little practical challenges. Dont skip those and you will get the most from them. And dont just fast-forward to "his" solution. Try it yourself first. Thanks, for your genorisity, Bob. Much appreciated🙏
Hi.. How do I use vs code... Is there I file to download
Cant use it either.
How in the world did you get it to work with VSCode I need help
please explain how you were able to style the page to have a 100% height within the viewport
I took this course on scrimba, and I was amazed how easy to understand and detailed the content was. I'm so grateful.
I was spending like 25 mins to get started lol. I think they removed that babel script link , but its still needed.
Ps. first 45 mins into the video. And this has been amazing so far. I love that this is a really beginner course. It really starts from 0. Not like other courses. "Beginner" course and then shows how to make a snake game without explaining anything.
This is the best React course you can afford)) I finished the first version of this in 2019 on Scrimba and successfully got the job as a Frontend developer!
It’s very clean, simple and capaciously course, thanks to Bob for this masterpiece! Don’t even think about not to finish this, guys)
how did you applied at that time for a job, do you have a CS degree?
@@alchemistmd2422 i don't have a CS degree, but I live in Russia and this is not a problem) and I've always worked for fulltime, not freelance
@@alchemistmd2422 I am working as a software engineer at microsoft (level 1) and i have a degree in mechanical engineering. So, it doesnt matter if you have a degree in CS or not
@Tony CoopeR please give me suggestions should i start this course in order to get a job as part time.
Note:
I've already learnt some react concept but lemme know from you as you have experience.
@@hikmatbangash4310 yes, you should! It’s a great way to improve your skills, no matter what level you are. Bob explains difficult parts very clearly
I attest to the quality of Bob's teaching, I used his original course on Scrimba to advance my reactjs skills, thank you much sir.
How much it cost?
@@adeni4359 Both old course and new are free, you should take the new course, link to the course is in this video description.
ua-cam.com/video/79gTz7cCUdk/v-deo.html
He looks like an impossibly nice guy. I'm only 8 minutes in, and I know it's gonna be great.
what did you find most useful?
This is the best online course I have a taken, as a teacher myself I have to say you are the best. I will use your teaching methods too. I am super grateful. I learnt more than react from you. God bless you.
Finally I have completed this course and Iam very happy that I have coverd many difficut topics from it. Now I can say that this is the best course in the world on React. Everyone should watch and explore this great course. Special thanks to Bob Ziroll and Free Code Camp team who made our coding journey very easy 🙏❤️
So did I got a job?
how long did it take to complete it??
Bro i know basics of html css and javascript can i directly see this course
Yes it is very easy course to understand.Definitely you should watch this course.@@emperorgaming3704
approximately 20 days@@kon_humein
I watched the entire course all 11 hours of it. I have to say this is by far one of the best courses that I've seen on any platform. If you're interested in learning react please check this out it was well worth it!
Really good for you! FCC was how I got my start in dev. I like to refresh, and this looks great 👍
would you recomment this to someone who knows vanillasjs and knows bits and pieces of working with react.
Your view would be extremely appreciated!thanks
@@victorvondoom2350 yes definitely this is a great course it’s not super detailed though so depending on how much time you have there are a number of Udemy courses I’d suggest as well Brady Traversy React Front to Back or Stephen Grider’s React course is excellent too but each is very long and extremely detailed but you build some great projects.
This has to be the best course for the React beginners. I have tried learning React from a Udemy course for the last 1.5yrs or so but only returned frustrated. THIS is how every online course should be. Thank you!
Can I ask you what was the course in Udemy, if you don't mind? :)
@@LeandroReisPlus it was a course by Maximilian Schwarzmuller. Many people/students like him and he has really good ratings as well. But his style of teaching didn’t work for me
Have u seen this full video ? Is it good enough to getting a job?
@@Mayankdusy i have seen this full video. This is probably enough for the entry level job provided you do the challenges in this video. Also, you will probably find it difficult to understand the advanced concepts, which are not in this video, without understanding the basics from this video
@@24306529 thanks bro for letting me know......i was searching for the react course for past few days now the search is over...thanks👍
30 mins in and he's making it so simple. this is exactly what I needed
Am just 2hours into this course...and most honestly I can say that this is one of the best course on web dev i've ever used... hats off to FCC and Bob Ziroll💓
Best Course Found on Internet. I have almost took 3 to 4 React Course but I found this really easy and useful. Hats off to Bob Ziroll 😍
After watching for 5 hours, now I'm fully confident to do the Solo project. I had never got such a confidence ever since I'm learning React from the past 1 compete year...
bro after this video what more will u do as i am starting js now
what will u do to become full stack developer
13:51 and I believe this is gonna be one of the best course as it seems we'll learn like we do in school as the instructor is guiding what we have to do instead of just going all the way to the end just writing and reading code . ❤️❤️❤️
It will.
right when i wanted to learn it and was browsing courses on udemy you guys drop this. absolutly legends
This is going absolutely amazing so far, getting my hands on the keyboard and trying out the challenges has been a complete success in developing my react skills. Without a doubt, the best beginner friendly react course that leads to expert level react skills.
Are you skilled in HTML and Java ?
@@dinorossi6611 Not in java but in javascript
Perfect. The pace of the tutorial and the parallelism between passively and actively learning is just phenomenal. Thanks for another great tutorial! Happy coding everyone!
Hi Bob, This teaching method is absolute magic. Takes me back to my school days to remember some of my teachers who taught with absolute passion. I would like to see tonnes of your courses in all aspects of full stack development. You have etched React in my memory for a life time. Bravo!!! Take a bow sir...
i haven't even got past the intro yet, but the fact that this whole course is on an interactive website, and completely free is insane. What an awesome thing to do, thank you to everyone who helped put this together!
Couldn't agree more! Some 'learning' platforms charge you $1-5k or even higher for a crappy platform with even worse delivery and often outdated curriculum. This is far better than any course I've encountered
This is the only recommended react course you need. Forget about everything. Special Thanks to the Author of this course.
Man it's insane. This course is out of the world... Everything is perfect, i'm from france i don't even master english but his voice sounds like god speaking to me, universal stuff. Give this man a medal
one more hour of this course left and im moving on ! thank you bob for this honestly ,created so much impact to my and the rest of the world
25 more minutes of this left and im done to be honest ill be needing more practice but this paved a really good way to my knowledge of react
finished , finally. But coming here and there to brush off a few concepts until it instill in me
hey i tried changing to a local machine after the notes app but it only shows the "create one now" button and if you click it, it just goes to a blank screen. i opened the terminal to check and there were errors. did you get this issue?
How get the starting code of notes app
The best React tutorial I’ve ever seen. Explain everything clear and easy to understand stand!
do i need to learn javascript before taking this course or not?
I can say Bob is the best constructor i've ever seen, by nature, i love challenges, and Bob teaches the way i like, not like other gurus who uploads hundreds of hours course materials for people to watch what they are doing out there. Hats off for you Bob Ziroll. I have practices my CSS skills also besides React))
This is an amazing React tutorial. I have struggled to understand props watching several tutorials but just couldn't wrap my head around it. Bob has presented the concepts in a composable way, building the concepts in bits to form the whole body of the subject. Thank you for this free course, I recommend it strongly for anyone trying to figure out how things work in React.
I am about to start this course, does this course require any previous knowledge?
i only know the basics of Javascript and im not sure if thats enough
HTML5, CSS3, JavaScript and ECMA6 script foundations would give a good grasp of the course.
3 hours into this course and i can tell this is the best course i've ever came across..tasks are my favourite part of this course.
WOO I FINISHED IT. DID THE WHOLE LAST PROJECT BY MYSELF AND ADDED SOME ANIMATIONS YOURE SUCH A GOOD TEACHER BOB :D
I'm stuck. Can you help me? My page went blank when I tried the import and export method. what could be the reason?
@@chinchuthomas7 first check the console for errors. Then explain what exactly is hapenning. Also, youtube isnt good for support. Remove new code until it works again and you can isolate where it went wrong.
I'm halfway through this course using Scrimba platform. I just came back here to comment on how really helpful and effective this course is. Best instructor online I ever listened to. I would trust Bob with my life 🤣
2 hrs into the tutorial and this is an insanely good tutorial! Amazing pace and clarity!
@StuartRidout same here
The very first react fun facts about react project is not working for me
I started with scrimba after this project it is paid website that really sad
Once I was not able to figure out what was the mistake in my code I literally copy pasted the whole code still I was not getting output.
Teaching wise I had no issues.
Thank you SO MUCH for this tutorial Bob. This is a very good structured and pedagogic course, I massively enjoyed the whole learning!
I have tried numerous courses, none of them bad, but this one was the best. If you are truly honest with yourself, do all the challenges and for the love of yourself don’t rush. I did this course in one month. Everything that was shown i learned it, and remembered it. Take it slow.
This one is the best react course I'm stumble upon. I had followed many other react courses but this one is different. The way Bob teaches is amazing. Right now I just finished the second project from this course and it help me with my react learning and also help me to pass out from my fear of CSS. Thank you so much
Please can you tell me how you get the figma designs to practice?
@@ikeodira4761 in the starting of tutorial bob showed us how to use figma design, you need to check the properties of design on the right side pane window and apply those properties using CSS in your project.
Hope this will help.
This course is amazing, he explained so many concepts, and so many things clearly. I started this course and I'm glad I did.
I really enjoyed Bob's teaching. Helped me to understand React better. Based on this beginners course I am really thinking of buying advance react course!
This tutorial is really good, anyone who is a beginner in react, this course is for you. Bob Ziroll is really good guys trust me, this tutorial contains exercises and a projects so i don't think there will be much tutorials like this. Thanks @Scrimba.
I'm 1/3 of the way into the course, so far. It's been great. Only complaint is the constant switching between projects doesn't work well if you're running React locally. If I knew from the start that I should create a separate React project folder for each project we're working on because we'd be transitioning back and forth between them, I would have done that. But I didn't realize we would do that and so I just deleted old code and replaced it with code for the current project, lol.
Agree with you
I am doing the practise projects on Scrimba and Solo projects Locally. That helps in handling different practise
I really hope they make a Laravel course just like this one. This type of teaching helps me to remain engaged and really teaches me the writing and stuff. What an amazing course, and to think this is free! Nuts!
Your timing is incredible. I was planning about learning react after my finals. And only 5 days left for my finals
You will fail
@@hassanali-yi4bu bruhhh!!!
Good luck ma turkish brother
@@hassanali-yi4bu :(
good luck on ur exam
I think this the channel only one globe thanks for the UA-cam and all presenters and lecturers. Wishing you all happy and God bless!!!!!
Just finished the entire course on scrimba, and made projects along side, truly a great teacher, thank you so much ❤
Hey bro nice to hear this but i wanted to know for this course being outdated ever got you in trouble with the projects? Should I go on with this one or find some updated course ?
Hey @@vijayaadamane5521! I am in trouble as well. This thing is coming up again and again. Even with the provided code snippets. I am stuck now
I am watching this course on Scrimba and believe me if you are not, you are missing out alot. This course actually saves you from "Tutorial Hell" and forces you to actually write the code instead just watching the tutor write it all for you and you just predending to get it all. Amazing Job Bob Ziroll and thanks Scrimba aswell!
Is it free on scrimba?
@@stevc1122 Yes its free
@@_shirazkhan It seems like 20% of this course is free. After that you have to pay.
Back in 2018-19, I took the original Bob's course and perhaps the only react course I ever took to learn react! Can attest to his quality cuz he's the GOAT!
Is this course enough to get you hired?
@@KejriwalBhakt provided you work on projects and stuff after this on your own, yeah
@@varunkhatri700 On my own, how?
@@KejriwalBhakt I mean not necessarily work on solo projects, can do group projects as well. But make sure you do make something using React after this course.
Hey Varun! Are you a fresher or an experienced developer? Would you be interested in exploring opportunities in web development currently?
A must watch for beginners, intermediates and all those who want to revise or brush up their react skills
This is the best React tutorial I have ever seen. The good thing is that ,he not only taught us how to write code ,but also made us to write code. Ofcourse there are many concepts like react router dom,reduxtoolkit etc etc....,but this is the best place to start with react.Thank You soo much😇😇
Bob I have to admit, this is terrific course on react - you are explaining all the concepts very well. Keep up on good work
Thank you very much Bob for this amazing learning opportunity! I was struggling to learn React and lacked the motivation to use it before, but thanks to this video I finally managed to understand why React is used by many companies and I made my decision to motivate myself to move from LAMP to MERN teck stack for good and start creating applications with it. I already updated my LinkedIn profile and my resume and I noticed this is drawing attention of more recruiters on the network!
Apart from you, everyone who teaches programming does not tell us about the concepts, they just write the code and expect us to copy it. You are explaining everything making it crystal clear to beginners. I'll be honest, before watching this video, I was not 100% confident with props. Now I actually understand it so well that I can explain it to someone else. Thanks, you are amazing.
Exactly
I never was so much proud after watching a video on UA-cam. Best tutorial ever
Had spent two days on this tutorial and it really helped me start working on react, great work and thanks!
I did struggle a lot to learn React. A lot of wasted time.
The problem? I did not know the basics of Javascript in first place. You need to walk before you can run.
So I took a few very basic books (books, not complex tutorials!) and learned the fundamentals.
After I learned the basics of Javascript, learning React became much easier.
Edit: For those asking about the books, for the very basics I learned with Javascript In Less than 50 Pages.
And to develop my knowledge I learned with Head First Javacript Programming.
@kellyGlenndev188 I am currently learning javascript here ua-cam.com/video/8dWL3wF_OMw/v-deo.html before I jump into learning react.
Warning this comment is about promoting a book
although the react uses a lot less of javascript complex methods , but yet for web development venilla js is a must .
bro he clearly said you need basic understanding of js at first place
React is a framework not a language. How can you learn a library without knowing the language. People try to invert the pipes.
Thought I'd make notesfor those following along in 2023 -
- react v18 changes the way the root is rendered slightly and the course being done/followed on Scrimba adds small video updates in to explain these changes since the course was made so you can continue following along without being confused by errors that might start poping up in some lessons.
- Even if you're following along with a local IDE, I would suggest watching the tutorial through Scrimba itself, it's pretty interactive and helps a lot with actually applying the knowledge before using your IDE
i was trying to learn via the IDE but im facing a few issues right in the beginning like "Cannot use import statement outside a module" or "unexpected token
And I would suggest to skip this course completely. They are pushing you to use their platform scrimba which is useless because you will never use it in the future to develop actual apps. A lot of things works differently when you are in local IDE. The further you go in this course the more problems and errors you will have in your local IDE. A lot of knowledege is scrimba specific and will not work when developing your apps the correct way in VScode for example. Using scrimba just adds another layer of complexity and wastes a lot of your time because you will have to constantly google for something.
@@Astamor In terms of learning actual react i disagree with you. Scrimba's abstraction of building the folders and files actually helps focusing on important react concepts right on. It is true that if the tutorial was made on an IDE it would be better in terms of preparing us to the real world and building react apps locally, but that would come with the price of people loosing twice the time just configuring everything in their machines for each coding exercise. I actually prefer using Scrimba for learning (which is the purpose of the video). Then when finish and want to build an app i just do a quick search on how to configure it. Surely will take less time than configuring each coding exercise from the tutorial.
@@Astamor "Constantly googling for something" is basically the mantra of any software engineer, so I'd recommend getting used to it 😂
I can definitely understand where you're coming from, and there certainly are some differences in how things run on Scrimba vs. the real world. But the Scrimba platform isn't intended to be a place for writing production-level code, the same way no one is writing their production code on Leetcode or other code challenge sites. Its intent is for learning. I certainly could improve the preparation I give people for following along on their own machine, but in my 9 years of teaching coding, I've found that students often get demotivated when you toss them into the deep end of webpack configs and setup process, and learn less because they get hung up on those administrative things. It's better to have a "quick win" in understanding the fundamentals, and then learn those details as they go forward.
And if you hate Googling for answers, you might be in for a rough ride no matter what resource you're using to learn 😬
@@bobziroll the course should target people with a generalized IDE. That you get stuck after one hour in if you dont use their IDE makes the course a lot less valuable.
It's just a perfect react tutorial for me . Thanks bob for your amazing teaching skill . Good thing about this course is that he teaches us react as well as css
Bob hello from Argentina, I must tell you I got hooked on this course, I cannot stop watching .
This is the best React Crash course I've seen so far. Taking you from zero to hero in 8+hrs. Well done Bob 👊👊
Been waiting for this! Let’s go ❤️
Bob, you cleared my long struggle with useEffect effectively explaining what side-effects are and internal state sync. I can't appreciate enough the quality of this one. You took time to explain the basics that everyone rushes into. Thanks again and best wishes
Thanks a lot for uploading this brilliant course, nicely done!
Excellent Tutorial. If you follow the instructions properly and do the challenges, it teaches you how to think in react when you encounter a problem and solve it easily. Thank you Bob and keep up the good work. Your teaching is great !!!!!
I still remember when I started learning react by watching your own react video couple of years ago. Bute here I am again watching the new react
tutorial from you again. It is because I like the way you teach really. Thank you sir, thank you very much...😍😍👃
React is one of the technologies I'd planned on learning this year after doing alot of backend work with python and some bootstraping and i think this course is just so much of a good thing that has happen so far to me. Thanks alot FCC and SCRIMBA we really appreciate.
I'm over 9 hours in and still going strong!!! Thanks for such high quality content, amazing tutorial! Definitely TAKE IT SLOW, and TAKE BREAKS. Every side challenge is gold!
For those doing this locally with react-app, it's well worth the effort to set up each project and challenge from scratch. You'll become fluid in no time I promise ;-)
Hey, Michael. How long did it take you to complete 9 hours? I wonder if I can finish this in one week?
So you did use the react-app, I imagine? If you did, I'm having some troubles with the images. Around the 4 hours "minutes" mark we try to populate the airbnb taking data from the array. He said, simply move the images directory to the public one and everything should work. It's not working for me. I tried other stuff and I'm going to look online but maybe I'll be quicker to ask you. How did you solve the images "problem" while using react-app locally??
At the end I moved the directory (images) to public + assigned the string in the data array accordingly, i.e. coverImg: "images/myimage.png" and it worked.
I found this video, among others is not bad (leaving it here for others if needed) : ua-cam.com/video/U07wzhfu66M/v-deo.html
Basically I used the third method shown in the video but, again, in the array data.
@@nesibekaratas3749 For me, I took my time, because I was also brushing up on my CSS, and had been working on a django + react tutorial at the same time. But if you were very dedicated you could do it in a week. I would recommend really spending the time on the mini challenges, and doing them each a couple times so the concepts solidify. Happy coding!
@@MrDarkNightmare666 Yes! I struggled with what to do too. I ended up keeping my images folder in my src directory (and did not move it to public). In the data.js file, I imported the images there instead (I used my own custom images for this, once you import the image as an object, it is placed in data without quotes) --- so in data.js:
// START CODE data.js
import mike_card_image from "../images/mike-card.jpeg";
import vern_card_image from "../images/vern-card.jpeg";
const data = [
{
id: 1,
title: "Life Lessons with Mike",
description: "Mike teachers you how to deal with lots of crap going wrong.",
price: 288,
coverImg: mike_card_image,
stats: {
rating: 5.0,
reviewCount: 420,
},
location: "USA",
openSpots: 10,
},
{
id: 2,
title: "Build a Successful Tech Startup with Vern",
description:
"Vern teaches you how to build a successful startup and invest the returns, even if you are a cat!",
price: 1500,
coverImg: vern_card_image,
stats: {
rating: 5.0,
reviewCount: 8234,
},
location: "Vegas",
openSpots: 0,
},
]
export default data;
// END CODE
And then in the App.js, I imported data.js and it worked like normal! I did NOT move the images folder into public (I tried and it didn't work). But I simply referenced the images in the data.js (which I put in a folder called db that lives along side css, images, components), the images imported and were referenced fine! --- so in App.js:
// START CODE App.js
import React from "react";
// Custom Components
import Navbar from "./Navbar";
import Hero from "./Hero";
import Card from "./Card";
// Database mock JSON and CSS Styling
import data from "../db/data";
import "../css/styles.css";
// Map the data (the image objects presented in data will transfer through props)
export default function App() {
const cards = data.map((item) => {
return ;
});
return (
{cards}
);
}
// END CODE
Hope this helps... happy coding!
Amazing course to learn React if you were in a place like me where I didn't even know what React was and just knew basic HTML, CSS and JS.