From 5808343b61a5244aa65f258c3e227711fa069043 Mon Sep 17 00:00:00 2001 From: Thomas Hintz Date: Sun, 9 May 2021 07:22:25 -0700 Subject: [PATCH] Tagging sample sections. --- foundations-high-performance-react.org | 15 +++++++-------- manuscript/Book.txt | 1 - manuscript/fibers.markua | 2 +- manuscript/frontmatter.txt | 1 - manuscript/preface.markua | 5 +++-- manuscript/putting-it-all-together.markua | 1 + manuscript/render.markua | 1 + 7 files changed, 13 insertions(+), 13 deletions(-) delete mode 100644 manuscript/frontmatter.txt diff --git a/foundations-high-performance-react.org b/foundations-high-performance-react.org index 34c760f..07cafa3 100644 --- a/foundations-high-performance-react.org +++ b/foundations-high-performance-react.org @@ -19,7 +19,7 @@ #+options: toc:nil tags:nil -* Preface :frontmatter: +* Preface :frontmatter: :sample: :PROPERTIES: :EXPORT_FILE_NAME: manuscript/preface.markua :END: @@ -52,10 +52,9 @@ you better understand how it works, and even more critically, it will allow you to play with it and test how the algorithms work with your own examples. -Even if you don't write out the code yourself and,instead, read through this -book more like a novel, I believe the -fundamentals will still stick with you and provide value in your -React programs-to-come. +Even if you don't write out the code yourself and, instead, read +through this book more like a novel, I believe the fundamentals will +still stick with you and provide value in your React programs-to-come. I'm very excited to take you on this journey with me and, so, now it's time to learn what lies at the very foundation of React. @@ -346,7 +345,7 @@ 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: Putting Elements on the Screen +* Render: Putting Elements on the Screen :sample: :PROPERTIES: :EXPORT_FILE_NAME: manuscript/render.markua :END: @@ -737,12 +736,12 @@ decide how and when to render components are the same. And, when not running in Concurrent Mode, the effect is still the same, as React still does the render phase in one block. So, using a simplified interpretation that doesn't include all the complexities of breaking -up the process in to chunks enables us to see more clearly how the +up the process into chunks enables us to see more clearly how the process works as a whole. At this point, bottlenecks are much more likely to occur from the underlying algorithms and not from the Fibers specific details. -* Putting it all together +* Putting it all together :sample: :PROPERTIES: :EXPORT_FILE_NAME: manuscript/putting-it-all-together.markua :END: diff --git a/manuscript/Book.txt b/manuscript/Book.txt index f9ad5da..906c6f2 100644 --- a/manuscript/Book.txt +++ b/manuscript/Book.txt @@ -1,4 +1,3 @@ -frontmatter.txt preface.markua acknowledgments.markua mainmatter.txt diff --git a/manuscript/fibers.markua b/manuscript/fibers.markua index f600a7f..2aa0d3c 100644 --- a/manuscript/fibers.markua +++ b/manuscript/fibers.markua @@ -2,6 +2,6 @@ The actual React implementation used to look very similar to what we've built so far, but with React 16 this has changed dramatically with the introduction of Fibers. Fibers is a name that React gives to discrete units of work during the render process. And the React reconciliation algorithm was changed to be based on small units of work instead of one large, potentially long-running call to `render`. This means that React is now able to process just part of the render phase, pause to let the browser take care of other things, and resume again. This is the underlying change that enables the experimental Concurrent Mode as well as runs most hooks without blocking the render. -But even with such a large change, the underlying algorithms that decide how and when to render components are the same. And, when not running in Concurrent Mode, the effect is still the same, as React still does the render phase in one block. So, using a simplified interpretation that doesn't include all the complexities of breaking up the process in to chunks enables us to see more clearly how the process works as a whole. At this point, bottlenecks are much more likely to occur from the underlying algorithms and not from the Fibers specific details. +But even with such a large change, the underlying algorithms that decide how and when to render components are the same. And, when not running in Concurrent Mode, the effect is still the same, as React still does the render phase in one block. So, using a simplified interpretation that doesn't include all the complexities of breaking up the process into chunks enables us to see more clearly how the process works as a whole. At this point, bottlenecks are much more likely to occur from the underlying algorithms and not from the Fibers specific details. diff --git a/manuscript/frontmatter.txt b/manuscript/frontmatter.txt deleted file mode 100644 index f976121..0000000 --- a/manuscript/frontmatter.txt +++ /dev/null @@ -1 +0,0 @@ -{frontmatter} diff --git a/manuscript/preface.markua b/manuscript/preface.markua index b118f51..6dd8e02 100644 --- a/manuscript/preface.markua +++ b/manuscript/preface.markua @@ -1,4 +1,5 @@ -# Preface +{sample: "true"} +# Preface :frontmatter: Welcome to *Foundations of High-Performance React Applications* where we build our own simplified version of React. We’ll use our React to gain an understanding of the real React and how to build high-performance applications with it. @@ -10,7 +11,7 @@ And while this book only specifically addresses React-DOM, the foundations apply The code in this book is clear and simple so as to best communicate the algorithms we’ll be exploring. It is not intended to be used in production, but it is functional. I think you’ll likely find it useful to follow along by writing the code yourself. It will help you better understand how it works, and even more critically, it will allow you to play with it and test how the algorithms work with your own examples. -Even if you don't write out the code yourself and,instead, read through this book more like a novel, I believe the fundamentals will still stick with you and provide value in your React programs-to-come. +Even if you don't write out the code yourself and, instead, read through this book more like a novel, I believe the fundamentals will still stick with you and provide value in your React programs-to-come. I'm very excited to take you on this journey with me and, so, now it's time to learn what lies at the very foundation of React. diff --git a/manuscript/putting-it-all-together.markua b/manuscript/putting-it-all-together.markua index d0aac4e..b5bdeae 100644 --- a/manuscript/putting-it-all-together.markua +++ b/manuscript/putting-it-all-together.markua @@ -1,3 +1,4 @@ +{sample: "true"} # Putting it all together Now that we've explored how React renders your components, it's time to finally create some components and use them! diff --git a/manuscript/render.markua b/manuscript/render.markua index cd845a9..2c352d4 100644 --- a/manuscript/render.markua +++ b/manuscript/render.markua @@ -1,3 +1,4 @@ +{sample: "true"} # Render: Putting Elements on the Screen 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 of nodes to actually displaying something on screen? We do this by exploring the `render` method.