├── .nvmrc
├── .npmrc
├── .prettierignore
├── .prettierrc
├── src
├── index.scss
├── state
│ ├── saga.js
│ ├── reducer.js
│ └── index.js
├── routes
│ ├── Home
│ │ ├── style.scss
│ │ ├── index.js
│ │ ├── sagas.js
│ │ ├── Container.js
│ │ ├── reducer.js
│ │ └── Home.js
│ └── index.js
└── index.js
├── .travis.yml
├── .stylelintrc
├── .eslintrc
├── public
└── index.html
├── .editorconfig
├── README.md
├── config
├── webpack.dev.js
└── webpack.prod.js
├── package.json
├── .gitignore
└── .eslintignore
/.nvmrc:
--------------------------------------------------------------------------------
1 | v8.11.4
2 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | save-exact = true
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "singleQuote": true
4 | }
5 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | @import '~normalize.css/normalize';
2 | @import '~bulma/bulma';
3 |
--------------------------------------------------------------------------------
/src/state/saga.js:
--------------------------------------------------------------------------------
1 | import createSagaMiddleware from 'redux-saga';
2 |
3 | export default createSagaMiddleware();
4 |
--------------------------------------------------------------------------------
/src/state/reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 |
3 | export default asyncReducers =>
4 | combineReducers({
5 | ...asyncReducers,
6 | });
7 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 |
3 | language: node_js
4 |
5 | # Keep empty to user version from .nvmrc
6 | node_js: null
7 |
8 | script:
9 | - yarn lint
10 | - yarn build:prod
11 |
--------------------------------------------------------------------------------
/src/routes/Home/style.scss:
--------------------------------------------------------------------------------
1 | @import '~bulma/sass/utilities/initial-variables';
2 | @import '~bulma/sass/utilities/derived-variables';
3 |
4 | .home {
5 | &__spinner {
6 | color: $light;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "stylelint-config-standard",
4 | "stylelint-config-prettier"
5 | ],
6 | "plugins": ["stylelint-prettier"],
7 | "rules": {
8 | "prettier/prettier": true
9 | }
10 | }
--------------------------------------------------------------------------------
/src/routes/Home/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Loadable from 'react-loadable';
3 |
4 | export default Loadable({
5 | loader: () => import(/* webpackChunkName: "home" */ './Container'),
6 | loading() {
7 | return Loading...
;
8 | },
9 | });
10 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": ["airbnb", "eslint-config-prettier"],
4 | "plugins": ["eslint-plugin-prettier"],
5 | "rules": {
6 | "prettier/prettier": "error",
7 | "react/jsx-filename-extension": false,
8 | "import/no-extraneous-dependencies": false
9 | },
10 | "env": {
11 | "browser": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/routes/Home/sagas.js:
--------------------------------------------------------------------------------
1 | import { put, takeEvery } from 'redux-saga/effects';
2 | import { delay } from 'redux-saga';
3 |
4 | function* shuffleFeatures() {
5 | yield delay(3000);
6 | yield put({
7 | type: 'SHUFFLE-DONE',
8 | });
9 | }
10 |
11 | function* shuffleFeaturesSaga() {
12 | yield takeEvery('SHUFFLE-REQUESTED', shuffleFeatures);
13 | }
14 |
15 | export default [shuffleFeaturesSaga];
16 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React-Kit
7 |
8 |
9 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/routes/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { BrowserRouter } from 'react-router-dom';
4 | import { renderRoutes } from 'react-router-config';
5 | import { hot } from 'react-hot-loader';
6 |
7 | import Home from './Home';
8 |
9 | const routes = [
10 | {
11 | component: Home,
12 | },
13 | ];
14 |
15 | const Router = () => {renderRoutes(routes)};
16 |
17 | export default hot(module)(Router);
18 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import '@babel/polyfill';
2 |
3 | import React from 'react';
4 | import ReactDOM from 'react-dom';
5 | import { Provider } from 'react-redux';
6 |
7 | import Router from './routes';
8 | import state from './state';
9 |
10 | import './index.scss';
11 |
12 | const render = () => {
13 | try {
14 | ReactDOM.render(
15 |
16 |
17 | ,
18 | document.getElementById('root')
19 | );
20 | } catch (err) {
21 | // eslint-disable-next-line
22 | console.error(err)
23 | }
24 | };
25 |
26 | render();
27 |
--------------------------------------------------------------------------------
/src/routes/Home/Container.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 |
3 | import Home from './Home';
4 | import state from '../../state';
5 | import reducer from './reducer';
6 | import sagas from './sagas';
7 |
8 | state.injectReducer('home', reducer);
9 | state.injectSagas(sagas);
10 |
11 | const mapDispatchToProps = dispatch => ({
12 | shuffle: () => dispatch({ type: 'SHUFFLE-REQUESTED' }),
13 | });
14 |
15 | const mapStateToProps = s => ({
16 | features: s.home.features,
17 | loading: s.home.loading,
18 | });
19 |
20 | export default connect(
21 | mapStateToProps,
22 | mapDispatchToProps
23 | )(Home);
24 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: http://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | # Unix-style newlines with a newline ending every file
7 | [*]
8 | indent_size = 2
9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 |
13 | # Matches multiple files with brace expansion notation
14 | # Set default charset
15 | [*.{js,css,html}]
16 | charset = utf-8
17 | indent_style = space
18 | ndent_size = 2
19 |
20 | [*.js]
21 | max_line_length = 120
22 |
23 | # Matches the exact files either package.json or .travis.yml
24 | [{package.json,.travis.yml}]
25 | indent_style = space
26 | indent_size = 2
27 |
--------------------------------------------------------------------------------
/src/routes/Home/reducer.js:
--------------------------------------------------------------------------------
1 | const initialState = {
2 | features: [
3 | {
4 | heading: 'Predictable state managment',
5 | title: 'Redux',
6 | },
7 | {
8 | heading: 'Multiple and dynamic bundles',
9 | title: 'Code splitting',
10 | },
11 | {
12 | heading: 'Declarative routing',
13 | title: 'React Router',
14 | },
15 | {
16 | heading: 'Realtime update',
17 | title: 'React Hot reload',
18 | },
19 | ],
20 | loading: false,
21 | };
22 |
23 | function shuffle(array) {
24 | const copy = array.slice();
25 |
26 | for (let i = copy.length - 1; i > 0; i -= 1) {
27 | const j = Math.floor(Math.random() * (i + 1));
28 | const temp = copy[i];
29 | copy[i] = copy[j];
30 | copy[j] = temp;
31 | }
32 |
33 | return copy;
34 | }
35 |
36 | export default function reducer(state = initialState, action) {
37 | switch (action.type) {
38 | case 'SHUFFLE-REQUESTED':
39 | return {
40 | ...state,
41 | loading: true,
42 | };
43 | case 'SHUFFLE-DONE':
44 | return {
45 | ...state,
46 | features: shuffle(state.features),
47 | loading: false,
48 | };
49 | default:
50 | return state;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/state/index.js:
--------------------------------------------------------------------------------
1 | import { applyMiddleware, compose, createStore } from 'redux';
2 |
3 | import createRootReducer from './reducer';
4 | import sagaMiddleware from './saga';
5 |
6 | export class State {
7 | constructor(initialState = {}) {
8 | const enhancers = [];
9 | const middleware = [sagaMiddleware];
10 |
11 | let composeEnhancers = compose;
12 |
13 | if (process.env.NODE_ENV === 'development') {
14 | const composeWithDevToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__; // eslint-disable-line no-underscore-dangle,max-len
15 | if (typeof composeWithDevToolsExtension === 'function') {
16 | composeEnhancers = composeWithDevToolsExtension;
17 | }
18 | }
19 |
20 | this.store = createStore(
21 | () => {}, // No-op root reducer
22 | initialState,
23 | composeEnhancers(applyMiddleware(...middleware), ...enhancers)
24 | );
25 | this.store.asyncReducers = {};
26 | this.store.sagas = {};
27 | }
28 |
29 | injectReducer(key, reducer) {
30 | this.store.asyncReducers[key] = reducer;
31 | this.store.replaceReducer(createRootReducer(this.store.asyncReducers));
32 | }
33 |
34 | injectSaga(saga) {
35 | if (saga.name in this.store.sagas) {
36 | this.store.sagas[saga.name].cancel();
37 | this.store.sagas[saga.name] = sagaMiddleware.run(saga);
38 | } else {
39 | this.store.sagas[saga.name] = sagaMiddleware.run(saga);
40 | }
41 | }
42 |
43 | injectSagas(sagas) {
44 | if (Array.isArray(sagas)) sagas.forEach(saga => this.injectSaga(saga));
45 | else this.injectSaga(sagas);
46 | }
47 | }
48 |
49 | export default new State();
50 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **DEPRECATED**
2 | I'm archiving this repo. [Create React App](https://github.com/facebook/create-react-app) does a better job, is well maintained and support more options.
3 |
4 | ---
5 |
6 | Do you prefer `typescript` ? If so, use the [dedicated branch](https://github.com/thomasthiebaud/react-kit/tree/typescript) instead
7 |
8 |
9 | # Setup
10 |
11 | This project was tested with nodejs version `8.9.4`. You can easily install this version using [nvm](https://github.com/creationix/nvm) and then running
12 |
13 | nvm install
14 |
15 | and then install modules with
16 |
17 | npm install
18 |
19 | ## Scripts
20 |
21 | The following scripts are available
22 |
23 | |Name |Description |
24 | |-------------|----------------------------------------------------------------------------------------------|
25 | |build | Alias for `build:prod` |
26 | |build:dev | Create development bundle |
27 | |build:prod | Create optimized production bundle |
28 | |clean | Remove existing bundle and error files |
29 | |lint | Run linter |
30 | |lint:fix | Run linter and try to fix errors |
31 | |start | Alias for `start:dev` |
32 | |start:dev | Start developemnt server using development bundle |
33 | |start:prod | Start production server using production bundle |
34 |
--------------------------------------------------------------------------------
/config/webpack.dev.js:
--------------------------------------------------------------------------------
1 | const autoprefixer = require('autoprefixer');
2 |
3 | const Dotenv = require('dotenv-webpack');
4 | const HtmlWebPackPlugin = require('html-webpack-plugin');
5 |
6 | module.exports = {
7 | mode: 'development',
8 | module: {
9 | rules: [
10 | {
11 | test: /\.js$/,
12 | exclude: /node_modules/,
13 | use: {
14 | loader: 'babel-loader',
15 | options: {
16 | presets: ['@babel/preset-env', '@babel/preset-react'],
17 | plugins: ['react-hot-loader/babel', 'syntax-dynamic-import', 'transform-regenerator'],
18 | },
19 | },
20 | },
21 | {
22 | test: /\.scss$/,
23 | use: [
24 | 'style-loader',
25 | 'css-loader',
26 | {
27 | loader: 'postcss-loader',
28 | options: {
29 | plugins: () => [autoprefixer()],
30 | },
31 | },
32 | {
33 | loader: 'sass-loader',
34 | options: {
35 | includePaths: ['node_modules', 'src'],
36 | },
37 | },
38 | ],
39 | },
40 | {
41 | test: /\.css$/,
42 | use: [
43 | 'style-loader',
44 | 'css-loader',
45 | {
46 | loader: 'postcss-loader',
47 | options: {
48 | plugins: () => [autoprefixer()],
49 | },
50 | },
51 | ],
52 | },
53 | {
54 | test: /\.(eot|svg|ttf|woff|woff2)$/,
55 | loader: 'file-loader',
56 | },
57 | {
58 | test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
59 | loader: 'url-loader',
60 | options: {
61 | limit: 10000,
62 | },
63 | },
64 | ],
65 | },
66 | plugins: [
67 | new Dotenv(),
68 | new HtmlWebPackPlugin({
69 | template: './public/index.html',
70 | filename: './index.html',
71 | }),
72 | ],
73 | serve: {
74 | open: true,
75 | },
76 | };
77 |
--------------------------------------------------------------------------------
/src/routes/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Spinner from 'react-spinkit';
4 |
5 | import './style.scss';
6 |
7 | class Home extends React.PureComponent {
8 | render() {
9 | const { features, loading, shuffle } = this.props;
10 | return (
11 |
12 |
23 |
24 |
25 |
A ready-to-go React App
26 |
Featuring...
27 |
43 |
46 |
47 |