-
Only use const for global constants and Pure Components
// don't do this const { profile } = this.state; const list = this.getList();
// do this, use let for local variables let { profile } = this.state; let list = this.getList();
// use const for constants const LIMIT = 20;
// use const for Pure Components export const ProfileName = ({ profile }) => { return <span>{profile.name}</span>; };
-
Function syntax:
- Use
function doSomething()
for utility global functions, useconst Something = ({propA}) => {}
for Pure Components - Class method syntax:
- Use babel’s arrow method syntax
for onSomething and handleSomething methods, and other methods that require bindinghandleSomething = something => { // do stuff }
- Use babel’s arrow method syntax
- Use
-
Naming
-
Don’t use verbs as class names
-
Method and function names must be verbs, use getSomething if needed
-
For local handler methods to pass to onSomeEvent properties, name them handleSomething. Example:
handleCancel = e => { // do stuff } handleSubmit = e => { // do stuff } render() { return <div> <Button onClick={this.handleCancel}>Cancel</Button> <Button type="submit" onClick={this.handleSubmit}>Submit</Button> </div> }
-
For methods and properties that are called when something is done, e.g an HTTP request, name them
onSomething
at present tense (no ‘ed’)onLoadProfile = profile => { // do stuff } load() { getProfile.then(this.onLoadProfile) } handleDelete = () => { let {onDelete, entry} = this.props onDelete && onDelete(entry) } render() { return <Button onClick={this.handleDelete}/> }
-
Last active
November 25, 2018 08:47
-
-
Save hami9x/88e959167fefeb003504ea0d1f9d4935 to your computer and use it in GitHub Desktop.
Kakka React Coding Convention
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment