https://github.com/pjb0811/react-app-starter
Starter Kit for projects using React.
https://github.com/pjb0811/react-app-starter
code-spliting code-splitting mobx mobx-react react react-hot-loader-v4 react-redux react-router-v4 redux server-side-rendering
Last synced: about 1 month ago
JSON representation
Starter Kit for projects using React.
- Host: GitHub
- URL: https://github.com/pjb0811/react-app-starter
- Owner: pjb0811
- Created: 2018-02-06T08:39:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-13T05:13:25.000Z (about 7 years ago)
- Last Synced: 2025-02-09T09:41:20.905Z (3 months ago)
- Topics: code-spliting, code-splitting, mobx, mobx-react, react, react-hot-loader-v4, react-redux, react-router-v4, redux, server-side-rendering
- Language: JavaScript
- Homepage:
- Size: 129 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-app-starter
Starter Kit for projects using React.
## Prerequisites
You need to install [nodejs](https://nodejs.org/) 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](http://github.com/pjb0811)
## Contact Information
- [[email protected]](mailto:[email protected])
- [http://github.com/pjb0811](http://github.com/pjb0811)