From 4b841c7f2c10bc3df944b753c1196d59b1d1e07a Mon Sep 17 00:00:00 2001
From: Clark Du <clark.duxin@gmail.com>
Date: Fri, 8 Dec 2017 22:58:05 +0800
Subject: [PATCH] example: add jsx

---
 examples/hello-world-jsx/pages/about.vue      | 15 -------------
 examples/hello-world-jsx/pages/index.js       |  8 -------
 examples/jsx/README.md                        |  5 +++++
 examples/jsx/components/test.vue              | 17 +++++++++++++++
 .../{hello-world-jsx => jsx}/package.json     |  4 ++--
 examples/jsx/pages/about.js                   | 21 +++++++++++++++++++
 examples/jsx/pages/index.js                   | 20 ++++++++++++++++++
 7 files changed, 65 insertions(+), 25 deletions(-)
 delete mode 100644 examples/hello-world-jsx/pages/about.vue
 delete mode 100644 examples/hello-world-jsx/pages/index.js
 create mode 100644 examples/jsx/README.md
 create mode 100644 examples/jsx/components/test.vue
 rename examples/{hello-world-jsx => jsx}/package.json (71%)
 create mode 100644 examples/jsx/pages/about.js
 create mode 100755 examples/jsx/pages/index.js

diff --git a/examples/hello-world-jsx/pages/about.vue b/examples/hello-world-jsx/pages/about.vue
deleted file mode 100644
index 26ed2649b..000000000
--- a/examples/hello-world-jsx/pages/about.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-export default {
-  asyncData({ req }) {
-    return {
-      name: req ? 'server' : 'client'
-    }
-  },
-  render(h) {
-    return <div>
-      <p>Hi from {this.name}</p>
-      <nuxt-link to="/">Home page</nuxt-link>
-    </div>
-  }
-}
-</script>
diff --git a/examples/hello-world-jsx/pages/index.js b/examples/hello-world-jsx/pages/index.js
deleted file mode 100644
index 675e8981f..000000000
--- a/examples/hello-world-jsx/pages/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  render(h) {
-    return <div>
-      <h1>Welcome !</h1>
-      <nuxt-link to="/about">About page</nuxt-link>
-    </div>
-  }
-}
diff --git a/examples/jsx/README.md b/examples/jsx/README.md
new file mode 100644
index 000000000..068b72b54
--- /dev/null
+++ b/examples/jsx/README.md
@@ -0,0 +1,5 @@
+# Render Functions & JSX Example
+
+## Documentation
+
+Vue: https://vuejs.org/v2/guide/render-function.html
diff --git a/examples/jsx/components/test.vue b/examples/jsx/components/test.vue
new file mode 100644
index 000000000..f7f9ca041
--- /dev/null
+++ b/examples/jsx/components/test.vue
@@ -0,0 +1,17 @@
+<template>
+  <p v-html="data"></p>
+</template>
+
+<script>
+export default {
+  props: {
+    data: String
+  }
+}
+</script>
+
+<style scoped>
+p {
+  padding: 5px 20px;
+}
+</style>
diff --git a/examples/hello-world-jsx/package.json b/examples/jsx/package.json
similarity index 71%
rename from examples/hello-world-jsx/package.json
rename to examples/jsx/package.json
index abcca8b41..37594061f 100644
--- a/examples/hello-world-jsx/package.json
+++ b/examples/jsx/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "hello-nuxt-jsx",
+  "name": "nuxt-jsx",
   "dependencies": {
-    "nuxt": "latest"
+    "nuxt": "next"
   },
   "scripts": {
     "dev": "nuxt",
diff --git a/examples/jsx/pages/about.js b/examples/jsx/pages/about.js
new file mode 100644
index 000000000..4bd675870
--- /dev/null
+++ b/examples/jsx/pages/about.js
@@ -0,0 +1,21 @@
+
+import Test from '~/components/test.vue'
+
+export default {
+  head: {
+    title: 'About Page',
+    meta: [
+      { hid: 'description', name: 'description', content: 'About page description' }
+    ]
+  },
+  components: {
+    Test
+  },
+  render() {
+    return <div class='container'>
+      <h1>About page</h1>
+      <test data='I am test component' />
+      <p><nuxt-link to='/'>Home page</nuxt-link></p>
+    </div>
+  }
+}
diff --git a/examples/jsx/pages/index.js b/examples/jsx/pages/index.js
new file mode 100755
index 000000000..ab5d1cb93
--- /dev/null
+++ b/examples/jsx/pages/index.js
@@ -0,0 +1,20 @@
+export default {
+  head: {
+    title: 'Home page 🚀',
+    meta: [
+      { hid: 'description', name: 'description', content: 'Home page description' }
+    ],
+    script: [
+      { src: '/head.js' },
+      // Supported since 1.0
+      { src: '/body.js', body: true },
+      { src: '/defer.js', defer: '' }
+    ]
+  },
+  render() {
+    return <div class='container'>
+      <h1>Home page 🚀</h1>
+      <nuxt-link to='/about'>About page</nuxt-link>
+    </div>
+  }
+}