[WIP] Porting the frontend to React.

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
-    ["env"]
+    "env",
+    "react"
   ],
 
   "plugins": [

frontend/README.md

@@ -0,0 +1,8 @@
+NekoPost Frontend
+==================
+This folder is for the frontend of NekoPost. The current plan for the frontend
+is to port it from Vue.js to React.js. *Perhaps* we can finish it? >.>
+
+The main focus now is to port the old Vue code to React. Next up would be
+finishing the functions (which is not completed even in the original Vue code),
+and also reorganize the code properly (it's still a mess now).

frontend/app.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
+
+import About from './views/about.js'
+import FAQ from './views/faq.js'
+
+// Required for Webpack to find it
+import Stylesheet from './style/app.scss'
+
+class App extends React.Component {
+    render() {
+        return (
+            <Router>
+                <div>
+                    <nav className="navigation"> 
+                        <div><Link to="/"><img id="logo" src="logo.png" alt="logo"/></Link></div>
+                        <ul>
+                            <li><Link to="/post_now">Post</Link></li>
+                            <li><Link to="/faq">FAQ</Link></li>
+                            <li><Link to="/about">About us</Link></li>
+                        </ul>
+                    </nav>
+
+                    <main className="content" role="main">
+                        <transition name="fade" mode="out-in">
+                            <Route path="/post_now" component={() => <p>Post</p>} />
+                            <Route path="/faq" component={FAQ} />
+                            <Route path="/about" component={About} />
+                            <Route exact path="/" component={() => <p>Post</p>} />
+                        </transition>
+                    </main>
+                </div>
+            </Router>
+        )
+    }
+}
+
+export default App;

frontend/main.js

@@ -1,36 +1,5 @@
-'use strict'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './app'
 
-import Vue from 'vue'
-import App from './App.vue'
-import store from './store'
-import router from './router'
-import * as filters from './utils/filters'
-import { sync } from 'vuex-router-sync'
-
-// sync the router with the vuex store.
-// this registers `store.state.route`
-sync(store, router)
-
-// register global utility filters.
-Object.keys(filters).forEach((key) => {
-  Vue.filter(key, filters[key])
-})
-
-// devtools
-Vue.config.devtools = (process.env.NODE_ENV !== 'production')
-
-// create the app instance.
-// here we inject the router and store to all child components,
-// making them available everywhere as `this.$router` and `this.$store`.
-const app = new Vue({
-  router,
-  store,
-  ...App // Object spread copying everything from App.vue
-})
-
-// mount the vue instance to DOM
-// store.replaceState(window.__INITIAL_STATE__)
-app.$mount('#app')
-
-if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator)
-  navigator.serviceWorker.register('/service-worker.js')
+ReactDOM.render(<App/>, document.getElementById("app"))

frontend/style/main.scss

@@ -483,3 +483,11 @@
         }
     }
 }
+
+/* 
+    * This one was originally put in the *.vue files, but since we don't put
+    * <style> tags in JSX, I've decided to put it here.
+*/
+.divider {
+    padding: 10vmin 0 1rem;
+}

frontend/views/about.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { BrowserRouter as Router, Link } from 'react-router-dom'
+
+class About extends React.Component {
+    render() {
+        return (
+            <Router>
+                <section className="about-view">
+                    <main className="content" role="main">
+                        <article>
+                            <div className="page-content about">
+                                <h1>Introduction</h1>
+                                <small>装逼 &middot; Bragging &middot; ひけらかす</small>
+
+                                <div className="divider"></div>
+                                <p>Any questions? <Link to="/faq">Read the FAQ.</Link>🐣</p>
+                            </div>
+                        </article>
+                    </main>
+                </section>
+            </Router>
+        )
+    }
+}
+
+export default About;

frontend/views/faq.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { BrowserRouter, Link } from 'react-router-dom'
+
+class FAQ extends React.Component {
+    render() {
+        // This is rarely a faq >.>
+        return (
+            <BrowserRouter>
+                <section class="about-view">
+                    <main class="content" role="main">
+                        <article>
+                            <div class="page-content about">
+                                <h1>FAQ</h1>
+                                <small>问题 &middot; Problem &middot; 質問</small>
+                                <h2>What is NekoPost?</h2>
+                                <strong>NekoPost is a simple platform that lets you
+                                        to communicate your ideas freely.</strong>
+
+                                <h2>Can I advertise/sponsor NekoPost?</h2>
+                                <p>Yes please! 😻</p>
+
+                                <h2>What is the tech stack of NekoPost?</h2>
+                                <p>Glad you asked! It's written in HTML, CSS 
+                                (😾 of course) and Node.js, using React
+                                framework for the single-page app development.
+                                Hosted on a Ubuntu running Nginx for reverse proxy.
+                                </p>
+
+                                <p>For more information you may take a look at 
+                                <Link to="#"> here.</Link>
+                                </p>
+                            </div>
+                        </article>
+                    </main>
+                </section>
+            </BrowserRouter>
+        )
+    }
+}
+
+export default FAQ;

package.json

@@ -54,15 +54,14 @@
     "mongoose": "^4.6.5",
     "mongoose-auto-increment": "^5.0.1",
     "passport-facebook": "^2.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "1.1.1",
     "recaptcha-validator": "^1.0.4444",
     "serialize-javascript": "^1.3.0",
     "serve-favicon": "^2.3.0",
-    "uuid": "^3.1.0",
-    "vue": "^2.4.2",
-    "vue-autosize-textarea": "^0.0.1",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.0.0",
-    "vuex-router-sync": "^5.0.0"
+    "uuid": "^3.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.6",
@@ -73,6 +72,7 @@
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
     "cross-env": "^5.1.1",
     "css-loader": "^0.28.7",
     "eslint": "^4.6.0",
@@ -94,10 +94,6 @@
     "supertest": "^3.0.0",
     "sw-precache-webpack-plugin": "^0.11.4",
     "url-loader": "^0.6.2",
-    "vue-hot-reload-api": "^2.1.0",
-    "vue-html-loader": "^1.2.4",
-    "vue-loader": "^13.0.4",
-    "vue-template-compiler": "^2.4.2",
     "webpack": "^3.5.5",
     "webpack-dev-server": "^2.7.1"
   }

webpack.config.js

@@ -18,12 +18,12 @@ module.exports = {
             ? 'build.[chunkhash:5].js'
             : 'build.js'
   },
-  resolve: {
+   resolve: {
     alias: { 'vue$': 'vue/dist/vue.common.js' }
   },
   module: {
     rules: [
-      {
+      /* {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
@@ -36,6 +36,20 @@ module.exports = {
             scss: 'style-loader!css-loader!sass-loader'
           }
         }
+      }, */
+      {
+        test: /\.scss$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'sass-loader'
+          }
+        ]
       },
       {
         test: /\.js$/,
@@ -109,6 +123,7 @@ if (process.env.NODE_ENV === 'production') {
     }),
     // extract vendor chunks for better caching
     // https://github.com/zypeh/memetwork
+    // ^ shameless self-advertisement right there, haha
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor'
     }),