mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on adbcee0c9c814a226049d2f9f03802caccec1349
This commit is contained in:
Website Deployment Script
@@ -89,7 +89,7 @@
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="implementation-in-a-nutshell"></a><a href="#implementation-in-a-nutshell" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Implementation in a nutshell</h2>
|
||||
<p>Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.</p>
|
||||
<p>Hot Reloading is built on top of a feature <a href="https://webpack.github.io/hot-module-replacement-with-webpack.md">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p>
|
||||
<p>Hot Reloading is built on top of a feature <a href="https://webpack.js.org/guides/hot-module-replacement/">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p>
|
||||
<p>In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:</p>
|
||||
<p><img src="/blog/assets/hmr-architecture.png" alt=""></p>
|
||||
<p>The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the <em>exports</em> of the module we want to update. For instance, say you have an app composed of these two modules:</p>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="implementation-in-a-nutshell"></a><a href="#implementation-in-a-nutshell" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Implementation in a nutshell</h2>
|
||||
<p>Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.</p>
|
||||
<p>Hot Reloading is built on top of a feature <a href="https://webpack.github.io/hot-module-replacement-with-webpack.md">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p>
|
||||
<p>Hot Reloading is built on top of a feature <a href="https://webpack.js.org/guides/hot-module-replacement/">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p>
|
||||
<p>In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:</p>
|
||||
<p><img src="/blog/assets/hmr-architecture.png" alt=""></p>
|
||||
<p>The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the <em>exports</em> of the module we want to update. For instance, say you have an app composed of these two modules:</p>
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="expo"></a><a href="#expo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Expo</h3>
|
||||
<ul>
|
||||
<li>Working on making it possible to install npm modules in <a href="https://snack.expo.io/">Snack</a>, will be useful for libraries to add examples to documentation.</li>
|
||||
<li>Working with <a href="https://github.com/kmagiera">Krzysztof</a> and other people at <a href="https://github.com/softwaremansion">Software Mansion</a> on a JSC update on Android and a gesture handling library.</li>
|
||||
<li>Working with <a href="https://github.com/kmagiera">Krzysztof</a> and other people at <a href="https://github.com/software-mansion">Software Mansion</a> on a JSC update on Android and a gesture handling library.</li>
|
||||
<li><a href="https://github.com/skevy">Adam Miskiewicz</a> is transitioning his focus towards <a href="https://github.com/react-community/react-navigation">react-navigation</a>.</li>
|
||||
<li><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is in the <a href="/docs/getting-started">Getting Started guide</a> in the docs. Expo wants to encourage library authors to explain clearly whether their lib works with CRNA or not, and if so, explain how to set it up.</li>
|
||||
</ul>
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="expo"></a><a href="#expo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Expo</h3>
|
||||
<ul>
|
||||
<li>Working on making it possible to install npm modules in <a href="https://snack.expo.io/">Snack</a>, will be useful for libraries to add examples to documentation.</li>
|
||||
<li>Working with <a href="https://github.com/kmagiera">Krzysztof</a> and other people at <a href="https://github.com/softwaremansion">Software Mansion</a> on a JSC update on Android and a gesture handling library.</li>
|
||||
<li>Working with <a href="https://github.com/kmagiera">Krzysztof</a> and other people at <a href="https://github.com/software-mansion">Software Mansion</a> on a JSC update on Android and a gesture handling library.</li>
|
||||
<li><a href="https://github.com/skevy">Adam Miskiewicz</a> is transitioning his focus towards <a href="https://github.com/react-community/react-navigation">react-navigation</a>.</li>
|
||||
<li><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is in the <a href="/docs/getting-started">Getting Started guide</a> in the docs. Expo wants to encourage library authors to explain clearly whether their lib works with CRNA or not, and if so, explain how to set it up.</li>
|
||||
</ul>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="teams"></a><a href="#teams" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Teams</h2>
|
||||
<p>On this third meeting, we had 5 teams join us:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/callstack-io">Callstack</a></li>
|
||||
<li><a href="https://github.com/callstack">Callstack</a></li>
|
||||
<li><a href="https://github.com/expo">Expo</a></li>
|
||||
<li><a href="https://github.com/facebook">Facebook</a></li>
|
||||
<li><a href="https://github.com/microsoft">Microsoft</a></li>
|
||||
@@ -103,7 +103,7 @@
|
||||
<ul>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the Android and iOS app stores.</li>
|
||||
<li>While building the Skype app on React Native, we send pull requests to React Native in order to address bugs and missing features that we come across. So far, we've gotten about <a href="https://github.com/facebook/react-native/pulls?utf8=%E2%9C%93&q=is%3Apr%20author%3Arigdern%20">70 pull requests merged</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/docs/faq.html">ReactXP FAQ</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="shoutem"></a><a href="#shoutem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Shoutem</h3>
|
||||
<ul>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="teams"></a><a href="#teams" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Teams</h2>
|
||||
<p>On this third meeting, we had 5 teams join us:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/callstack-io">Callstack</a></li>
|
||||
<li><a href="https://github.com/callstack">Callstack</a></li>
|
||||
<li><a href="https://github.com/expo">Expo</a></li>
|
||||
<li><a href="https://github.com/facebook">Facebook</a></li>
|
||||
<li><a href="https://github.com/microsoft">Microsoft</a></li>
|
||||
@@ -103,7 +103,7 @@
|
||||
<ul>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the Android and iOS app stores.</li>
|
||||
<li>While building the Skype app on React Native, we send pull requests to React Native in order to address bugs and missing features that we come across. So far, we've gotten about <a href="https://github.com/facebook/react-native/pulls?utf8=%E2%9C%93&q=is%3Apr%20author%3Arigdern%20">70 pull requests merged</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/docs/faq.html">ReactXP FAQ</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="shoutem"></a><a href="#shoutem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Shoutem</h3>
|
||||
<ul>
|
||||
|
||||
@@ -168,7 +168,7 @@
|
||||
<h2><a class="anchor" aria-hidden="true" id="teams"></a><a href="#teams" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Teams</h2>
|
||||
<p>On this third meeting, we had 5 teams join us:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/callstack-io">Callstack</a></li>
|
||||
<li><a href="https://github.com/callstack">Callstack</a></li>
|
||||
<li><a href="https://github.com/expo">Expo</a></li>
|
||||
<li><a href="https://github.com/facebook">Facebook</a></li>
|
||||
<li><a href="https://github.com/microsoft">Microsoft</a></li>
|
||||
@@ -199,7 +199,7 @@
|
||||
<ul>
|
||||
<li>The new Skype app is built on top of React Native in order to facilitate sharing as much code between platforms as possible. The React Native-based Skype app is currently available in the Android and iOS app stores.</li>
|
||||
<li>While building the Skype app on React Native, we send pull requests to React Native in order to address bugs and missing features that we come across. So far, we've gotten about <a href="https://github.com/facebook/react-native/pulls?utf8=%E2%9C%93&q=is%3Apr%20author%3Arigdern%20">70 pull requests merged</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/faq.md">ReactXP FAQ</a>.</li>
|
||||
<li>React Native enabled us to power both the Android and iOS Skype apps from the same codebase. We also want to use that codebase to power the Skype web app. To help us achieve that goal, we built and open sourced a thin layer on top of React/React Native called <a href="https://microsoft.github.io/reactxp/blog/2017/04/06/introducing-reactxp.html">ReactXP</a>. ReactXP provides a set of cross platform components that get mapped to React Native when targeting iOS/Android and to react-dom when targeting the web. ReactXP's goals are similar to another open source library called React Native for Web. There's a brief description of how the approaches of these libraries differ in the <a href="https://microsoft.github.io/reactxp/docs/faq.html">ReactXP FAQ</a>.</li>
|
||||
</ul>
|
||||
<h3><a class="anchor" aria-hidden="true" id="shoutem"></a><a href="#shoutem" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Shoutem</h3>
|
||||
<ul>
|
||||
@@ -367,7 +367,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="expo"></a><a href="#expo" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Expo</h3>
|
||||
<ul>
|
||||
<li>Working on making it possible to install npm modules in <a href="https://snack.expo.io/">Snack</a>, will be useful for libraries to add examples to documentation.</li>
|
||||
<li>Working with <a href="https://github.com/kmagiera">Krzysztof</a> and other people at <a href="https://github.com/softwaremansion">Software Mansion</a> on a JSC update on Android and a gesture handling library.</li>
|
||||
<li>Working with <a href="https://github.com/kmagiera">Krzysztof</a> and other people at <a href="https://github.com/software-mansion">Software Mansion</a> on a JSC update on Android and a gesture handling library.</li>
|
||||
<li><a href="https://github.com/skevy">Adam Miskiewicz</a> is transitioning his focus towards <a href="https://github.com/react-community/react-navigation">react-navigation</a>.</li>
|
||||
<li><a href="https://github.com/react-community/create-react-native-app">Create React Native App</a> is in the <a href="/docs/getting-started">Getting Started guide</a> in the docs. Expo wants to encourage library authors to explain clearly whether their lib works with CRNA or not, and if so, explain how to set it up.</li>
|
||||
</ul>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</ul>
|
||||
<h2><a class="anchor" aria-hidden="true" id="implementation-in-a-nutshell"></a><a href="#implementation-in-a-nutshell" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Implementation in a nutshell</h2>
|
||||
<p>Now that we've seen why we want it and how to use it, the fun part begins: how it actually works.</p>
|
||||
<p>Hot Reloading is built on top of a feature <a href="https://webpack.github.io/hot-module-replacement-with-webpack.md">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p>
|
||||
<p>Hot Reloading is built on top of a feature <a href="https://webpack.js.org/guides/hot-module-replacement/">Hot Module Replacement</a>, or HMR. It was first introduced by Webpack and we implemented it inside of React Native Packager. HMR makes the Packager watch for file changes and send HMR updates to a thin HMR runtime included on the app.</p>
|
||||
<p>In a nutshell, the HMR update contains the new code of the JS modules that changed. When the runtime receives them, it replaces the old modules' code with the new one:</p>
|
||||
<p><img src="/blog/assets/hmr-architecture.png" alt=""></p>
|
||||
<p>The HMR update contains a bit more than just the module's code we want to change because replacing it, it's not enough for the runtime to pick up the changes. The problem is that the module system may have already cached the <em>exports</em> of the module we want to update. For instance, say you have an app composed of these two modules:</p>
|
||||
|
||||
Reference in New Issue
Block a user