add template literals example

example-list.js

@@ -5,6 +5,7 @@ import Destructuring from "./examples/destructuring/index.jsx";
 import Generators from "./examples/generators/index.jsx";
 import ObjectLiterals from "./examples/object-literals/index.jsx";
 import SpreadOperator from "./examples/spread-operator/index.jsx";
+import TemplateLiterals from "./examples/template-literals/index.jsx";
 
 export default [{
   name: "Arrow functions",
@@ -27,4 +28,7 @@ export default [{
 }, {
   name: "Spread operator",
   example: SpreadOperator
+}, {
+  name: "Template literals",
+  example: TemplateLiterals
 }];

examples/template-literals/a.example

@@ -0,0 +1,6 @@
+const firstName = "Foo";
+const lastName = "Bar";
+
+const a = `Full name: ${firstName} ${lastName}`;
+
+console.log(a);

examples/template-literals/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react/addons';
+import Playground from 'component-playground';
+import Code from '../../code.jsx';
+import a from 'raw!./a.example';
+
+export default React.createClass({
+  render() {
+    return (
+      <div>
+        <p>
+          Template literals improve the experience of constructing strings by allowing embedded expressions.
+        </p>
+        <p>
+          The output of <Code>{'`My name is ${name}`'}</Code> is equivalent to <Code>{'"My name is " + name'}</Code>
+        </p>
+        <Playground codeText={a} es6Console={true} scope={{}} />
+      </div>
+    );
+  }
+});