Skip to content

Commit 7025854

Browse files
ejbpejbp
committed
improved project template structure
1 parent bf2e4e3 commit 7025854

30 files changed

+422
-115
lines changed

Diff for: ‎README.md

+23-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ Create a brand new reactjs with redux template project
44
## motivation
55
I was tired of building a structure of a project from scratch, so I've built this script to produce a base structure of a reactjs project with redux
66

7+
## what you'll get?
8+
A react-js project structure with redux and a simple working example that can be built using webpack. Includes history navigation with redux.
9+
710
## setup
811

912
```shell
@@ -13,7 +16,7 @@ chmod 755 ./create-reactjs-webpack-project.sh
1316
## create a Project
1417

1518
```shell
16-
./create-reactjs-webpack-project.sh [YOUR-PROJECT-DIR]
19+
./create-reactjs-webpack-project.sh [NEW-PROJECT-DIR]
1720
```
1821

1922
## run
@@ -27,6 +30,9 @@ yarn start
2730

2831
```shell
2932
yarn build-prod #prod
33+
34+
or
35+
3036
yarn build-dev #dev
3137
```
3238

@@ -36,9 +42,23 @@ yarn build-dev #dev
3642
## check or customize initial modules install at
3743
```./create-reactjs-webpack-project.sh``` #before run script
3844

45+
## Project sample structure
46+
47+
### UI
48+
49+
50+
### Redux
51+
actions: ```src/store```
52+
53+
epics: ```src/store/epics```
54+
55+
middlewares: ```src/store/middlewares```
56+
57+
reducers: ```src/store/reducers ```
58+
3959
## notes
40-
optimized for macosx.
60+
Initial bash script is optimized for macosx environment.
4161

42-
If you want to run on other platforms you may give a try but it's not tested! The script may need slightly changes on seed commands and eventually at print functions.
62+
If you want to run on other platforms you may give a try but it's not tested! In these cases, the script may need slightly changes on seed commands and eventually at print functions.
4363

4464

Diff for: ‎_root/.babelrc

-19
This file was deleted.

Diff for: ‎_root/.browserslistrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
since 2005
2+
> 0.01%

Diff for: ‎_root/.eslintrc.js

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
"parser": "babel-eslint",
5+
"parserOptions": {
6+
"ecmaFeatures": {
7+
"jsx": true
8+
},
9+
"ecmaVersion": 2018,
10+
"sourceType": "module"
11+
},
12+
"env": {
13+
"browser": true,
14+
"es6": true
15+
},
16+
"extends": [
17+
"eslint:recommended",
18+
"airbnb",
19+
"prettier",
20+
"prettier/react"
21+
],
22+
"globals": {
23+
"Atomics": "readonly",
24+
"SharedArrayBuffer": "readonly",
25+
"cordova": "readonly",
26+
"__DEV__": "readonly",
27+
"__webpack_public_path__": "writable" //to use as hack to cordova bundled app
28+
},
29+
"plugins": [
30+
"react",
31+
"prettier",
32+
"react-hooks",
33+
"compat"
34+
],
35+
"rules": {
36+
"react/jsx-filename-extension": [
37+
1,
38+
{
39+
"extensions": [".js", ".jsx"]
40+
}
41+
],
42+
"compat/compat": "error",
43+
"react/prop-types": 0,
44+
"no-underscore-dangle": 0,
45+
"import/imports-first": ["error", "absolute-first"],
46+
"import/newline-after-import": "error",
47+
"import/no-unresolved": [2, {
48+
"ignore": ["apr-intercept"]
49+
}],
50+
"camelcase": [
51+
"error",
52+
{
53+
allow: ["__webpack_public_path__"]
54+
}
55+
],
56+
"react-hooks/rules-of-hooks": "error",
57+
"react-hooks/exhaustive-deps": "warn",
58+
"import/prefer-default-export": "off",
59+
"array-callback-return": "off",
60+
"class-methods-use-this": "off",
61+
"eqeqeq": "off",
62+
"react/destructuring-assignment": "off",
63+
"consistent-return": "off",
64+
"no-plusplus": "off",
65+
"react/forbid-prop-types": "off",
66+
"no-unused-vars": [
67+
"error",
68+
{
69+
"vars": "all",
70+
"args": "none",
71+
"ignoreRestSiblings": true,
72+
"caughtErrors": "none"
73+
}
74+
],
75+
"no-param-reassign": ["error", { "props": true } ]
76+
},
77+
"settings": {
78+
"import/resolver": {
79+
"node": {
80+
"paths": ["."]
81+
},
82+
"webpack": {
83+
"config": './webpack.config.js'
84+
},
85+
"polyfills": [
86+
// Example of marking entire API and all methods and properties as polyfilled
87+
"Promise",
88+
// Example of marking specific method of an API as polyfilled
89+
"WebAssembly.compile",
90+
// Example of API with no property (i.e. a function)
91+
"fetch",
92+
// Example of instance method, must add `.prototype.`
93+
"Array.prototype.push",
94+
"Object.prototype.values",
95+
],
96+
}
97+
}
98+
};

Diff for: ‎_root/.gitignore

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.DS_STORE
2+
node_modules
3+
*~
4+
*.pyc
5+
.grunt
6+
_SpecRunner.html
7+
__benchmarks__
8+
remote-repo/
9+
.module-cache
10+
*.log
11+
chrome-user-data
12+
*.sublime-project
13+
*.sublime-workspace
14+
.idea
15+
*.iml
16+
.vscode
17+
*.swp
18+
*.swo
19+
.sentry.properties
20+
.sentry.properties.dev

Diff for: ‎_root/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# My React.JS project using redux
2+
A react.js redux project
3+
4+
## notes
5+
bootstraped with https://github.com/ejbp/create-reactjs-with-redux
6+
7+

Diff for: ‎_root/babel.config.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
module.exports = function (api) {
2+
api.cache(true);
3+
4+
return {
5+
presets: [
6+
"@babel/preset-react",
7+
[
8+
"@babel/preset-env",
9+
{
10+
useBuiltIns: false,
11+
debug: false
12+
}
13+
]
14+
],
15+
plugins: [
16+
"@babel/plugin-syntax-dynamic-import",
17+
"@babel/plugin-transform-regenerator",
18+
"@babel/plugin-transform-react-jsx",
19+
"@babel/plugin-syntax-import-meta",
20+
"@babel/plugin-proposal-class-properties",
21+
"@babel/plugin-proposal-json-strings",
22+
"@babel/plugin-transform-modules-commonjs",
23+
["@babel/plugin-transform-runtime", {
24+
"absoluteRuntime": false,
25+
"corejs": false, //2
26+
"helpers": true,
27+
"regenerator": true,
28+
"useESModules": false
29+
}],
30+
"dynamic-import-webpack"
31+
]
32+
};
33+
}

Diff for: ‎_root/postcss.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
plugins: [
3+
require('autoprefixer')({
4+
browsers: [`last 50 versions`]
5+
})
6+
]
7+
}

Diff for: ‎_root/src/navigation-history/index.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createBrowserHistory } from 'history';
2+
3+
let browserHistory = undefined;
4+
5+
if (typeof cordova !== 'undefined') {
6+
const basename = `${cordova.file.applicationDirectory}www/`.replace('file://', '');
7+
8+
browserHistory = createBrowserHistory({
9+
basename: basename
10+
});
11+
12+
}else {
13+
browserHistory = createBrowserHistory();
14+
}
15+
16+
export default browserHistory;

Diff for: ‎_root/src/navigation/PrivateRoute/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
33
import PrivateRouteComponent from "./component";
44

55
PrivateRouteComponent.propTypes = {
6-
component: PropTypes.func.isRequired
6+
component: PropTypes.any.isRequired
77
};
88

99
const mapStateToProps = ({user}, props) => {

Diff for: ‎_root/src/navigation/RouteWithProps/component.js

+24-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
1-
import React from "react";
2-
import { Route } from "react-router";
1+
import React from 'react';
2+
import { Route } from 'react-router';
33

4-
const RouteWithProps = ({ component: Component, path, exact, ...rest }) => {
5-
return <Route exact={exact} path={path} render={props => <Component {...props} {...rest} />} />;
6-
};
4+
class RouteWithProps extends React.PureComponent {
5+
constructor(props) {
6+
super(props);
7+
this.getRender = this.getRender.bind(this);
8+
}
9+
10+
getRender() {
11+
const { component: Component, path, exact, requires, ...rest } = this.props;
12+
return <Component {...rest} />;
13+
}
14+
15+
render() {
16+
const { path, exact } = this.props;
17+
return (
18+
<Route
19+
exact={exact}
20+
path={path}
21+
render={this.getRender}
22+
/>
23+
);
24+
}
25+
}
726

827
export default RouteWithProps;

Diff for: ‎_root/src/navigation/RouteWithProps/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
22
import RouteWithPropsComponent from "./component";
33

44
RouteWithPropsComponent.propTypes = {
5-
component: PropTypes.func.isRequired,
5+
component: PropTypes.any.isRequired,
66
path: PropTypes.string.isRequired
77
};
88

Diff for: ‎_root/src/store/actions/user/fetch-user.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const fetchUser = () => (dispatch, getState) => {
88

99
return dispatch({
1010
type: FETCH_USER,
11-
payload: fetch('https://randomuser.me/api/')
11+
payload: fetch('https://randomuser.me/api/').then(response => response.json())
1212
});
1313

1414
};

Diff for: ‎_root/src/store/epics/user/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ofType, combineEpics } from "redux-observable";
2-
import { map, filter, ignoreElements } from "rxjs/operators";
2+
import { map, ignoreElements } from "rxjs/operators";
33
import actions from "../../actions";
44

55
const touchEvent = (action$, store) =>
@@ -8,7 +8,7 @@ const touchEvent = (action$, store) =>
88
actions.user.touchUser.action
99
),
1010
map(action => {
11-
console.log("Action captured on user epic: ", action);
11+
__DEV__ && console.log("Action captured on user epic: ", action);
1212
}),
1313
ignoreElements()
1414
);

0 commit comments

Comments
 (0)