Published on February 5, 2016 by LearnCode.academy

A big question in React JS is State vs Props. State is essentially any data that relates to the internals of a React component, but has nothing to do with the outside world. Props are data that the React.js component depends on to function and render correctly.

GET THE SOURCE CODE:
github.com/learncodeacademy/react-js-tutorials

React JS #1: Intro & Workspace Setup
youtu.be/MhkGQAoc7bc (Coming Tues, Feb 2@11CST)

React JS #2: Anatomy of a Component
youtu.be/fd2Cayhez58 (Coming Wed, Feb 3@11CST)

React JS #3: Composing Multiple Components
youtu.be/vu_rIMPROoQ (Coming Thurs, Feb 4@11CST)

React JS #4: State, Props & Data
youtu.be/qh3dYM6Keuw (Coming Fri, Feb 5@11CST)

React JS #5: Events & Data Changes
youtu.be/_D1JGNidMr4 (Coming Mon, Feb 8@11CST)

React JS #6: React Router & Intro to Single Page Apps
youtu.be/1iAG6h9ff5s (Coming Tues, Feb 9@11CST)

React JS #7: React Router Params & Queries

Leave a Reply

214 Comments on "REACT JS TUTORIAL #4 – State vs Props & Application Data"

Notify of
avatar

zay yar phone
Guest
zay yar phone
1 year 4 months ago

Thank you for the amazing series, Sir. Your explanations are concise and clear. One thing I would like to ask is that if you have the console.log inside the setTimeout() as in your example 8:16, it keeps logging repeatedly which is similar to the setInterval() behaviour, even though the DOM is only updated on the first time as intended.

zay yar phone
Guest
zay yar phone
1 year 4 months ago

Thank you for the amazing series, Sir. Your explanations are concise and clear. One thing I would like to ask is that if you have the console.log inside the setTimeout() as in your example 8:16, it keeps logging repeatedly which is similar to the setInterval() behaviour, even though the DOM is only updated on the first time as intended.

Jesus Adolfo
Guest
Jesus Adolfo
1 year 4 months ago

How do you manage to keep the code inspection open when you refresh the page?When I do it, the code is reduced to a couple of lines so I have to open the tree again and I can't see it changing live

Jesus Adolfo
Guest
Jesus Adolfo
1 year 4 months ago

How do you manage to keep the code inspection open when you refresh the page?When I do it, the code is reduced to a couple of lines so I have to open the tree again and I can't see it changing live

thesmileynoob
Guest
thesmileynoob
1 year 4 months ago

Hey man, I really like your work and your tutorials are very easy to follow and understand. Keep up the good work.One question though. The screen portion flashes when a node gets changed (around 3:20). React changes the precise dom element that needs to be changed right? Is it really impossible to do this manually? Thanks and keep up the good work.

LearnCode.academy
Guest
LearnCode.academy
1 year 4 months ago

+thesmileynoob nope not impossible at all, just a lot of manual effort involved if you always want to choose the optimum-updates every time – it's something anyone working on backbone.js apps has to fight with. It's really nice to only have to define how the data affects the view, then let virtual DOM do all of the heavy lifting.

thesmileynoob
Guest
thesmileynoob
1 year 4 months ago

Hey man, I really like your work and your tutorials are very easy to follow and understand. Keep up the good work.One question though. The screen portion flashes when a node gets changed (around 3:20). React changes the precise dom element that needs to be changed right? Is it really impossible to do this manually? Thanks and keep up the good work.

LearnCode.academy
Guest
LearnCode.academy
1 year 4 months ago

+thesmileynoob nope not impossible at all, just a lot of manual effort involved if you always want to choose the optimum-updates every time – it's something anyone working on backbone.js apps has to fight with. It's really nice to only have to define how the data affects the view, then let virtual DOM do all of the heavy lifting.

Веталь Микеладзе
Guest
Веталь Микеладзе
1 year 4 months ago

There is a pretty/nifty error/bug on 8 min – you calling setTimeout inside render method of Layout component – which becomes into infinite loop

Веталь Микеладзе
Guest
Веталь Микеладзе
1 year 4 months ago

There is a pretty/nifty error/bug on 8 min – you calling setTimeout inside render method of Layout component – which becomes into infinite loop

The Gabornator
Guest
The Gabornator
1 year 4 months ago

Finally someone made me understand it! thanks a lot!

LearnCode.academy
Guest
LearnCode.academy
1 year 4 months ago

Awesome, great to hear that it helped!

The Gabornator
Guest
The Gabornator
1 year 4 months ago

Finally someone made me understand it! thanks a lot!

LearnCode.academy
Guest
LearnCode.academy
1 year 4 months ago

Awesome, great to hear that it helped!

1 7 8 9 10 11 15
wpDiscuz