5. React JSXsyntactic-sugar for JS
const element =
(
<h1 className="greeting">
Hello, world!
</h1>
);
JSX Code
const element =
React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
Compiled JS Code
• Template Language with full power of JS
• Prevents injection attacks
https://facebook.github.io/react/docs/introducing-jsx.html
more…
https://facebook.github.io/react/docs/jsx-in-depth.html
6. State vs.Props
•STATE - Specific to a particular component (to track the
changes of the component
•PROPS - Passed from the parent Component.Inputs to
the child component
Features STATE PROPS
Can get initial value from parent
component?
Yes Yes
Can be directly changed by parent
component?
No Yes
Can set default values inside
component?
Yes Yes
Can change inside component? Yes No
Can set initial value for child
component?
Yes Yes
Can change in child component? Yes No
11. Virtual DOM
User’s View
(Real DOM)
Background JS Process
(Virtual DOM)
First Render
<html>
<div>
<h1>Sajith</h1>
</div>
</html>
12. Virtual DOM
User’s View
(Real DOM)
Background JS Process
(Virtual DOM)
Real DOM populated and Virtual DOM cleared
<html>
<div>
<h1>Sajith</h1>
</div>
</html>
<html>
<div>
<h1>Sajith</h1>
</div>
</html>
13. Virtual DOM
User’s View
(Real DOM)
Background JS Process
(Virtual DOM)
Click on Change Me
<html>
<div>
<h1>Sajith</h1>
</div>
</html>
<html>
<div>
<h1>Dilshan</h1>
</div>
</html>
14. Virtual DOM
User’s View
(Real DOM)
Background JS Process
(Virtual DOM)
Only modified section is updated in Real DOM and
Virtual DOM is cleared
<html>
<div>
<h1>Dilshan</h1>
</div>
</html>
<html>
<div>
<h1>Dilshan</h1>
</div>
</html>
<html>
<div>
<h1>Sajith</h1>
</div>
</html>
15. Reconciliation
• Use “diffing” algorithm
• the state of the art algorithms have a
complexity in the order of O(n3) where n is
the number of elements in the tree.
• React implements a heuristic O(n)
algorithm
https://facebook.github.io/react/docs/reconciliation.html