React is a JavaScript library for building user interfaces that uses a component-based approach. It uses a virtual DOM for fast re-rendering that only updates the real DOM with the changes between renders. Components should be kept small and contain only display logic, with data changes handled through one-way reactive data flow that triggers re-renders when the state changes. The virtual DOM allows efficient re-rendering by diffing against the previous render and only applying the differences to the real DOM.

1. REACT
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
- Introduction -
Presentation by Quangbuu Le <quangbuu@lozi.vn>

2. REACT
AsV in server-side MVC

3. REACT
AsV+C in client-side MVC

4. PHILOSOPHY
• DOM manipulation is expensive - not good
• Simple - easy to contribute code
• One-way reactive data-flow

5. COMPONENTS
• Write components, not
templates.
• It’s reusable.
• It’s high cohesion.

6. SPAGHETTI CODE? SAY NO
• Keep your component small.
• It’s contain display logic only. No AJAX, no heavy
computing data in component.

7. HANDLE UI
• It’s hard because there is so much state.
• Lots of UI elements, mutable DOM, user
input…
• Data change over time is a root of all problems.

8. HOW COMPONENT WORKS?
• Render to Element with initialState before insert to DOM.
• Component “react” when state change (on click, data
receive..).
• Re-render the whole component, then diff with old virtual
DOM.
• Apply the changed (attribute or DOM Node) to real
DOM.

9. • Re-render the whole component to make sure
that every place data is display correctly and to
be up-to-date.
• Re-render make things simple: no magical data
binding, no model dirty checking, no explicit
DOM operations…
• Is re-rendering expensive? No, thank to virtual
DOM.

10. VIRTUAL DOM
• Make re-rendering fast.
• Re-rendering make new virtual DOM, then diff
with old virtual DOM to find changed.
• Apply only changed to the real DOM.

11. It’s fast because real DOM is slow.

12. It’s powerful because every single component has own
power.

13. Thanks for listening
-The end -