Introduction to React.js

Overview of core concepts in React.js

Transcript

1. UI is a hierarchical tree structure
2. DOM is also a tree structure <html> <head> </head> <body> <h1>Hello!</h1> <div></div> </body> </html>
3. React.js application is a tree structure of React components <Root> <Child /> <Child> <Child>Hello!</Child> <Child /> </Child> </Root>
4. Components share data through tree hierarchy
5. A component may have an internal state When state is updated, component and its children are also updated (re-rendered).
6. Component lifecycle
7. Rendering optimization If props or state didn’t change, there’s no reason to update (re-render) a component.
8. Child to parent communication Parent component may pass a callback function, which changes a state of the component, to child component.