tmp

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "react"
+  ]
+}

lib/views/layout/2column.html

@@ -9,14 +9,14 @@
       {% block title %}{{ config.crowi['app:title'] }}{% endblock %}
     </a>
   {% if searchConfigured() %}
-  <form class="navbar-form navbar-left search-top" role="search">
+  <div class="navbar-form navbar-left search-top" role="search" id="search-top">
     <div class="form-group input-group search-top-input-group">
       <input type="text" id="search-top-input" class="search-top-input form-control" placeholder="Search ...">
       <span class="input-group-btn">
         <button class="btn btn-default" type="button"><i class="search-top-icon fa fa-search"></i></button>
       </span>
     </div>
-  </form>
+  </div>
   <div class="search-suggest" id="search-suggest">
   </div>
   {% endif %}

lib/views/layout/layout.html

@@ -108,7 +108,6 @@
 </body>
 {% endblock %}
 
+<script src="/js/app.js"></script>
 </html>
 
-
-

lib/views/page_list.html

@@ -38,6 +38,8 @@
 {% block content_main_before %}
 {% endblock %}
 
+<div id="xxx"></div>
+
 <div class="page-list content-main {% if req.body.pageForm %}on-edit{% endif %}"
   id="content-main"
   data-path="{{ path }}"

package.json

@@ -30,6 +30,11 @@
   "dependencies": {
     "async": "~1.5.0",
     "aws-sdk": "~2.2.26",
+    "axios": "~0.9.1",
+    "babel-core": "~6.7.6",
+    "babel-loader": "~6.2.4",
+    "babel-preset-es2015": "~6.6.0",
+    "babel-preset-react": "~6.5.0",
     "basic-auth-connect": "~1.0.0",
     "bluebird": "~3.0.5",
     "body-parser": "~1.14.1",
@@ -69,7 +74,7 @@
     "kerberos": "0.0.17",
     "marked": "~0.3.5",
     "method-override": "~2.3.1",
-    "mkdirp": "^0.5.1",
+    "mkdirp": "~0.5.1",
     "moment": "~2.13.0",
     "mongoose": "4.2.5",
     "mongoose-paginate": "4.2.0",
@@ -77,6 +82,8 @@
     "multer": "~0.1.8",
     "nodemailer": "~1.2.2",
     "nodemailer-ses-transport": "~1.1.0",
+    "react": "~15.0.1",
+    "react-dom": "~15.0.1",
     "redis": "~0.12.1",
     "reveal.js": "~3.2.0",
     "socket.io": "~1.3.0",
@@ -84,7 +91,8 @@
     "sprintf": "~0.1.5",
     "swig": "~1.4.0",
     "time": "~0.11.0",
-    "vinyl-source-stream": "~1.1.0"
+    "vinyl-source-stream": "~1.1.0",
+    "webpack": "~1.13.0"
   },
   "devDependencies": {
     "chai": "~1.10.0",
@@ -98,6 +106,7 @@
     "start": "node app.js",
     "test": "gulp test",
     "build": "gulp",
+    "jsbuild": "webpack",
     "postinstall": "gulp"
   },
   "env": {

resource/js/app.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import HeaderSearchBox from './components/Header/SearchBox';
+
+class Crowi extends React.Component {
+  constructor(props) {
+    super(props);
+    //this.state = {count: props.initialCount};
+    //this.tick = this.tick.bind(this);
+  }
+
+  render() {
+    return (
+      <h1>Hello</h1>
+    );
+  }
+}
+
+ReactDOM.render(<Hello />, document.getElementById('xxx'));

resource/js/components/Header/SearchBox.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+export class SearchBox extends React.Component {
+}

webpack.config.js

@@ -0,0 +1,36 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  entry: {
+    app: './resource/js/app.js',
+  },
+  output: {
+    path: path.join(__dirname + "/public/js"),
+    filename: "[name].js"
+  },
+  resolve: {
+    modulesDirectories: [
+      './node_modules',
+    ],
+  },
+  module: {
+    loaders: [
+      {
+        test: /.jsx?$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        query: {
+          presets: ['es2015', 'react']
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      jQuery: "jquery",
+      $: "jquery",
+      jquery: "jquery"
+    })
+  ]
+};