Learn React JS – Full Course for Beginners – Tutorial 2019
August 9, 2024 2024-08-09 2:35
Learn React JS – Full Course for Beginners – Tutorial 2019
React.js is a JavaScript library for building dynamic web applications. Upon completion of this course, you’ll know everything you need in order to build web applications in React. You can also try the interactive version of the course here: https://scrimba.com/g/glearnreact
This comprehensive introduction to React was created by Bob Ziroll (@bobziroll). Bob is the Director of Education at V School, an award-winning school of technology education.
🔗Tutorial Hell link mentioned in video: https://codeburst.io/digging-my-way-out-of-tutorial-hell-6dd5f9927384
🔗Virtual DOM video mentioned: https://www.youtube.com/watch?v=BYbgopx44vo
Check top comment to see what code you have to add to get React working locally.
⭐️Course Contents ⭐️
⌨️ (0:00:00) Course Introduction & Philosophy
⌨️ (0:05:22) What we’ll be building
⌨️ (0:06:24) Why React?
⌨️ (0:09:25) ReactDOM & JSX
⌨️ (0:16:19) ReactDOM & JSX Practice
⌨️ (0:20:34) Functional Components
⌨️ (0:24:32) Functional Components Practice
⌨️ (0:29:41) Move Components into Separate Files
⌨️ (0:35:07) Parent/Child Components
⌨️ (0:43:14) Parent/Child Component Practice
⌨️ (0:48:12) Todo App – Phase 1
⌨️ (0:50:50) Styling React with CSS Classes
⌨️ (0:55:56) Some Caveats
⌨️ (0:58:12) JSX to JavaScript and Back
⌨️ (1:02:11) Inline Styles with the Style Property
⌨️ (1:09:21) Todo App – Phase 2
⌨️ (1:12:42) Props Part 1 – Understanding the Concept
⌨️ (1:14:56) Props Part 2 – Reusable Components
⌨️ (1:17:29) Props in React
⌨️ (1:29:39) Props and Styling Practice
⌨️ (1:40:25) Mapping Components
⌨️ (1:48:27) Mapping Components Practice
⌨️ (1:53:44) Todo App – Phase 3
⌨️ (1:58:16) Class-based Components
⌨️ (2:03:32) Class-based Components Practice
⌨️ (2:07:11) State
⌨️ (2:12:08) State Practice
⌨️ (2:15:45) State Practice 2
⌨️ (2:19:59) Todo App – Phase 4
⌨️ (2:22:05) Handling Events in React
⌨️ (2:25:52) Todo App – Phase 5
⌨️ (2:27:11) Changing State
⌨️ (2:39:29) Todo App – Phase 6
⌨️ (2:47:14) Lifecycle Methods Part 1
⌨️ (2:56:45) Lifecycle Methods Part 2
⌨️ (3:00:07) Conditional Rendering
⌨️ (3:11:26) Conditional Rendering Part 2
⌨️ (3:14:21) Conditional rendering Practice
⌨️ (3:23:00) Todo App – Phase 7
⌨️ (3:25:34) Fetching data from an API
⌨️ (3:36:34) Forms Part 1
⌨️ (3:48:55) Forms Part 2
⌨️ (4:00:11) Forms Practice
⌨️ (4:24:29) Container/Component Architecture
⌨️ (4:35:53) Meme Generator Capstone Project
⌨️ (4:56:11) Writing Modern React Apps
⌨️ (5:02:17) Project Ideas for Practicing
⌨️ (5:03:06) Conclusion
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://medium.freecodecamp.org
source
Comments (48)
@freecodecamp
To get this code working, there is a little set up not mentioned in the video.
If you are coding on scrimba.com, click the gear icon in the top right corner and select 'add dependency…'. First add 'react', then add 'react-dom'.
If you are building locally, you should first install create-react-app. Get it here: https://facebook.github.io/create-react-app/
@sanjana6931
why is render method not working for me?
@AshishSingh-dq9fs
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
@JZ-ey6pv
This is really a great course… so easy to follow and understand. Thank you!
@bandanna189
For beginners and when he start to code out of the sudden i see small box shows how the code layouts why don’t u explain how u did it 🥲
@not_amanullah
Thanks
@user-ow1rz1ow6k
cool video)
@rishiraj2548
great thanks
@user-ez1nv4mc1g
4:56 7:14 8:26
@collins9430
Bruhhhh I couldn’t just get my checkbox to check whenever I add the checked attr.
@moviearchives9613
This tutorial is better than any tutorial I've tried in Youtube. You explain the concepts very well for beginners. Thank you so much.
@ShubhamBhatt-cu2fb
Can someone tell me the IDE name??
@havearelax31401
For me scrimba isnot working neithter my local one also what to do ahhh!
@AxxionMarketPlace-iu6ri
Thank you
@ubiux5994
Where can the code from the video be found? Looks like the one on Scrimba is newer and does not correspond.
@abhishekkumar18008
one of the best explanations i have ever seen on a topic
@snowflakes640
this are the links for the projects at the end:
1) https://www.freecodecamp.org/news/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d/
2) https://www.freecodecamp.org/news/want-to-build-something-fun-heres-a-list-of-sample-web-app-ideas-b991bce0ed9a/
@bishalbehera3080
Some prerequisite needed for this video?? Plzz anyone tell me
@btssugahit4663
Started On : 5/29/2023
End On :
———————————————
Day-1:
@pedromanuel3334
CHT-GPT sujested me this chanel, i hope he did well!
@akifahmed9610
Is this tutorial still helpful considering react has had a version update so some function/code might not work at all and we might need to refer to documentation all the time?
@rohan3138
This is a very good introduction class for reactjs learners, Thank you!
@webcraft3315
this help me alot but the voice quality is very disturbing in ear the shoo shoo voice please make it good
@hdmovieclips1289
how many of you use mind compilation instead of browser going to compile your code for u in practice session
@davismhango5803
This is good tutorial great job i like your teaching style
@Show_Cast
This course is awesome. I took the meta course on react but I think it would have been better if I first have done this tutorial.
@TheAndres7777
thanks man! great tutorial
@GirishLondhe
Thanks for great training course. Could you please give link for CSS styles
@cinereviews1908
1:54:20
@kkethavat
This is really very good tutorial than many of the other ones, never gets bored, always there is something new to learn.. thanks Bob..
@codewithhyder1553
thanks Bob
@parkerAmv
Im back here again just for practice my class components, because now. everything is doing with functional components
@user-pl3ml9ne6z
what is the software that you used?
@ivsaimanoj
Honestly, your way of teaching and explaining is really inspiring. Thanks for creating this course, i love React now !
@defektruke
4:20:30
handleChangeChackbox() {
const {name, checked} = event.target
this.setState(prevState => ({
…prevState, restrictions: {
…prevState.restrictions, [name]: checked
}
}))
}
@alphawebtips2950
Unable to install React to VS Code and that makes the tutorial harder than expected.
@unemployedcse3514
Awesome ,clear and simple instead of taking big examples and showing off
@victoradodo8377
SPECIAL THANKS FOR THIS TUTORIAL. CAN YOU PLEASE DO A COMPREHENSIVE FULL PACKAGE BIGINNER TO ADVANCE LEVEL BACKEND TUTORIAL? WITH PHP, MY SQL( ALSO HOW TO CONNECT THEM TOGETGHER )OR NODE JS. … ……CAN YOU PLEASE SHARE LINK TO OTHER TUTORIA? waiting for your response .
@laponiec
I just followed the first 30 mins of this tutorial (completed two tasks on my own), and I have to admit that this tutorial is just simply brilliant! Much better than just some smart-ass guy coding like crazy and giving some explanations that do not explain anything.
@seanpereira5824
This video is good enough to get work in react and around 60k plus as a start salary i feel…any thoughts?
@sayc1333
This taught me everything the ZeroToMastery Web Development REACT SECTION did not.
THANK YOU
@makramc
Dude you are the GOAT! Huge thanks to you. This tutorial is the best
@tobiillz
I’m 4hrs into this video, couldn’t ask for more🔥🔥
@Alkik0
Really, the best React course I have found! Too bad, the scrimba course has been changes. The previous format was longer but so much detailed and complete!
@giuseppebrandi3742
From 2:47:00 to 3:00:00 is just a waste of everyone's time
@aymanoxs7343
after going through almost half of the react tutorials on YouTube, this one by far was the best ! thank you for your big effort in making this video.😍
@Peppo.silpiana
In todo app phase 6 i cant checked my checkbox i dont know why
I was check my code and its similar with the tutorial
Can someone help me and explain why
Thank you
@turgutguvercin927
Thank you so muchh
Before starting this lecture it is better to learn inheritance and classes so you can understand that why we are using methods instead of functions.