Making sub-headings into chapters.
This commit is contained in:
@@ -33,10 +33,6 @@ applications with it.
|
||||
:EXPORT_FILE_NAME: manuscript/introduction.markua
|
||||
:END:
|
||||
|
||||
* Foundations: Building our own React
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/fundamentals--building-our-own-react.markua
|
||||
:END:
|
||||
Baking bread. When I first began to learn how to bake bread the recipe
|
||||
told me what to do. It listed some ingredients and told me how to
|
||||
combine them and prescribed times of rest. It gave me an oven
|
||||
@@ -74,7 +70,10 @@ our recipes would fall out-of-date. So like the bread, to produce
|
||||
consistently good results we need to understand how React does what it
|
||||
does.
|
||||
|
||||
** Components of React
|
||||
* Components of React
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/components-of-react.markua
|
||||
:END:
|
||||
|
||||
Conceptually React is very simple. It starts by walking a tree of
|
||||
components and building up a tree of their output. Then it compares
|
||||
@@ -102,7 +101,10 @@ complete picture of the entire process. The more black-boxes we have
|
||||
in our mental model the harder it will be for us to diagnose
|
||||
performance problems.
|
||||
|
||||
** Markup in JavaScript: ~JSX~
|
||||
* Markup in JavaScript: ~JSX~
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/markup-in-javascript---jsx-.markua
|
||||
:END:
|
||||
|
||||
~createElement~, however, takes as input something that is probably
|
||||
not familiar to us since we usually work in JSX, which is the last
|
||||
@@ -222,7 +224,10 @@ by leaving those aspects of the JSX compiler out.
|
||||
So now that we've worked through JSX we're ready to tackle
|
||||
~createElement~, the next item on our way to building our own React.
|
||||
|
||||
** Getting Ready to Render with ~createElement~
|
||||
* Getting Ready to Render with ~createElement~
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/getting-ready-to-render-with--createelement-.markua
|
||||
:END:
|
||||
|
||||
React's ~render~ expects to consume a tree of element objects in a
|
||||
specific, uniform format. ~createElement~ is the method by which we
|
||||
@@ -286,7 +291,10 @@ of ~elements~ (surprise).
|
||||
That's it. Now we have everything we need to actually begin the
|
||||
process of rendering our tree to the DOM!
|
||||
|
||||
** Render
|
||||
* Render
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/render.markua
|
||||
:END:
|
||||
|
||||
There are now only two major puzzles remaining in our quest for our
|
||||
own React. The next piece is: ~render~. How do we go from our JSM tree
|
||||
@@ -359,7 +367,10 @@ tree in the browser's DOM! But so far we can only add things to our
|
||||
tree. To be able to remove and modify the tree we need one more part:
|
||||
reconciliation.
|
||||
|
||||
** Reconciliation
|
||||
* Reconciliation
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/reconciliation.markua
|
||||
:END:
|
||||
A tale of two trees. These are the two trees that people most often
|
||||
talk about when talking about React's "secret sauce": the virtual DOM
|
||||
and the browser's DOM tree. This idea is what originally set React
|
||||
@@ -634,7 +645,10 @@ simulates, you'll be hitting a major performance bottleneck since
|
||||
React will not only be replacing DOM elements in the browser but also
|
||||
tearing down and rebuilding the trees of child components.
|
||||
|
||||
** Fibers
|
||||
* Fibers
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/fibers.markua
|
||||
:END:
|
||||
|
||||
The actual React implementation used to look very similar to what
|
||||
we've built so far, but with React 16 this has changed dramatically
|
||||
@@ -659,7 +673,10 @@ likely to occur from the underlying algorithms and not from the Fiber
|
||||
specific details. In the chapter on Concurrent Mode we will learn more
|
||||
about Fibers.
|
||||
|
||||
** Putting it all together
|
||||
* Putting it all together
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/putting-it-all-together.markua
|
||||
:END:
|
||||
|
||||
Throughout the rest of the book we will be building on and using our
|
||||
React implementation so it would be helpful to see it all put together
|
||||
@@ -711,7 +728,10 @@ wanted to use it in a more production setting it would take a lot more
|
||||
development.
|
||||
#+end_note
|
||||
|
||||
** Conclusion
|
||||
* Conclusion
|
||||
:PROPERTIES:
|
||||
:EXPORT_FILE_NAME: manuscript/conclusion.markua
|
||||
:END:
|
||||
|
||||
Of course our version of React elides over many details that React
|
||||
must contend with, like starting a re-render from where state changes
|
||||
|
||||
Reference in New Issue
Block a user