init react

2026-01-10 09:52:51 +00:00 · 2016-08-10 18:22:49 +00:00
parent e53e8c0fdc
commit 1651e7c803
6 changed files with 161 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,5 @@
 config.json
 mywebsite
 mywebsite.exe
+node_modules
+dist
--- a/client/js/pages/Index.js
+++ b/client/js/pages/Index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default class Index extends React.Component{
+    render(){
+        return(
+                <div>This is the index test component</div>
+            );
+    }
+}
--- a/client/js/routes.js
+++ b/client/js/routes.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {browserHistory, Router, Route, IndexRoute} from 'react-router';
+
+import Index from './pages/Index';
+
+class App extends React.Component{
+    render(){
+        return(
+            <div>{React.cloneElement(this.props.children, this.props)}</div>  
+        );
+    }
+}
+
+ReactDOM.render((
+    <Router history={browserHistory}>
+        <Route path="/" component={App}>
+            <IndexRoute component={Index}/>
+            <Route path="/test" component={Index}/>
+        </Route>
+    </Router>
+),document.getElementById('app'));
--- a/index.html
+++ b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="author" content="Mitchell Gerber">
+  <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:300&subset=latin,greek' rel='stylesheet' type='text/css'>
+  <title>mitchel.io</title>
+</head>
+<body>
+	<script>
+		(function(i, s, o, g, r, a, m) {i['GoogleAnalyticsObject'] = r;i[r] = i[r] || function() {
+        (i[r].q = i[r].q || []).push(arguments)}, i[r].l = 1 * new Date();
+        a = s.createElement(o),m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m)})
+        (window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+	</script>
+
+<!--it's happening!!!-->
+<div id="app"></div>
+</body>
+
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "mywebsite",
+  "version": "1.0.0",
+  "description": "My personal website built with React and Go",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack -p",
+    "c9": "webpack-dev-server --port $PORT --host $IP --hot --content-base dist --history-api-fallback",
+    "dev": "webpack-dev-server --content-base dist --inline --hot --history-api-fallback",
+    "prod-linux": "export NODE_ENV=production && webpack -p",
+    "prod-windows": "set NODE_ENV=production & webpack -p",
+    "deploy": "goapp deploy",
+    "serve": "goapp serve"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mgerb/mywebsite.git"
+  },
+  "author": "Mitchell Gerber",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/mgerb/mywebsite/issues"
+  },
+  "homepage": "https://github.com/mgerb/mywebsite#readme",
+  "dependencies": {
+    "babel": "^6.5.2",
+    "babel-core": "^6.13.2",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-react-html-attrs": "^2.0.0",
+    "babel-plugin-transform-class-properties": "^6.11.5",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-preset-es2015": "^6.13.2",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "css-loader": "^0.23.1",
+    "exports-loader": "^0.6.3",
+    "file-loader": "^0.9.0",
+    "font-awesome": "^4.6.3",
+    "html-webpack-plugin": "^2.22.0",
+    "node-sass": "^3.8.0",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "react-router": "^2.6.1",
+    "sass-loader": "^4.0.0",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1",
+    "wowjs": "^1.1.3"
+  }
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,53 @@
+var debug = process.env.NODE_ENV !== "production";
+var webpack = require('webpack');
+var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  devtool: debug ? "inline-sourcemap" : null,
+  entry: "./client/js/routes.js",
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        exclude: /(node_modules)/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['react', 'es2015', 'stage-0'],
+          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
+        }
+      },
+      { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"},
+      { test: /\.css$/, loader: "style-loader!css-loader" },
+      { test: /\.png$/, loader: "url-loader?limit=100000&name=images/[hash].[ext]" },
+      { test: /\.jpg$/, loader: "url-loader?limit=100000&name=images/[hash].[ext]" },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml&name=images/[hash].[ext]"},
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[hash].[ext]"},
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[hash].[ext]"},
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream&name=fonts/[hash].[ext]"},
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file?name=fonts/[hash].[ext]"},
+      {
+        test: require.resolve('wowjs/dist/wow.js'),
+        loader: 'exports?this.WOW'
+      }
+    ]
+  },
+  output: {
+    path: __dirname + "/dist/",
+    publicPath: "/dist/",
+    filename: "client.min.js"
+  },
+  plugins: debug ? [] : [
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
+  ],
+  plugins: [
+    new HtmlWebpackPlugin({
+      fileName: 'index.html',
+      template: 'index.html',
+      inject: 'body',
+      hash: true
+    })  
+  ]
+};