- Bootstrap project
npm i -g yo generator-eslint
mkdir eslint-plugin-my-plugin
cd eslint-plugin-my-plugin
yo eslint:plugin
yo eslint:rule
npm i
- Go to https://astexplorer.net/
const getUser = (overrides = {}) => { | |
const defaultValues = { | |
username: "Some User", | |
anchor: "@someuser", | |
image: "https://webapp/static/images/someuser.png" | |
}; | |
return Object.assign(defaultValues, overrides); | |
}; | |
export default getUser; |
const path = require('path'); | |
const cp = require('child_process'); | |
function runScript(scriptFile) { | |
cp.execFile(path.resolve(__dirname, `../scripts/${scriptFile}`), (error, stdout, stderr) => { | |
if (error) { | |
console.log('runScript/error: ', error); | |
} | |
if (stderr) { |
npm i -g yo generator-eslint
mkdir eslint-plugin-my-plugin
cd eslint-plugin-my-plugin
yo eslint:plugin
yo eslint:rule
npm i
import React from "react"; | |
import {storiesOf} from "@storybook/react"; | |
import { withKnobs, text } from '@storybook/addon-knobs'; | |
import Button from "."; | |
const storiesOf("Button", module). | |
addDecorator(withKnobs) | |
add("Default", () => { | |
return <Button type="button" text="Click me" /> |
import React from "react"; | |
import Button from "."; | |
// Args Setup | |
const Template = (args) => <Button {...args} />; | |
export const Playground = Template.bind({}); | |
const buttonTypes = { | |
SUBMIT: 'submit', |
/components
- only global components
/features
- widgets of the app grouped by domain
/feature (todo)
/components
SomeFeature.jsx (TodoSomeFeature)
AnotherFeature.jsx (TodoAnotherFeature)
Naming conventions
What | Format | Example |
---|---|---|
Component | MyComponentName |
Button, LoginModal |
Action Type | [VERB]_[NOUN] |
TOGGLE_TODO |
Action Creator | [verb][Noun] |
toggleTodo |
Reducer | set[PathToStateKey] |
setTodosFilter |
Selector | get/is[PathToStateKey] |
getTodosById, isTodoCompleted |
Story | [Feature]Stories |
TodoStories |
import React from 'react'; | |
import getDisplayName from 'react-display-name'; | |
import { withNamespaces } from 'react-i18next'; | |
const translate = (WrappedComponent) => { | |
class Container extends React.Component { | |
static displayName = `TranslateContainer(${getDisplayName(WrappedComponent)})`; | |
render() { | |
return ( |
import store from './store'; | |
export { | |
store | |
}; |
import { createStore } from 'redux'; | |
import middlewares from './middlewares'; | |
import rootReducer from './reducer' | |
import { DEFAULT_STATE } from './constants'; | |
export default createStore(rootReducer, DEFAULT_STATE, middlewares); |