Learn React.js – Full Course for Beginners – Tutorial

React 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

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Comments

I told u says:

The best course i learn. Thank you for creating this

Indian in paris says:

This is one of the awesome react coure with practice !!!!!

The Third Heat says:

Question: How do you update the state changes to the parent when the change were made in the child?

Joross Barredo says:

I can’t express how grateful I am for this tutorial! I now know my react.js and will definitely be moving extra leaps from here onward.

Kelechi Chinaka says:

Thank you

rohit chaudhari says:

please pload one video how to install nodejs npm and all software to run react code

Akshay Salunkhe says:

better than paid course. thanks…

Edy says:

Hi,following the tutorial around minute 55:00 I see how you are targeting the header component in the function(in Header.js) using className=”navbar” and then setting some style for it in style.css file,just like you would target a html element(class=”something”) from a html file in a linked css file.For me this targeting doesn’t work-doesn’t style anything on screen-and no errors.The main difference is that I have Header.js,Footer.js,MainContent.js files in a components folder,and this folder is at the same level nested as App.js,index.js,index.html,style.css.Inline styling works just fine,but targeting the navbar className element in style.css doesn’t do anything.Maybe I should have something different in my style.css than .navbar{…} as Header.js and style.css are not at the same level nested,but I don’t know how to do it.

Bobby Tarantino says:

Why is everybody saying: “God bless you”.
Who cares about “God” ?

Mujthaba M says:

You are a genius !! Keep it up

Timothy Basalo says:

ive seen bunch of tutorials but this is the most easiest to understand. it only lacks ‘how to install react’ on your video. though it is still a very helpful tutorial

thanks..

Tuhidul islam Mridul says:

love you sir

Ganesh Koirala says:

please always start with a simplest style of doing things so absolute beginners can follow on.

Mi Ka Shin says:

Why he didn’t teach on how to install react.js?

Hafiz Salman says:

Its really a helpful tutorial. thanks a lot.

James Harrison says:

For those who messaged me and others having problems setting up: He is using react in a demo environment that was setup without using create-react-app. The only advantage of using a stick built setup is that initially it will be about half the disk size(58MB) of a create-react-app build(110MB) because create-react-app includes more stuff that would have to installed with npm as needed with a stick build. If you are starting out take a look here… https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

Any text editor will do for writing code (NOT A WORD PROCESSOR!) Good free one here: https://code.visualstudio.com/
Install node from here: https://nodejs.org/en/

From a shell / command prompt create a work area … you can have as many as you want …
npx create-react-app zot … this will create a directory under the current working directory with the name you provided(zot) with all the goodies you need to get started.
cd zot …goto the directory just created
npm start … this will fire up a localhost dev server on port 3000 (or next available port) in your default browser
Edit public/index.html directory and whack the comments and other unneeded stuff
Edit out the decoration crap in src/App.js
You are good to go!

Allan Paz D´Elia says:

Hi, Thanks for this Great React Tutorial, for the nested object in the setState for dietaryRestrictions (4:20:26) , I researched a little and tested this:
this.setState(prevState => ({
dietaryRestrictions: { …prevState.dietaryRestrictions, [name]: checked }
}))

It worked.

branen890 says:

2:07:26 Is state related to React?

Kosh Naranek says:

(sigh) ONE BIG PROBLEM…. @6:30 he refers to REACT as a framework…IT IS NOT a framework….it is a library. That is an important distinction.

JeepersCreepers says:

Not sure, but I think this course didn’t mention that React was installed via NPM. While, i was watching the tutorial, i didn’t understand why my “import” didn’t work and where those dependencies came from in his IDE. I guess the teacher assumed that we know that already? But overall, great job on this tutorial. 🙂

Gaurav Singh says:

You taught me more than any tutorial online…

Jeremy Heminger says:

The data returned from a database may not always have an id but this seems to work:
let i = 0;
let todo = ToDoData.map(
todo => {
i++;
return ();
}
);

David Walton says:

Bob, thank you.

Programmieren lernen says:

Man, this is some really great Content! Just shared it with my friends from code-crowd! Thank you for publishing it in youtube. 🙂 Love it!

Satej Tawade says:

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

Frank says:

imagine how much time he would have saved if he didnt have to “write import react…” every time

Global Entertainers says:

The last link is not working.

Rajat Kanti Bhattacharjee says:

I just got here , because i always loved FreeCodeCamps courses and videos and wanted a quick primer on React coming from Angular and I haven’t even watched the video but the moment you said “There is no easy way and only the hard way”. I lit up with a grin knowing this will be a good course that will not overlook the important bits. 😀 …..

Shahriar Shakil says:

start now ..

Andres Diaz says:

Very helpful, indeed

n2fole00 says:

Life-cycle method componentDidMount 2:49:50

Krissanawat Kaewsanmuang says:

I love your voice .are your have another course

Yuvraj Gawade says:

Best React Tutorial for Beginners

Ruel Agnes says:

now i became interested in learning reactjs,thank you

Yuri says:

when i try to do it in simple html file, locally in my pc (i’ve copied the exact content of the files, and added the two other scripts lines as per the comment of freecodecamp) it doesn’t work. do i have to setup some other stuff? I mean, the 15 initial minutes of the tutorial…

Mike Mc Cann says:

Getting “TypeError: _Products.default.map is not a function”. Anyone know what`s going on here and how to fix it?

Andrey Grushevskiy says:

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

Darrny H. says:

what would i have to do in order to follow this without scrimba?

Kosh Naranek says:

THEY HAVE THE TIME SECTIONS LISTED IN THE DESCRIPTION LIKE AN INDEX…GOD BLESS YOU!!!!!

Rob Gioeli says:

If you read this, I just want to say thank you. I hardly comment on videos; I more so just watch and learn and go through “tutorial hell” until I get a solution to my code. However, I love the fact that you explain concepts at beginner first, and then switch the beginner code into advanced; providing exercises that we can try first to see if we got the concept. Very awesome stuff, thank you.

 Write a comment

*

Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!