Learn React JS - Full Beginner’s Tutorial (2024) & Practice Projects

[@aymennassi]

6:09 section 01 static pages + L 01: what we'll learn 8:39 lesson 02: first react code 15:20 L 03: first react challenge 18:19 L 04: local setup w/vite 24:25 L 05: libraries/ frameworks 33:20 L 06: react createElm 36:10 L 07: JSX 38:27 L 08 + L 09: why react? 51:30 L 10: random housekeeping 1:00:15 L 11: reactFunFacts project Mark-up 1:04:02 L 12: Pop quiz 1:10:17 L 13: custom components p1 1:17:01 L 14: custom components p2 1:20:41 L 15: custom components quiz 1:23:26 L 16: Fragments 1:25:59 L17: custom components parent/child 1:31:24 L18: styling with classes 1:40:04 L19: Organizing components 1:45:31 L20: make mental outline of project 1:49:24 L21: initial project setup 1:54:04 L22: reactFacts navbar & styling 2:02:10 L23: main content section 2:08:46 L24: coloring the bullets 2:10:58 L25: add bg image 2:15:45 L26: section 01 recap ############ "👉I'm currently looking for an internship or to collaborate in projects if you're interested leave me a message, thanks!" ############ 2:18:00 section 02 + L1: section 02 intro ... check replies 👇

[@aymennassi]

2:20:28 L2: Travel journal Header 2:28:05 L3: entry component 2:38:14 L4: problem - not reusable 2:40:33 L5: props p1: understanding the concept 2:43:51 L6: props p2: reusable component 2:45:47 L7: aside: JS inside JSX 2:53:32 L8: props p3: create a contact component 2:57:19 L9: passing data into a component 3:04:57 L10: props p5 receiving props 3:12:30 L11: props quiz 3:16:57 L12: destructuring props 3:22:10 L13: props practice 3:31:10 L14: non-string props 3:37:24 L15: importing static assets 3:40:26 L16: pass props to entry component 3:46:53 L17: review array .map() 3:54:23 L18: react can render arrays 3:59:37 L19: mapping component 4:05:46 L20: map quiz 4:09:51 L21: Travel Journal: map entry component 4:16:36 L22: Travel journal: key prop 4:20:51 L23: Travel journal: pass object as props 4:26:33 L24: Travel journal: spread object as props 4:30:53 L25: section 02 recap ############## Section 3 soon......

[@niekmollers640]

I'm now 75 years old and I worked for 50 years in ICT. I'm still very interested in the modern way of developing, so I'm following this as much as possible. Helpfull for thi is my retirement, which gives me 24/7 😉time to spend on it. I followed already some tutorials of FCC as well as of Scrimba and I'm impressed about the structure and completeness of their material.

[@aunghein1922]

Nice to meet you grand father I am absolute beginner

[@DigitalTrendzy2023]

which country are you from sir

[@saagar2002]

Are you for reals grandpa, kudos

[@ivangerginov5648]

Very wholesome and inspiring! Best of luck, we're all learning here

[@hereforedit-pro]

You are truly legendary❤; hats off to you!😘

[@tuiakys]

IMHO, Bob Ziroll is one of the best programming instructors I’ve seen. Like many of you, I’ve watched countless tutorials and courses, but his teaching style, combined with the Scrimba interactive platform, really helped me get things done. Thank you, Bob, for creating such an amazing course and learning experience. I hope anyone reading this finishes the course having truly learned something new!

[@babakvideocast]

I absolutely love the idea of making this available on KZbin, it’s such a great way to reach and help more learners! I’m a big fan of the tutorials Bob Ziroll creates. He’s incredibly patient, has a talent for explaining complex concepts, and simplifies them in a way that’s easy to understand. His calming voice and motivational approach keep me inspired to keep learning. Thanks so much for this opportunity. I can’t wait to start learning!

[@iriteshmishra]

I recently Graduated from Bachelor in Computer Science. I didn't had React Course in my college syllabus. I am very thankful for Scrimba for uploading React full beginner level course for free. I have learned CSS Grid and Flexbox through Scrimba which helped me at my College time. I Want to create a Web app for Sticker business as well as Office Rental web app on my own using React and Typescript. I love learning JavaScript and Starting to learn React now.

[@PhoenixTF2]

Loving this new content, so much to learn, so well presented. ❤

[@remixtures]

I'm learning React because, despite being a technical writer, I love learning front-end development. I find front-end programming utterly joyful because it allows me to experience the actual result of my own code by browsing through a website. Speaking for myself, more technical writers should learn not only Vanilla JavaScript and CSS, but also React and Node.js. Specially if they're working for a web development company. Oh, and by the way, Scrimba is probably the best resource for getting an hands-on learning experience of front-end development. Keep up with your wonderful work!

[@atruhlar12]

I first learned React from Bob Ziroll on the Scrimba platform. At the time, my goal was to learn React to pivot to a career in frontend development. Now I'm in my first role as a fullstack developer! I was excited to see this course released through Free Code Camp - I plan to look through it to brush up on my skills and learn about what's new in React 19.

[@Luis-yk7vq]

I love Scrimba's interactivity. Making this course available on FCC is a great gift for those outside the platform. I'm learning React to create user-friendly interfaces for financial managers, reducing errors and increasing productivity in cash transaction logging.

[@nilsdn8011]

I took the React Course on Scrimba while it was still using React 18, and without a doubt, this updated course matches its quality. As with the other courses on Scrimba, the mix of explaining new concepts, practising small projects, and building up muscle memory by repetition makes learning fun, engaging, and highly effective.

[@Gihankesara]

Best teacher for REACT i am now learning react from scrimba and not boring at all 😍

[@valerichutak]

Awesome! Bob Ziroll is the best teacher for frontend stuff. Secretly i was waiting for Scrimba to release a what's new in React 19 section, but this is even better. Now im going to my learn cave and close the door for 15+ hours. Do not disturb, learning in progress!

[@morgan24TH]

For those who check the comment reviews before taking the course, I strongly recommend that you do so. I learned React from this guy way back in 2020. And believe me, he's awesome, and the content just sinks into your brain.

[@iampruthviraju]

I appreciate the idea of making this available in KZbin. I am a full stack developer who is an enthusiastic to learn different technologies. This made me to learn React

[@ashikurrahman2247]

My first react video that I really understood was Bob Ziroll's interactive course on scrimba in 2020. I loved the course and i loved your approach starting from a single file. I'm now working in a company where i'm close to being a senior dev. I even mentor people. Thank you, Bob. You don't even know what role you played in my software journey. I hope I spelled your name right.

[@bobziroll]

You spelled it right! And I'm so glad to hear that you've been able to mentor others and that my courses have made a positive impact on your life. The ripples spread far and wide. 🌊

[@ЗояВербицкая-б5х]

This is so exciting! I went through an old React course on Scrimba a year ago and recently I've started developing my own app for learning and practising new words and I've been feeling for a while that I needed to go through the course again to refresh some bits so I was really waiting for the updated and extended version in order to refactor my code! Thank you so much for such a great opportunity!

[@genetmehari6418]

Bob Ziroll is the best teacher ever so far , I took the first react course on scrimba but I feel like now is the right time to brushe my memory

[@TheSbunch]

As a huge fan of both platforms, I can't wait to watch this updated version. Thanks so much for updating this!

[@willifordabunas9114]

I completed the previous version of the React Scrimba course and absolutely loved the balance between theory and hands-on practical applications. The meme generator project was my favorite-it was so much fun! I even extended its functionality to allow users to download memes. I'm excited to continue building on my learning and exploring modern approaches to developing UI components! So, definitely will check this out!

[@shantdashjian]

Bob is a great teacher. His pleasant teaching style and commitment to effective teaching is an example to follow.

[@dreamsachiever212]

this course is addictive. I just dragged the the play thumb just to watch a random 2-3min then finding myself still watching after 1h. This is the REAL DEAL

[@rafaelcruz4649]

Thanks Bob!!!! I am still learning from your original react course and I am 80% into finishing it. I love how interactive the learning process is. As a neurodivergent learner, it‘s really helpful for me. I am learning React to give myself a leverage with my job search in tech. 🎉🎉🎉

[@AliRaza-kt2bb]

I have learned React because I wanted to level up my skills and I keep learning and improving my skills to keep up with the new changes. Bob is an amazing teacher and his teaching skills are so good and easy to follow even for a complete beginner. I recommend everyone learning React to finish this course.

[@altvaro]

Thank you Scrimba and FCC for this video!!!

[@livelivelive2548]

So delighted to see this - I did the old react course with you and I absolutely LOVED IT - but when react 19 came out I knew I wanted to learn the updates asap - Bob is an amazing teacher - it is 9:30 pm my time so … and there has been a glass or 3 of wine so I will start this course in the morning - can’t wait 🥰🥰

[@jannisk6541]

I started this course on wednesday on scrimba to find a better job after I finish my apprenticeship next year! Thank Bob, you are a great teacher! Greetings from Germany! 👋

[@rinontendrinomena8375]

I have been using React for 3 years but still find courses made by the Scrimba teacher very helpful. Thank you so much for making this useful for us. Watching from Madagascar and will share it with devs who are currently preparing for their next jobs

[@mikael.sevigny]

I'm learning React to build web applications that will make my life and my family's life easier. To scratch my own itch, if you will 😅 Thanks to both FCC and Scrimba for offering this amazing course for free!

[@albertusmeiring]

React is one of the most popular libraries and every JavaScript developer should at least know a bit of React. I'm brushing up on some React by taking this course. I love the projects and look forward to see how Bob sovles these problems.

[@jrumbawa]

Love Scrimba and the way they teach. Solo projects and challenges help reinforce the knowledge a ton. Also a plus when it's Bob teaching the course! Thanks again Scrimba team

[@hichdevpro]

Big thanks to Bob Ziroll for this awesome React course! 🙌 Learned so much thanks to Bob’s clear explanations and the interactive platform. Appreciate all the effort put into this! 🚀

[@hhdg1515]

Finally it's live. Tried to learn React from Scrimba a while back, I was really into it but noticed Scrimba would update the React courses soon so had a pause there. Now I can come back to continue the path. Can't wait!

[@bobziroll]

Best of luck! 🍀

[@crispuskingori5202]

I'm interested in learning React because it's widely used in the industry and can help me land a better job as a front-end developer.

[@morganrossi196]

I'm learning React to grow my front-end development skills! I just started learning basic front-end coding this year and am enjoying it much more than I thought I would. Thank you to both the scrimba and free code camp folks for this amazing video!

[@zakka993]

I am new to React, and work on my front-end on Scrimba, but as my role-model cousin codes - he has inspired and recommended not just Scrimba, but React as he has funded a buissness using React himself! But as i startet with react on KZbin, I continued the front-end path at scrimba, since i found that platform trilling! And can start with the fundimentals and one day hopefully also make a buissness using react and JS :D Thanx for this video and course!

[@p1xelgh0st]

I saw this and thought OMG Bob Ziroll has done it again. He gives us a class leading React course completely free! I am so grateful. Thank you very much.

[@Coastal_Coral]

This is exciting! I want to build and deepen my foundational knowledge in Web Development so here I am looking forward to learn React. I've taken some FCC and Scrimba classes in the past and excited to see this new course on React. Can't wait to dive deep and create fun, helpful, and awesome projects. Let's go!

[@alexsurprenant8448]

Bobs way of teaching react is so concise and clear, and makes it really easy for someone like me to be able to understand the concepts, and the Scrimba platform is such a unique and powerful tool for learning. I'm learning React via Scrimba to help facilitate a career change and build a better life for my family, and because it's fun!! Thank you Bob and Scrimba!

[@snappinmambo003]

I like the component-based architecture of React, and I love how the UI responds to changes made in state. The declarative programming aspect of this library keeps me wanting to learn more. Bob, thank you for the continuous education you continue to give us!! Much appreciated...

[@carlamartins6875]

I’m learning React even though I’m currently working in a very different field. It’s a popular library, and I want to continue improving my frontend development skills while exploring new ways to build modern web applications. Although I took an older course before, it’s been challenging to stay consistent with my React learning. The revamp of that course gives me a great reason to refresh my knowledge and catch up on what’s new.

[@akintayoakinnibosun6251]

I'm Learning React with the plan to also learn AI development. I've studied the React 18 course on Scrimba for about 2 months now. I love frontend development and I'm aware of the many benefits that a properly done UI can provide for the company and end user. This is what drew me to React in the first place. I feel that AI has the power to change our lives for good (with great power comes great responsibility) but also recognize the dangers associated with it, so I hope to approach it from a security-first perspective, always keeping the end user's experience in mind.

[@wjp009]

I watched the old version of this course on Scrimba a while back and picked up the concepts so quickly thanks to Bob's teaching style. I've been waiting for this update and was excited when I finally got the email! Watch, practice, learn!

[@maxfromukraine1630]

does it make sense to watch the old version and then this one? or I can start right away with the new one

[@williamcoates9921]

I restarted my Scrimba Pro subscription mainly to finish Bob's React course. Christmas came early this year thanks for the gift.

[@mmelimahlobo7656]

Hey Bob you cannot believe how much of help this is course is to me its such a blessing and I am very grateful thanks for your love,energy and time❤

[@yangwang3822]

I loved Bob's react course back in 2022. So happy to see the new version coming to fCC on KZbin. I wish to refresh my lost knowledge of react and create projects for my hobbies, for example, dancing :) Good job Bob and Scrimba team!

[@SergeTV]

Fantastic course to get a grasp of React with hands-on exercises in easy, bite-sized steps! I am continuously learning React to quickly build an app from a wireframe prototype to a production-ready application with complex logic. Thank you, Bob!

[@alembics]

I've been back-end focused for a long time. I can fumble my way through front-end work, but now seems like a good time to learn the basics of React. Making this course free is a great thing.

[@Obito2912-c4r]

Thank you for all you are doing! The quality is incredible and it's free. I'm very excited to complete this course. Thank you again!!!

[@kittitouchlelapiyamit5625]

Learning React is like upgrading from crayons to Photoshop. Whatever you dream, you can build! Can wait to do this course.

[@irink5642]

Saw a new React course, and it couldn’t have come at a better time! I’ve been wanting to level up my skills and dive deeper into building awesome interactive apps. So hyped to get started!

[@saviorodrigues2773]

loving the approach to teaching this. i have always found most videos to be lacking in something, but this takes the cake!

[@saynat]

I absolutely STAN Scrimba and I'm in the midst of making a career shift toward becoming a React Dev! I can't wait to dive into the new practice projects!

[@dariseb1]

I've been waiting for this course update. It's always good to go over concepts, and even better if your teacher is Bob Ziroll

[@lewisN-11]

The first React video I watched in english was with Bob, and it was very easy to understand. As always a great teacher!

[@cherryluxur]

I'm new to Scrimba and coding. I'm already in Scrimba's HTML and CSS course, and I'm interested in switching fields! A membership would be a blessing.

[@soriano1996]

Bob Ziroll is a great instructor! I've been away from we development for a couple years but an trying to find a job in that field so learning the latest React version would be the best way to brush up my skills. great timing for this tutorial for me!

[@marklreyes]

I'm doing a pivot from Angular to React granted the volume of adoption throughout these last few years alone. If you could TLDR what the difference is in this round because I just finished Learn React (Sep 2024) and just yesterday completed, What's new in React 19? (Nov 2024). On another note, Mr. Ziroll is definitely a natural at these tutorials and makes learning this curriculum (which is a lot to unpack) in very concise bite-sized pieces without the additional pressure to GET IT DONE NOW. Awesome work Scrimba!

[@michelribbens8014]

Awesome! I'm currently doing the Scrimba Frontend Dev Path and was halfway the React Basics course. Going to start it over from scratch now

[@phrop]

I've taken the React courses at Scrimba and can't wait to watch the updated course here at FCC. I'm learning react as it is the library required for projects I am working on at the moment.

[@VictorEmma-Wele]

Oh my REACT🔥🔥🔥!!!!! I can't believe we have a new course from Bob Ziroll. He is kind of a turning point for me when it comes to front-end web development. He is so patient, calm, and builds on concept after concept. I am learning React so as to become a fullstack developer. This goal will allow me to create scalable projects that are visually pleasing and help my backend projects come to life. Thank you for the continuous quality content and the collaboration with FCC. It has truly become home base for developers.

[@JuanCastro-C]

I am looking for a job as a React.js developer and this couser will be a big help to keep me updated on this technology

[@justinholbein9776]

stoked to learn react 19, the first scrimba free react course you did was critical in me learning skills to kick off my business. Going to be learning along with this one too, thank you!

[@ReinhardtFamily]

Thank you for making this course! I am learning React so I can get the always-curious and ready-to-try-anything stars/geniuses in the adult learning classes I teach started on the road to front-end development. Scrimba is such a perfect tool for that.

[@DCBlogdev]

👍I've been a long time backend developer, I've tried many times to learn JS, trying again, determined to get to grips with React. Courses like this will really help.

[@Jikodis]

Scrimba is hands down the best learning resource to learn development, or to improve your current skillset. Active recall and the quick feedback loop makes a huge difference. They also keep things light and interesting which helps. Great to see Scrimba growing and catching more eyes. Well deserved.

[@ruaidhrilumsden]

I'm here for Bob Ziroll! I did his original React course on Scrimba and I've been looking forward to doing another one of his courses ever since. 🎉

[@Shubham-n3v]

I could not contain my excitement after seeing the much-awaited course go live. As always, I love the way Bob teaches us. Thank you, Scrimba, for making this course free of cost. Now, I am on a five-hour spree to complete one-third of the course.

[@sibongimpilomthembu3659]

Happy to begin this learning on React, as I always trusted Scrimba lessons from the beginning.Thank you

[@ashrafulislam7825]

Learning React to enhance my web development skills and build dynamic, interactive applications! Loving this course so far-clear explanations and hands-on projects. Thanks for sharing this amazing content! 🙌

[@vandread1400]

It preserves the Quality of Scrimbas courses and all the content in only one video.thank you

[@majames9848]

Anyone who genuinely shares knowledge is a true gem.👍

[@Aneta-y2i]

Why am I learning React? 😅 I’m learning it because I want to change careers and move into web development! I just finished a long 5-hour module (which felt like such a big achievement for me), and the very next day, this was released. At first, I was horrified, like, 'Do I really have to go through this again?' But then I realized it’s actually the perfect chance to review everything I just learned and learn the stuff through a different project than it was in the previous course. Now I’m genuinely excited to dive in! Thanks Bob

[@ben058936]

Excited to begin learning React to build projects. Thank you!

[@jerald1836]

wow, Bob Ziroll is one of the best here. I'm inspired to your efforts and free ideas!!!

[@sertifikali]

Thanks for the free course! I was waiting the update to start. I am responsible for testing a react application. I think it will really help me doing my job better to understand the nuts and bolts of it.

[@basilborisk.3326]

This is AmAZING!! i love scrimba ...please continue making available such high-quality content! 🤓

[@imLOSTirl]

This is the only React Course that actually clicked with me. Thanks so much!

[@engamo123]

Love this! ❤ It came at the right time, as I intend to brush up on my React skills. Thank you Bob.

[@devilsh8273]

Yesterday I finished his beginner course in fcc and scrimba ❤. Now yt algorithm shows this.❤🎉

[@fistewie]

Thank you! Looking forward to learning react to be able to build my own apps. Learning react enables making apps for both web and mobile and that’s a big selling point for me!

[@rkaranam]

All the projects look promising, can't wait for the weekend to try! Thank you Bob, the builder 😂😂

[@kitsunekanda636]

I want to learn React because I would like to pursue a career in Web Development! I also love the way Scrimba Courses are made

[@samuelfolaranmi6512]

I've been using React for over a year now and built some amazing projects with it, but I believe with the rapid changes in the ecosystem I will need courses like this and others to level up and be up-to-date skill-wise.

[@beyondbedside]

Love scrimba and so thankful for this revamped tutorial. Can’t wait to use it to build new webtools.

[@honkhonkv2236]

The best react teacher with a present before christmas! Thanks!

[@HaroBulus]

React definitely widens the options, and Bob knows how to teach it. Thanks Scrimba and freeCodeCamp

[@thesamjoshi]

Here in 360p! Super excited for the updated course and the KZbin only bonus content. I am learning React to change the trajectory of my career, and hopefully my life! :)

[@erkkiesimerkki4422]

Thanks for this early Christmas gift! ❤🎅🎄 When applying for frontend jobs knowing React is a must but as it wasn't included on my university curriculum, here I am once again at the best resource available. The learning experience would be a lot more difficult and boring without your courses. Dunno what I would do without these free courses as every penny counts for a student. You're simply the best, better than all the rest

[@perismuniu]

Great lessons on React. Highly recommend this course. Awesome job guys.

[@Hayyan-t2y]

I want to learn react to build my own projects and start a career in web development. Excited about this tutorial!

[@Mrbobert226]

Going through a bootcamp right now and we are going through React right now. I will definitely go through this video if I run into issues. Always to good to have additional resources at least for me when it comes to learning 😅

[@Golden3andGreat1]

I want to learn react for a couple project ideas and to see what is possible with React. Thanks so much Bob and FCC for this video ❤

[@laurelineparis5407]

Learning the new react to keep being posted 👌I see a lot of good practices and I love to learn 🙌

[@MrKokomot]

Great news! Looking forward to dive in!

[@nadunpabasara6467]

If you’re struggling with React or want to learn it properly, I highly recommend this course. It’s been a game-changer for me!

[@DerFeindmarkierer]

Bob, you're a fantastic teacher. Thank you so much.

[@arongu1930]

Thank you for bringing this awesome platform Bob! I will get to there eventually but would like to brush up on JS and responsive design before getting there! I am excited to continue my frontend career developer journey as I want to learn to eventually deploy web apps that can accomplish many things! I want to learn React because this will provide me the foundation and framework to develop powerful applications that can help me with daily tasks in life. Furthermore, I can get a sense on doing software projects and learning other programming concepts in React I may not have learned in Python, C++, etc.

[@GabrielGomes-k6g]

Bob Zirrol is awesome instructor and I really apreciate his work

[@benshew]

Scrimbas been great for learning and glad to be working with FCC and hopefully I can use this to continue my proficiency with react.

[@CashFinanceClips]

I was exactly waiting for that. A course which teaches you react from the begging. I hope learning it will help me in my career 🙏🏻

[@naneecodes8860]

I'm learning React so I can build fun educational games for my students, and learning management platforms for my school quickly and sustainably. Can't wait to learn!! Thanks for making these videos!! 🎉❤