https://github.com/pjb0811/react-ts-app-starter
Starter Kit for projects using React + Typescript.
https://github.com/pjb0811/react-ts-app-starter
code-splitting hot-loader react react-hot- react-router-v4 redux server-side-rendering typescript
Last synced: about 1 month ago
JSON representation
Starter Kit for projects using React + Typescript.
- Host: GitHub
- URL: https://github.com/pjb0811/react-ts-app-starter
- Owner: pjb0811
- Created: 2018-01-23T08:36:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-13T05:16:41.000Z (about 7 years ago)
- Last Synced: 2025-02-09T09:41:19.482Z (3 months ago)
- Topics: code-splitting, hot-loader, react, react-hot-, react-router-v4, redux, server-side-rendering, typescript
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-ts-app-starter
Starter Kit for projects using React + Typescript.
## 1. Prerequisites
You need to install [nodejs](https://nodejs.org/) for your OS environment.
### Package configuration
- **React**
- react
- create-react-app
- 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
- **Typescript**
- **CSS Framework**
- semantic-ui-css
- semantic-ui-react
- **Server Side Rendering**
- express
- **Module Loader/bundler**
- webpack
- **Package Manager**
- yarn
## 2. Installation Process
### Installing the package
```
npm install
```
## 3. 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-thunk <-> redux-saga)
#### src/client/Root.tsx
```
// 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 { Provider } from 'mobx-react';
import Store from '../mobx/Store';
const store = new Store();
...
...
```
#### src/server/render.tsx
```
// redux-saga
import { Provider } from 'react-redux';
import configureStore from '../redux-thunk/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: string) => {
....
return {
html,
// redux-thunk, redux-saga
state: store.getState(),
// mobx
state: toJS(store),
helmet,
};
};
```
## 4. File Manifest
```
+-- src
| +-- client
| +-- Root.tsx
| +-- components
| +-- pages
| +-- Menu.tsx
| +-- redux-saga
| +-- actions
| +-- api
| +-- reducers
| +-- sagas
| +-- store.ts
| +-- redux-thunk
| +-- reducers
| +-- store.ts
| +-- server
| +-- render.tsx
| +-- App.tsx
| +-- index.tsx
```
## 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)