Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New React Env
{
"extends": ["airbnb", "prettier"],
"env": {
"browser": true,
"node": true,
"mocha": true
},
"globals": {
"describe": false,
"it": false,
"before": false,
"beforeEach": false
},
// config for multiple node_modules
// "settings": {
// "import/external-module-folders": ["node_modules", "client/node_modules"]
// },
"rules": {
"import/prefer-default-export": 0,
"jsx-a11y/anchor-is-valid": 0,
"linebreak-style": 0
}
}
# Install create-react-app
npm i -g create-react-app
# Create Project
create-react-app project-name
cd project-name
# Add redux, prop-types and react-router
yarn add redux react-redux redux-thunk prop-types react-router-dom redux-logger
# Add eslint and eslint-config-airbnb
# Linux/OSX users can run
(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
# Windows users can either install all the peer dependencies manually, or use the install-peerdeps cli tool
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb
# Add prettier, husky and lint-staged
yarn add husky lint-staged prettier eslint-config-prettier
/**
* Actions
*/
const INCREMENT = "counter/INCREMENT";
const DECREMENT = "counter/DECREMENT";
const INCREMENTING = "counter/INCREMENTING";
const DECREMENTING = "counter/DECREMENTING";
const initialState = {
incrementing: false,
decrementing: false,
count: 0
};
/**
* Reducer
*/
export default (state = initialState, action) => {
switch (action.type) {
case INCREMENTING:
return {
...state,
incrementing: true
};
case INCREMENT:
return {
...state,
incrementing: false,
count: action.result || state.count + 1
};
case DECREMENTING:
return {
...state,
decrementing: true
};
case DECREMENT:
return {
...state,
decrementing: false,
count: action.result || state.count - 1
};
default:
return state;
}
};
/**
* Action Creators
*/
const incrementing = () => ({
type: INCREMENTING
});
const increment = count => ({
type: INCREMENT,
result: count
});
const decrementing = () => ({
type: DECREMENTING
});
const decrement = count => ({
type: DECREMENT,
result: count
});
const incrementAsync = () => (dispatch, getState) =>
new Promise(async resolve => {
dispatch(incrementing());
const { count } = getState().count;
const { result } = await fetch(
`https://newton.now.sh/simplify/${count}+1`
).then(res => res.json());
dispatch(increment(result));
});
const decrementAsync = () => (dispatch, getState) =>
new Promise(async resolve => {
dispatch(decrementing());
const { count } = getState().count;
const { result } = await fetch(
`https://newton.now.sh/simplify/${count}-1`
).then(res => res.json());
dispatch(decrement(result));
});
// modules/index.js
import { combineReducers } from 'redux';
import counter from './counter';
export default combineReducers({
counter
});
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"src/**/*.{js,jsx,json,css}": [
"prettier --single-quote --write",
"git add"
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.