Selaa lähdekoodia

added create-react-app, integrated redux/bootstrap/observables

Brandon Wong 6 vuotta sitten
vanhempi
commit
00e3f392b2
6 muutettua tiedostoa jossa 151 lisäystä ja 0 poistoa
  1. 19 0
      front/epics.js
  2. 21 0
      front/index.js
  3. 45 0
      front/main.sh
  4. 23 0
      front/reducers.js
  5. 36 0
      front/store.js
  6. 7 0
      maker.sh

+ 19 - 0
front/epics.js

@@ -0,0 +1,19 @@
+
+import { combineEpics } from 'redux-observable';
+import 'rxjs';// used for example epic
+
+const rootEpic = combineEpics(
+    
+);
+
+// use this
+//export { rootEpic as default };
+
+
+// delete example
+export default function exampleEpic(action$) {
+    return action$.filter(x => x.type === 'PING')
+        .mapTo({type: 'PONG'});
+};
+
+

+ 21 - 0
front/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'react-router-redux';
+import store, { history } from './store.js';
+import registerServiceWorker from './registerServiceWorker.js';
+
+import App from './App.js';
+
+ReactDOM.render(<Provider store={store}>
+    <ConnectedRouter history={history}>
+      <div>
+        <App />
+      </div>
+    </ConnectedRouter>
+  </Provider>,
+  document.getElementById('root'));
+
+registerServiceWorker();
+

+ 45 - 0
front/main.sh

@@ -0,0 +1,45 @@
+#!/bin/bash
+
+
+script_folder=`dirname $0`
+foldername="$1"
+
+
+echo "maker folder $maker_folder"
+echo "folder name $foldername"
+
+
+/home/nxe0003/nodebootstraptest/node_modules/.bin/create-react-app $foldername
+
+cd $foldername
+
+
+# add packages
+yarn add react-bootstrap \
+         redux react-redux \
+         react-router react-router-dom react-router-redux@next \
+         rxjs redux-observable
+
+#TODO: integrate react-router routes
+#TODO: integrate react-router-bootstrap https://github.com/react-bootstrap/react-router-bootstrap
+
+
+# add to .gitignore
+echo "" >> .gitignore
+echo "*.swp" >> .gitignore
+
+
+# add to package.json
+sed -i 's/"private": true/"private": true,\n  "author": "Brandon Wong <projects@brwong.net> (https:\/\/www.brwong.net\/)"/g' package.json
+
+
+# add to index.html
+sed -i 's_  </head>_\n    <!-- Bootstrap CSS -->\n    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">\n    <!-- Optional Bootstrap theme -->\n    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">\n  </head>_' public/index.html
+
+
+# copy files
+cp $script_folder/epics.js $script_folder/index.js $script_folder/reducers.js $script_folder/store.js src/
+
+
+
+

+ 23 - 0
front/reducers.js

@@ -0,0 +1,23 @@
+
+
+import { combineReducers } from 'redux';
+//import reducer from './reducer.js';
+
+const mainReducer = combineReducers({
+    
+});
+
+// use this
+//export { mainReducer as default };
+
+
+// delete example
+const defaultState = Object.freeze({});
+export default function example(state = defaultState, action = {type:'NO-OP'}) {
+    switch( action.type ) {
+        default:
+            return state;
+    }
+}
+
+

+ 36 - 0
front/store.js

@@ -0,0 +1,36 @@
+
+import { createStore, applyMiddleware, compose } from 'redux';
+import { routerMiddleware } from 'react-router-redux';
+import { createEpicMiddleware } from 'redux-observable';
+import createHistory from 'history/createBrowserHistory';
+import rootReducer from './reducers.js';
+import rootEpic from './epics.js';
+
+
+export const history = createHistory();
+
+const initialState = {},
+    enhancers = [],
+    middleware = [routerMiddleware(history), createEpicMiddleware(rootEpic)];
+
+if( process.env.NODE_ENV === 'development' ) {
+    const devToolsExtension = window.devToolsExtension;
+
+    if( typeof devToolsExtension === 'function' ) {
+        enhancers.push(devToolsExtension());
+    }
+}
+
+const composedEnhancers = compose(
+    applyMiddleware(...middleware),
+    ...enhancers,
+);
+
+const store = createStore(
+    rootReducer,
+    initialState,
+    composedEnhancers,
+);
+
+export default store;
+

+ 7 - 0
maker.sh

@@ -17,6 +17,13 @@ then
     exit
 fi
 
+if [ "$projecttype" = "front" ]
+then
+    $maker_folder/front/main.sh $2
+    exit
+fi
+
+
 if [[ -d $maker_folder/$projecttype ]]
 then
     echo "project type AVAILABLE"