diff --git a/example-list.js b/example-list.js index 122f26c..98d0c00 100644 --- a/example-list.js +++ b/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 }]; diff --git a/examples/template-literals/a.example b/examples/template-literals/a.example new file mode 100644 index 0000000..b9262a9 --- /dev/null +++ b/examples/template-literals/a.example @@ -0,0 +1,6 @@ +const firstName = "Foo"; +const lastName = "Bar"; + +const a = `Full name: ${firstName} ${lastName}`; + +console.log(a); diff --git a/examples/template-literals/index.jsx b/examples/template-literals/index.jsx new file mode 100644 index 0000000..57fbb29 --- /dev/null +++ b/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 ( +
+

+ Template literals improve the experience of constructing strings by allowing embedded expressions. +

+

+ The output of {'`My name is ${name}`'} is equivalent to {'"My name is " + name'} +

+ +
+ ); + } +});