mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rebuild website
This commit is contained in:
@@ -421,9 +421,15 @@
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<p>To install React DOM and build your bundle after installing browserify:</p>
|
||||
<div class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="nv">$ </span>npm install --save react react-dom
|
||||
<span class="nv">$ </span>browserify -t babelify main.js -o bundle.js
|
||||
</code></pre></div><h2><a class="anchor" name="quick-start-without-npm"></a>Quick Start Without npm <a class="hash-link" href="#quick-start-without-npm">#</a></h2>
|
||||
<div class="highlight"><pre><code class="language-sh" data-lang="sh"><span class="nv">$ </span>npm install --save react react-dom babelify babel-preset-react
|
||||
<span class="nv">$ </span>browserify -t <span class="o">[</span> babelify --presets <span class="o">[</span> react <span class="o">]</span> <span class="o">]</span> main.js -o bundle.js
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>If you are using ES2015, you will want to also use the <code>babel-preset-es2015</code> package.</p>
|
||||
</blockquote>
|
||||
<h2><a class="anchor" name="quick-start-without-npm"></a>Quick Start Without npm <a class="hash-link" href="#quick-start-without-npm">#</a></h2>
|
||||
<p>If you're not ready to use npm yet, you can download the starter kit which includes prebuilt copies of React and React DOM.</p>
|
||||
|
||||
<div class="buttons-unit downloads">
|
||||
@@ -467,11 +473,18 @@
|
||||
<p>Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.</p>
|
||||
<h3><a class="anchor" name="offline-transform"></a>Offline Transform <a class="hash-link" href="#offline-transform">#</a></h3>
|
||||
<p>First install the <a href="http://babeljs.io/">Babel</a> command-line tools (requires <a href="https://www.npmjs.com/">npm</a>):</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install --global babel
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install --global babel-cli
|
||||
npm install babel-preset-react
|
||||
</code></pre></div>
|
||||
<p>Then, translate your <code>src/helloworld.js</code> file to plain JavaScript:</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">babel src --watch --out-dir build
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">babel --presets react src --watch --out-dir build
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>If you are using ES2015, you will want to also use the <code>babel-preset-es2015</code> package.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>The file <code>build/helloworld.js</code> is autogenerated whenever you make a change. Read the <a href="http://babeljs.io/docs/usage/cli/">Babel CLI documentation</a> for more advanced usage.</p>
|
||||
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
|
||||
<span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'h1'</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="s1">'Hello, world!'</span><span class="p">),</span>
|
||||
|
||||
@@ -416,16 +416,16 @@
|
||||
<p>The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.</p>
|
||||
</blockquote>
|
||||
<h3><a class="anchor" name="productionizing-precompiled-jsx"></a>Productionizing: Precompiled JSX <a class="hash-link" href="#productionizing-precompiled-jsx">#</a></h3>
|
||||
<p>If you have <a href="https://www.npmjs.com/">npm</a>, you can run <code>npm install -g babel</code>. Babel has built-in support for React v0.12+. Tags are automatically transformed to their equivalent <code>React.createElement(...)</code>, <code>displayName</code> is automatically inferred and added to all React.createClass calls.</p>
|
||||
<p>If you have <a href="https://www.npmjs.com/">npm</a>, you can run <code>npm install -g babel-cli</code>. Babel has built-in support for React v0.12+. Tags are automatically transformed to their equivalent <code>React.createElement(...)</code>, <code>displayName</code> is automatically inferred and added to all <code>React.createClass</code> calls.</p>
|
||||
|
||||
<p>This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: <code>babel --watch src/ --out-dir lib/</code>.</p>
|
||||
|
||||
<blockquote>
|
||||
<p>Note:</p>
|
||||
|
||||
<p>If you are using babel 6.x, you will need to install the relevant preset/plugins. To get started, you can run <code>npm install -g babel babel-preset-react</code> and then run <code>babel --presets react --watch src/ --out-dir lib/</code>. For more information: check out the <a href="http://babeljs.io/blog/2015/10/29/6.0.0/">babel 6 blog post</a></p>
|
||||
</blockquote>
|
||||
<p>Beginning with Babel 6, there are no transforms included by default. This means that options must be specified when running the <code>babel</code> command, or a <code>.babelrc</code> must specify options. Additional packages must also be installed which bundle together a number of transforms, called presets. The most common use when working with React will be to include the <code>es2015</code> and <code>react</code> presets. More information about the changes to Babel can be found in <a href="http://babeljs.io/blog/2015/10/29/6.0.0/">their blog post announcing Babel 6</a>.</p>
|
||||
|
||||
<p>Here is an example of what you will do if using ES2015 syntax and React:</p>
|
||||
<div class="highlight"><pre><code class="language-text" data-lang="text">npm install babel-preset-es2015 babel-preset-react
|
||||
babel --presets es2015,react --watch src/ --out-dir lib/
|
||||
</code></pre></div>
|
||||
<p>By default JSX files with a <code>.js</code> extension are transformed. Run <code>babel --help</code> for more information on how to use Babel.</p>
|
||||
|
||||
<p>Example output:</p>
|
||||
|
||||
Reference in New Issue
Block a user