{"id":27918648,"url":"https://github.com/hannasdev/react-code-standards","last_synced_at":"2025-05-06T18:24:21.497Z","repository":{"id":84016629,"uuid":"180938388","full_name":"hannasdev/react-code-standards","owner":"hannasdev","description":"Some examples of how to improve your code for React","archived":false,"fork":false,"pushed_at":"2019-04-19T08:20:10.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-03-27T20:21:26.122Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hannasdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-04-12T05:44:16.000Z","updated_at":"2019-04-19T08:20:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"5ff20979-f8c7-42c0-9958-4e8726133215","html_url":"https://github.com/hannasdev/react-code-standards","commit_stats":null,"previous_names":["hannasdev/react-code-standards"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hannasdev%2Freact-code-standards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hannasdev%2Freact-code-standards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hannasdev%2Freact-code-standards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hannasdev%2Freact-code-standards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hannasdev","download_url":"https://codeload.github.com/hannasdev/react-code-standards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252742301,"owners_count":21797202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-06T18:24:20.813Z","updated_at":"2025-05-06T18:24:21.488Z","avatar_url":"https://github.com/hannasdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Code Standards\n\n## Naming\n\n1. For event-handling methods, use prefix \"on\", for example: \"onSubmit\", \"onClick\" to describe what triggers the method.\n\n2. Never use reserved words such as `export`, `for`, `const`, `let`, `var`, `await`, `async` as they will cause conflicts.\n\n## Some Gotcha's\n\n### prevState\n\n`setState` is smart enough to merge whatever state you want to change, so unlike a normal object you don't have to destruct `prevState`. Only the mentioned property will be affected by `setState`.\n\nHowever, when you change based on an existing state value (inverting a boolean for example), always refer to previous value with `prevState`, never `this.state`.\n\n**Correct**:\n\n```javascript\nthis.setState(prevState =\u003e ({\n  isOpen: !prevState.isOpen,\n}))\n```\n\n**Incorrect**:\n\n```javascript\nthis.setState(prevState =\u003e ({\n  ...prevState,\n  isOpen: !this.state.isOpen,\n}))\n```\n\n### Click Events\n\nDon't use `click`-events (or `blur`, or `focus` etc.) on anything but the `button` element.\n\nOlder browsers will not work well with clickable `div`s and also you can't navigate using the keyboard unless the elements are focusable which only buttons are.\n\n## Destructuring\n\nIf you know a variable will always contain certain properties, you can use destructuring to simplify your code:\n\n**Correct**:\n\n```javascript\nconst mapStateToProps = ({ user, items }) =\u003e ({\n  user,\n  items,\n})\n```\n\n**Incorrect**:\n\n```javascript\nconst mapStateToProps = state =\u003e {\n  return {\n    user: state.user,\n    items: state.user,\n  }\n}\n```\n\n## Semantic HTML\n\nWith HTML5 there was a bunch of alternatives to `div` added, such as `section`, `article`, `header`, and `footer` added.\n\n**Using these makes it easier to identify a component in the final HTML.**\n\n## Reducers\n\nAvoid nested reducers. It makes for more complicated look-ups and unnecessary complexity.\n\n**Correct**:\n\n```javascript\nconst initialState = {\n  // props goes here\n}\n```\n\n**Incorrect**:\n\n```javascript\nconst initialState = {\n  nameOfReducer: {\n    // props goes here\n  },\n}\n```\n\nThe reason is that when you add the reducer to the list of reducers, you will already have the name of the root of the reducer as the first level. You don't need an additional level on top of that.\n\nIf you plan on adding several objects to one reducer, you should probably **create a separate reducer instead**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhannasdev%2Freact-code-standards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhannasdev%2Freact-code-standards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhannasdev%2Freact-code-standards/lists"}