Skip to content

pjb0811/react-app-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
jbpark
Mar 13, 2018
3c93536 · Mar 13, 2018

History

34 Commits
Mar 8, 2018
Feb 18, 2018
Mar 8, 2018
Mar 13, 2018
Mar 8, 2018
Mar 12, 2018
Feb 18, 2018
Mar 12, 2018
Mar 8, 2018
Mar 12, 2018

Repository files navigation

react-app-starter

Starter Kit for projects using React.

Prerequisites

You need to install nodejs for your OS environment.

Package configuration

  • React
    • react
    • create-react-app
      • react-app-rewired
    • react-router@v4
    • react-helmet
    • react-hot-loader@v4
    • react-loadable
  • Redux
    • react-redux
    • redux-actions
    • redux-logger
    • redux-thunk
      • redux-promise-middleware
    • redux-saga
    • immutable
  • MobX
    • mobx-react
  • CSS Framework
    • semantic-ui-css
    • semantic-ui-react
  • Server Side Rendering
    • express
  • Module Loader/bundler
    • webpack
  • Package Manager
    • yarn

Installation Process

Installing the package

  npm install

Getting Started

Run local server

  npm run start

Build source

  npm run build

Run the development server after the source build

  npm run serve

Change the state management library(mobx <-> redux-saga <-> redux-thunk)

src/client/Root.js

// redux-saga
import { Provider  } from 'react-redux';
import store from '../redux-saga/store';

// redux-thunk
import { Provider  } from 'react-redux';
import store from '../redux-thunk/store';

// mobx
import { Provider } from 'mobx-react';
import Store from '../mobx/Store';
const store = new Store();
...
...

src/server/render.js

// redux-saga
import { Provider  } from 'react-redux';
import configureStore from '../redux-saga/store';
const store = configureStore();

// redux-thunk
import { Provider } from 'react-redux';
import store from '../redux-thunk/store';

// mobx
import { toJS } from 'mobx';
import { Provider } from 'mobx-react';
import Store from '../mobx/Store';
const store = new Store()
...
...
const render = async (location) => {
  ....
  return {
    html,
    // redux-thunk, redux-saga
    state: store.getState(),
    // mobx
    state: toJS(store),
    helmet,
  };
};

SSR settings for async data.

Planned to proceed.

File Manifest

+-- server
|   +-- index.js
+-- src
|   +-- client
|       +-- Root.js
|   +-- components
|       +-- menus
|       +-- pages
|   +-- mobx
|       +-- Store.jsx
|   +-- redux-saga
|       +-- actions
|       +-- api
|       +-- reducers
|       +-- sagas.js
|       +-- store.js
|   +-- redux-thunk
|       +-- reducers
|       +-- store.js
|   +-- server
|       +-- render.js
|   +-- App.js
|   +-- index.js

Copyright / End User License

MIT © pjb0811

Contact Information