mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild manually
This commit is contained in:
Dan Abramov
@@ -240,10 +240,10 @@
|
||||
<p>We recommend using <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a> for managing front-end dependencies. If you're new to package managers, the <a href="https://yarnpkg.com/en/docs/getting-started">Yarn documentation</a> is a good place to get started.</p>
|
||||
|
||||
<p>To install React with Yarn, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn add react@15.5.0 react-dom@15.5.0
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn add react@^15.5.0 react-dom@^15.5.0
|
||||
</code></pre></div>
|
||||
<p>To install React with npm, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@15.5.0 react-dom@15.5.0
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@^15.5.0 react-dom@^15.5.0
|
||||
</code></pre></div>
|
||||
<p>We recommend using a bundler like <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a> so you can write modular code and bundle it together into small packages to optimize load time.</p>
|
||||
|
||||
|
||||
+2
-2
@@ -270,10 +270,10 @@
|
||||
<p>We recommend using <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a> for managing front-end dependencies. If you're new to package managers, the <a href="https://yarnpkg.com/en/docs/getting-started">Yarn documentation</a> is a good place to get started.</p>
|
||||
|
||||
<p>To install React with Yarn, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn add react@15.5.0 react-dom@15.5.0
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn add react@^15.5.0 react-dom@^15.5.0
|
||||
</code></pre></div>
|
||||
<p>To install React with npm, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@15.5.0 react-dom@15.5.0
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@^15.5.0 react-dom@^15.5.0
|
||||
</code></pre></div>
|
||||
<p>We recommend using a bundler like <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a> so you can write modular code and bundle it together into small packages to optimize load time.</p>
|
||||
|
||||
|
||||
@@ -130,7 +130,6 @@
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/react/tree/master/src"><code>src</code></a> is the source code of React. <strong>If your change is related to the code, <code>src</code> is where you'll spend most of your time.</strong></li>
|
||||
<li><a href="https://github.com/facebook/react/tree/master/docs"><code>docs</code></a> is the React documentation website. When you change APIs, make sure to update the relevant Markdown files.</li>
|
||||
<li><a href="https://github.com/facebook/react/tree/master/examples"><code>examples</code></a> contains a few small React demos with different build setups.</li>
|
||||
<li><a href="https://github.com/facebook/react/tree/master/packages"><code>packages</code></a> contains metadata (such as <code>package.json</code>) for all packages in the React repository. Nevertheless, their source code is still located inside <a href="https://github.com/facebook/react/tree/master/src"><code>src</code></a>.</li>
|
||||
<li><code>build</code> is the build output of React. It is not in the repository but it will appear in your React clone after you <a href="/react/contributing/how-to-contribute.html#development-workflow">build it</a> for the first time.</li>
|
||||
</ul>
|
||||
|
||||
@@ -78,6 +78,8 @@
|
||||
|
||||
<p>It is very technical and assumes a strong understanding of React public API as well as how it's divided into core, renderers, and the reconciler. If you're not very familiar with the React codebase, read <a href="/react/contributing/codebase-overview.html">the codebase overview</a> first.</p>
|
||||
|
||||
<p>It also assumes an understanding of the <a href="/react/blog/2015/12/18/react-components-elements-and-instances.html">differences between React components, their instances, and elements</a>.</p>
|
||||
|
||||
<p>The stack reconciler is powering all the React production code today. It is located in <a href="https://github.com/facebook/react/tree/master/src/renderers/shared/stack"><code>src/renderers/shared/stack/reconciler</code></a> and is used by both React DOM and React Native.</p>
|
||||
|
||||
<h3>Video: Building React from Scratch</h3>
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
</code></pre></div>
|
||||
<p>The keys of the passed object (that is, <code>left</code> and <code>right</code>) are used as keys for the entire set of children, and the order of the object's keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.</p>
|
||||
|
||||
<p>The return value of <code>createFragment</code> should be treated as an opaque object; you can use the <a href="/react/docs/react-api.html#react.children"><code>React.Children</code></a> helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.</p>
|
||||
<p>The return value of <code>createFragment</code> should be treated as an opaque object; you can use the <a href="https://facebook.github.io/react/docs/react-api.html#react.children"><code>React.Children</code></a> helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.</p>
|
||||
|
||||
|
||||
<div class="docs-prevnext">
|
||||
|
||||
@@ -333,7 +333,7 @@
|
||||
<ul>
|
||||
<li>React calls the function specified as <code>onChange</code> on the DOM <code><input></code>. In our case, this is the <code>handleChange</code> method in <code>TemperatureInput</code> component.</li>
|
||||
<li>The <code>handleChange</code> method in the <code>TemperatureInput</code> component calls <code>this.props.onTemperatureChange()</code> with the new desired value. Its props, including <code>onTemperatureChange</code>, were provided by its parent component, the <code>Calculator</code>.</li>
|
||||
<li>When it previously rendered, the <code>Calculator</code> has specified that <code>onTemperatureChange</code> of the Celsius <code>TemperatureInput</code> is the <code>Calculator</code>'s <code>handleCelsiusChange</code> method, and <code>onTemperatureChange</code> of the Fahrenheit <code>TemperatureInput</code> is the <code>Calculator</code>'s <code>handleFahrehnheitChange</code> method. So either of these two <code>Calculator</code> methods gets called depending on which input we edited.</li>
|
||||
<li>When it previously rendered, the <code>Calculator</code> has specified that <code>onTemperatureChange</code> of the Celsius <code>TemperatureInput</code> is the <code>Calculator</code>'s <code>handleCelsiusChange</code> method, and <code>onTemperatureChange</code> of the Fahrenheit <code>TemperatureInput</code> is the <code>Calculator</code>'s <code>handleFahrenheitChange</code> method. So either of these two <code>Calculator</code> methods gets called depending on which input we edited.</li>
|
||||
<li>Inside these methods, the <code>Calculator</code> component asks React to re-render itself by calling <code>this.setState()</code> with the new input value and the current scale of the input we just edited.</li>
|
||||
<li>React calls the <code>Calculator</code> component's <code>render</code> method to learn what the UI should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here.</li>
|
||||
<li>React calls the <code>render</code> methods of the individual <code>TemperatureInput</code> components with their new props specified by the <code>Calculator</code>. It learns what their UI should look like.</li>
|
||||
|
||||
@@ -152,10 +152,10 @@
|
||||
<p>We recommend using <a href="https://yarnpkg.com/">Yarn</a> or <a href="https://www.npmjs.com/">npm</a> for managing front-end dependencies. If you&#39;re new to package managers, the <a href="https://yarnpkg.com/en/docs/getting-started">Yarn documentation</a> is a good place to get started.</p>
|
||||
|
||||
<p>To install React with Yarn, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn add react@15.5.0 react-dom@15.5.0
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">yarn add react@^15.5.0 react-dom@^15.5.0
|
||||
</code></pre></div>
|
||||
<p>To install React with npm, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@15.5.0 react-dom@15.5.0
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@^15.5.0 react-dom@^15.5.0
|
||||
</code></pre></div>
|
||||
<p>We recommend using a bundler like <a href="https://webpack.js.org/">webpack</a> or <a href="http://browserify.org/">Browserify</a> so you can write modular code and bundle it together into small packages to optimize load time.</p>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user