mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild website
This commit is contained in:
Circle CI
@@ -181,7 +181,7 @@
|
||||
<p>To install React with npm, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@15.4.0 react-dom@15.4.0
|
||||
</code></pre></div>
|
||||
<p>We recommend using a bundler like <a href="https://webpack.github.io/">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>
|
||||
<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>
|
||||
|
||||
<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to <a href="/react/docs/installation.html#development-and-production-versions">compile it in production mode</a>.</p>
|
||||
|
||||
|
||||
+1
-1
@@ -211,7 +211,7 @@
|
||||
<p>To install React with npm, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@15.4.0 react-dom@15.4.0
|
||||
</code></pre></div>
|
||||
<p>We recommend using a bundler like <a href="https://webpack.github.io/">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>
|
||||
<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>
|
||||
|
||||
<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to <a href="/react/docs/installation.html#development-and-production-versions">compile it in production mode</a>.</p>
|
||||
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+10
-8
@@ -170,8 +170,10 @@ You can do this directly in React with the powerful "context" API.</p>
|
||||
|
||||
<p>If <code>contextTypes</code> is not defined, then <code>context</code> will be an empty object.</p>
|
||||
<h2><a class="anchor" name="parent-child-coupling"></a>Parent-Child Coupling <a class="hash-link" href="#parent-child-coupling">#</a></h2>
|
||||
<p>Context can also let you build an API where parents and children communicate. For example, one library that works this way is <a href="https://react-router.now.sh/basic">React Router V4</a>:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">BasicExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span>
|
||||
<p>Context can also let you build an API where parents and children communicate. For example, one library that works this way is <a href="https://reacttraining.com/react-router">React Router V4</a>:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Router</span><span class="p">,</span> <span class="nx">Route</span><span class="p">,</span> <span class="nx">Link</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">'react-router-dom'</span><span class="p">;</span>
|
||||
|
||||
<span class="kr">const</span> <span class="nx">BasicExample</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">(</span>
|
||||
<span class="o"><</span><span class="nx">Router</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span>
|
||||
<span class="o"><</span><span class="nx">ul</span><span class="o">></span>
|
||||
@@ -180,16 +182,16 @@ You can do this directly in React with the powerful "context" API.</p>
|
||||
<span class="o"><</span><span class="nx">li</span><span class="o">><</span><span class="nx">Link</span> <span class="nx">to</span><span class="o">=</span><span class="s2">"/topics"</span><span class="o">></span><span class="nx">Topics</span><span class="o"><</span><span class="err">/Link></li></span>
|
||||
<span class="o"><</span><span class="err">/ul></span>
|
||||
|
||||
<span class="o"><</span><span class="nx">hr</span><span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">hr</span> <span class="o">/></span>
|
||||
|
||||
<span class="o"><</span><span class="nx">Match</span> <span class="nx">exactly</span> <span class="nx">pattern</span><span class="o">=</span><span class="s2">"/"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Home</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Match</span> <span class="nx">pattern</span><span class="o">=</span><span class="s2">"/about"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Match</span> <span class="nx">pattern</span><span class="o">=</span><span class="s2">"/topics"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Topics</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">exact</span> <span class="nx">path</span><span class="o">=</span><span class="s2">"/"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Home</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="s2">"/about"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">About</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="nx">Route</span> <span class="nx">path</span><span class="o">=</span><span class="s2">"/topics"</span> <span class="nx">component</span><span class="o">=</span><span class="p">{</span><span class="nx">Topics</span><span class="p">}</span> <span class="o">/></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
<span class="o"><</span><span class="err">/Router></span>
|
||||
<span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>By passing down some information from the <code>Router</code> component, each <code>Link</code> and <code>Match</code> can communicate back to the containing <code>Router</code>.</p>
|
||||
<p>By passing down some information from the <code>Router</code> component, each <code>Link</code> and <code>Route</code> can communicate back to the containing <code>Router</code>.</p>
|
||||
|
||||
<p>Before you build components with an API similar to this, consider if there are cleaner alternatives. For example, you can pass entire React component as props if you'd like to.</p>
|
||||
<h2><a class="anchor" name="referencing-context-in-lifecycle-methods"></a>Referencing Context in Lifecycle Methods <a class="hash-link" href="#referencing-context-in-lifecycle-methods">#</a></h2>
|
||||
|
||||
@@ -94,7 +94,7 @@ npm start
|
||||
<h2><a class="anchor" name="adding-react-to-an-existing-application"></a>Adding React to an Existing Application <a class="hash-link" href="#adding-react-to-an-existing-application">#</a></h2>
|
||||
<p>You don't need to rewrite your app to start using React.</p>
|
||||
|
||||
<p>We recommend adding React to a small part of your application, such an individual widget, so you can see if it works well for your use case.</p>
|
||||
<p>We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.</p>
|
||||
|
||||
<p>While React <a href="/react/docs/react-without-es6.html">can be used</a> without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:</p>
|
||||
|
||||
@@ -140,12 +140,6 @@ npm install --save react react-dom
|
||||
<p>If you use <a href="https://github.com/facebookincubator/create-react-app">Create React App</a>, <code>npm run build</code> will create an optimized build of your app in the <code>build</code> folder.</p>
|
||||
<h4><a class="anchor" name="webpack"></a>Webpack <a class="hash-link" href="#webpack">#</a></h4>
|
||||
<p>Include both <code>DefinePlugin</code> and <code>UglifyJsPlugin</code> into your production Webpack configuration as described in <a href="https://webpack.js.org/guides/production-build/">this guide</a>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p><strong>Note:</strong></p>
|
||||
|
||||
<p>This guide works with Webpack 1.x and 2, but is hosted on the new Webpack 2 site. If you're not using the Webpack 2 beta, refer to the <a href="https://webpack.github.io/">Webpack 1.x website</a> for all other documentation.</p>
|
||||
</blockquote>
|
||||
<h4><a class="anchor" name="browserify"></a>Browserify <a class="hash-link" href="#browserify">#</a></h4>
|
||||
<p>Run Browserify with <code>NODE_ENV</code> environment variable set to <code>production</code> and use <a href="https://github.com/mishoo/UglifyJS">UglifyJS</a> as the last build step so that development-only code gets stripped out.</p>
|
||||
<h4><a class="anchor" name="rollup"></a>Rollup <a class="hash-link" href="#rollup">#</a></h4>
|
||||
|
||||
@@ -337,6 +337,8 @@
|
||||
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="kc">null</span><span class="p">}</span><span class="o"><</span><span class="err">/div></span>
|
||||
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="kc">undefined</span><span class="p">}</span><span class="o"><</span><span class="err">/div></span>
|
||||
|
||||
<span class="o"><</span><span class="nx">div</span><span class="o">></span><span class="p">{</span><span class="kc">true</span><span class="p">}</span><span class="o"><</span><span class="err">/div></span>
|
||||
</code></pre></div>
|
||||
<p>This can be useful to conditionally render React elements. This JSX only renders a <code><Header /></code> if <code>showHeader</code> is <code>true</code>:</p>
|
||||
|
||||
+3
-2
@@ -87,11 +87,12 @@
|
||||
|
||||
<p>In addition to giving you an overview of your app's overall performance, <code>Perf</code> is a profiling tool that tells you exactly where you need to put these hooks.</p>
|
||||
|
||||
<p>See these articles by the <a href="http://benchling.engineering">Benchling Engineering Team</a> for a in-depth introduction to performance tooling:</p>
|
||||
<p>See these articles for an introduction to React performance tooling:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c">"How to Benchmark React Components"</a></li>
|
||||
<li><a href="http://benchling.engineering/performance-engineering-with-react/">"Performance Engineering with React"</a></li>
|
||||
<li><a href="http://benchling.engineering/deep-dive-react-perf-debugging/">"A Deep Dive into React Perf Debugging"</a></li>
|
||||
<li><a href="http://benchling.engineering/deep-dive-react-perf-debugging/">"A Deep Dive into React Perf Debugging"</a> </li>
|
||||
</ul>
|
||||
<h3><a class="anchor" name="development-vs.-production-builds"></a>Development vs. Production Builds <a class="hash-link" href="#development-vs.-production-builds">#</a></h3>
|
||||
<p>If you're benchmarking or seeing performance problems in your React apps, make sure you're testing with the <a href="/react/downloads.html">minified production build</a>. The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.</p>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<p>To install React with npm, run:</p>
|
||||
<div class="highlight"><pre><code class="language-bash" data-lang="bash">npm install --save react@15.4.0 react-dom@15.4.0
|
||||
</code></pre></div>
|
||||
<p>We recommend using a bundler like <a href="https://webpack.github.io/">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>
|
||||
<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>
|
||||
|
||||
<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to <a href="/react/docs/installation.html#development-and-production-versions">compile it in production mode</a>.</p>
|
||||
|
||||
|
||||
+10
-3
@@ -179,7 +179,7 @@
|
||||
<h2><a class="anchor" name="what-were-building"></a>What We're Building <a class="hash-link" href="#what-were-building">#</a></h2>
|
||||
<p>Today, we're going to build an interactive tic-tac-toe game. We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.</p>
|
||||
|
||||
<p>If you like, you can check out the final result here: <a href="https://s.codepen.io/ericnakagawa/debug/ALxakj" target="_blank">Final Result</a>. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.</p>
|
||||
<p>If you like, you can check out the final result here: <a href="https://s.codepen.io/ericnakagawa/pen/ALxakj" target="_blank">Final Result</a>. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.</p>
|
||||
<h2><a class="anchor" name="what-is-react"></a>What is React? <a class="hash-link" href="#what-is-react">#</a></h2>
|
||||
<p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces.</p>
|
||||
|
||||
@@ -311,6 +311,8 @@
|
||||
</code></pre></div>
|
||||
<p>Now we're passing down two props from Board to Square: <code>value</code> and <code>onClick</code>. The latter is a function that Square can call. So let's do that by changing <code>render</code> in Square to have:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="o"><</span><span class="nx">button</span> <span class="nx">className</span><span class="o">=</span><span class="s2">"square"</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span> <span class="o">=></span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">onClick</span><span class="p">()}</span><span class="o">></span>
|
||||
<span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">value</span><span class="p">}</span>
|
||||
<span class="o"><</span><span class="err">/button></span>
|
||||
</code></pre></div>
|
||||
<p>This means that when the square is clicked, it calls the onClick function that was passed by the parent. The <code>onClick</code> doesn't have any special meaning here, but it's popular to name handler props starting with <code>on</code> and their implementations with <code>handle</code>. Try clicking a square – you should get an error because we haven't defined <code>handleClick</code> yet. Add it to the Board class:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">handleClick</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
|
||||
@@ -383,7 +385,10 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>Now X and O take turns. Next, change the "status" text in Board's <code>render</code> so that it also displays who is next.</p>
|
||||
<h2><a class="anchor" name="declaring-a-winner"></a>Declaring a Winner <a class="hash-link" href="#declaring-a-winner">#</a></h2>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kr">const</span> <span class="nx">status</span> <span class="o">=</span> <span class="s1">'Next player: '</span> <span class="o">+</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">xIsNext</span> <span class="o">?</span> <span class="s1">'X'</span> <span class="o">:</span> <span class="s1">'O'</span><span class="p">);</span>
|
||||
<span class="p">...</span>
|
||||
</code></pre></div><h2><a class="anchor" name="declaring-a-winner"></a>Declaring a Winner <a class="hash-link" href="#declaring-a-winner">#</a></h2>
|
||||
<p>Let's show when the game is won. A <code>calculateWinner(squares)</code> helper function that takes the list of 9 values has been provided for you at the bottom of the file. You can call it in Board's <code>render</code> function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">render</span><span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kr">const</span> <span class="nx">winner</span> <span class="o">=</span> <span class="nx">calculateWinner</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">squares</span><span class="p">);</span>
|
||||
@@ -462,7 +467,9 @@
|
||||
<span class="o"><</span><span class="nx">ol</span><span class="o">></span><span class="p">{</span><span class="cm">/* TODO */</span><span class="p">}</span><span class="o"><</span><span class="err">/ol></span>
|
||||
<span class="o"><</span><span class="err">/div></span>
|
||||
</code></pre></div>
|
||||
<p>Its <code>handleClick</code> can push a new entry onto the stack by concatenating the new history entry to make a new history array:</p>
|
||||
<p>Since Game is now rendering the status, we can delete <code><div className="status">{status}</div></code> from the Board's <code>render</code> function.</p>
|
||||
|
||||
<p>Game's <code>handleClick</code> can push a new entry onto the stack by concatenating the new history entry to make a new history array:</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">handleClick</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="kr">const</span> <span class="nx">history</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">history</span><span class="p">;</span>
|
||||
<span class="kr">const</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">history</span><span class="p">[</span><span class="nx">history</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">];</span>
|
||||
|
||||
Reference in New Issue
Block a user