Formatting updates.

master
Thomas Hintz 4 years ago
parent b470727093
commit ba4f38c5a8

@ -12,6 +12,7 @@
#+TITLE: Foundations of High-Performance React Applications
#+AUTHOR: Thomas Hintz
#+EXCLUDE_TAGS: noexport
#+startup: indent
#+tags: noexport sample frontmatter mainmatter backmatter
@ -196,7 +197,8 @@ This is what I'm thinking:
#+BEGIN_SRC javascript
['div', { 'className': 'header' },
[['h1', {}, ['Hello']],
['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
['input', { 'type': 'submit', 'disabled': 'disabled' },
[]]
]
]
#+END_SRC
@ -380,7 +382,8 @@ function render(element, container) {
.forEach((key) => domElement[key] = props[key]);
// render its children
props.children.forEach((child) => render(child, domElement));
props.children.forEach((child) =>
render(child, domElement));
// add our tree to the DOM!
container.appendChild(domElement);
@ -464,13 +467,13 @@ from the current tree and ~prevElement~ is the corresponding element
in the tree from the previous render.
#+BEGIN_SRC javascript
if (!element && prevElement)
if (!element && prevElement)
// delete dom element
else if (element && !prevElement)
else if (element && !prevElement)
// add new dom element, render children
else if (element.type === prevElement.type)
else if (element.type === prevElement.type)
// update dom element, render children
else if (element.type !== prevElement.type)
else if (element.type !== prevElement.type)
// replace dom element, render children
#+END_SRC
@ -719,19 +722,19 @@ At this point the only thing left to do is to create some components
and use them!
#+BEGIN_SRC javascript
const SayNow = ({ dateTime }) => {
const SayNow = ({ dateTime }) => {
return ['h1', {}, [`It is: ${dateTime}`]];
};
};
const App = () => {
const App = () => {
return ['div', { 'className': 'header' },
[SayNow({ dateTime: new Date() }),
['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
]
];
}
}
render(createElement(App()), document.getElementById('root'));
render(createElement(App()), document.getElementById('root'));
#+END_SRC
We are creating two components, that output JSM, as we defined it
@ -787,7 +790,7 @@ cause of a performance bottleneck? Or how do you use the React APIs in
a performant way? These types of questions should be easier to track
down and understand with the foundations covered and I hope this is
only the start of your High-Performance React journey.
* Image Test
* Image Test :noexport:
:PROPERTIES:
:EXPORT_FILE_NAME: manuscript/image-test.markua
:END:

@ -10,4 +10,3 @@ reconciliation.markua
fibers.markua
putting-it-all-together.markua
conclusion.markua
image-test.markua

@ -34,7 +34,8 @@ This is what I'm thinking:
```
['div', { 'className': 'header' },
[['h1', {}, ['Hello']],
['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
['input', { 'type': 'submit', 'disabled': 'disabled' },
[]]
]
]
```

@ -42,7 +42,8 @@ function render(element, container) {
.forEach((key) => domElement[key] = props[key]);
// render its children
props.children.forEach((child) => render(child, domElement));
props.children.forEach((child) =>
render(child, domElement));
// add our tree to the DOM!
container.appendChild(domElement);

Loading…
Cancel
Save