index.html

---
layout: default
custom_js:
- index.js
third_party_js:
- //cdn.rawgit.com/thejameskyle/slick/lazy-load-responsive-2/slick/slick.min.js
---

<div class="jumbotron text-center">
  <div class="container-fluid">
    <h1>Babel is a JavaScript compiler.</h1>
    <p>Use next generation JavaScript, today.</p>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <a class="jumbotron-callout" href="https://github.com/thejameskyle/babel-handbook">
          <p>Check out the Babel Handbook!</p>
        </a>
      </div>
    </div>
  </div>

  <iframe src="https://ghbtns.com/github-btn.html?user=babel&repo=babel&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>

<div class="container">
  <div class="row featurette text-center">
    <h2 class="text-center">Babel transforms your JavaScript</h2>

    <div class="col-lg-6">
      <h3>You put JavaScript in</h3>
      <div class="lead">
{% highlight javascript %}
myJavaScript("foobar");
{% endhighlight %}
      </div>
    </div>

    <div class="col-lg-6">
      <h3>And get JavaScript out</h3>
      <div class="lead">
{% highlight javascript %}
myNewTransformedJavaScript("yay!");
{% endhighlight %}
      </div>
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-6">
      <h2>ES2015 and beyond</h2>
      <p>Babel has support for the latest version of JavaScript through syntax transformers. These allow you to use new syntax, <strong>right now</strong> without waiting for browser support. Check out our <a href="http://babeljs.io/docs/plugins/preset-es2015">ES2015 preset</a> to get started. <a href="/docs/learn-es2015/">Learn about ES2015 &rarr;</a></p>
    </div>

    <div class="col-md-6">
      <div class="col-md-6">
        <ul class="babel-tick-list">
          <li>Arrow functions</li>
          <li>Async functions</li>
          <li>Async generator functions</li>
          <li>Classes</li>
          <li>Class properties</li>
          <li>Computed property names</li>
          <li>Constants</li>
          <li>Decorators</li>
          <li>Default parameters</li>
          <li>Destructuring</li>
          <li>Exponentiation operator</li>
          <li>For-of</li>
          <li>Function bind</li>
        </ul>
      </div>

      <div class="col-md-6">
        <ul class="babel-tick-list">
          <li>Generators</li>
          <li>Let scoping</li>
          <li>Modules</li>
          <li>Module export extensions</li>
          <li>Object rest/spread</li>
          <li>Property method assignment</li>
          <li>Property name shorthand</li>
          <li>Rest parameters</li>
          <li>React</li>
          <li>Spread</li>
          <li>Template literals</li>
          <li>Type annotations</li>
          <li>Unicode regex</li>
        </ul>
      </div>
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-5">
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kr">export</span> <span class="k">default</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">getInitialState</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">{</span> <span class="nx">num</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">getRandomNumber</span><span class="p">()</span> <span class="p">};</span>
  <span class="p">},</span>

  <span class="nx">getRandomNumber</span><span class="p">()</span><span class="o">:</span> <span class="nx">number</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">ceil</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="mi">6</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="nx">render</span><span class="p">()</span><span class="o">:</span> <span class="nx">any</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">&lt;div&gt;</span>
      <span class="s2">Your dice roll:</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">num</span><span class="p">}</span>
    <span class="nx">&lt;/div&gt;;</span>
  <span class="p">}</span>
<span class="p">});</span></code></pre></div>
    </div>

    <div class="col-md-7">
      <h2>JSX and React</h2>
      <p>Babel has support for JSX and Flow. Check out our <a href="http://babeljs.io/docs/plugins/preset-react/">React preset</a> to get started. Use it together with the <a href="https://github.com/babel/babel-sublime">babel-sublime</a> package to bring syntax highlighting to a whole new level.</p>
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-6">
      <h2>Pluggable</h2>
      <p>Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. <a href="/docs/plugins/">Learn more &rarr;</a></p>
    </div>
    <div class="col-md-6">
      <img src="{{ site.baseurl }}/images/featurettes/blueprint.png?t={{ site.time | date_to_xmlschema }}" alt="Plugins and Browsers" class="featurette-image img-responsive">
    </div>
  </div>

  <hr class="featurette-divider">

  <!--<div class="row featurette">
    <div class="col-md-4">
      <h2>Readable</h2>
      <p>
        Formatting is retained if possible so your generated code is as similar
        as possible.
      </p>
    </div>
    <div class="col-md-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
      </div>
      <div class="col-md-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
    </div>
  </div>

  <hr class="featurette-divider">-->

  <!--<hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-4">
      <h2>Debuggable</h2>
      <p><strong>Source map</strong> support so you can debug your compiled code with ease.</p>
    </div>
    <div class="col-md-8">
      <img src="{{ site.baseurl }}/images/featurettes/debuggable.png?t={{ site.time | date_to_xmlschema }}" alt="Debuggable Sourcemaps" class="featurette-image img-responsive">
    </div>
  </div>-->

  <!--<hr class="featurette-divider">

  <div class="row featurette">
    <div class="col-md-4 col-md-push-8">
      <h2>Compact</h2>
      <p>Babel uses the least amount of code possible with no dependence on a bulky runtime.</p>
    </div>
    <div class="col-md-4 col-md-pull-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
    </div>
    <div class="col-md-4 col-md-pull-4 col-sm-6">
{% highlight javascript %}
{% endhighlight %}
    </div>
  </div>-->

  <div class="text-center">
    <div class="btn-wrapper btn-wrapper-lg">
      <a href="{{ site.baseurl }}/docs/learn-es2015/" class="btn btn-featured">Learn ES2015</a>
      <a href="{{ site.baseurl }}/docs/setup/" class="btn btn-featured">Setup Babel</a>
    </div>
  </div>

  <hr class="featurette-divider">

  <div class="featurette">
    <h2 class="text-center">
      <a href="{{ site.baseurl }}/users/">
        Who's using Babel?
      </a>
    </h2>

    <div class="babel-user-container babel-slider">
      {% for user in site.data.users limit:18 %}
        <div class="col-md-4 col-sm-6">
          <a class="babel-user" href="{{user.url}}" title="{{user.name}}">
            <img class="img-responsive" data-lazy="/images/users/{{user.logo}}" alt="{{user.name}}">
          </a>
        </div>
      {% endfor %}
    </div>

    <div class="text-center">
      <div class="btn-wrapper">
        <a href="{{ site.baseurl }}/users/" class="btn btn-sm btn-featured">Meet more Users</a>
      </div>
    </div>
  </div>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.1/slick.css">
</div>