{"id":17345497,"url":"https://github.com/simoneas02/react-cheatsheet","last_synced_at":"2026-01-31T02:02:10.173Z","repository":{"id":69061975,"uuid":"85378300","full_name":"simoneas02/react-cheatsheet","owner":"simoneas02","description":":blue_book: React ES6 Reference","archived":false,"fork":false,"pushed_at":"2018-09-02T20:01:01.000Z","size":52,"stargazers_count":52,"open_issues_count":1,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-10T12:08:08.975Z","etag":null,"topics":["cheatsheet","es6","frontend","react","reactjs","web"],"latest_commit_sha":null,"homepage":null,"language":null,"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/simoneas02.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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-03-18T05:33:47.000Z","updated_at":"2025-01-26T12:07:58.000Z","dependencies_parsed_at":"2023-09-14T21:34:18.433Z","dependency_job_id":null,"html_url":"https://github.com/simoneas02/react-cheatsheet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/simoneas02/react-cheatsheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simoneas02%2Freact-cheatsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simoneas02%2Freact-cheatsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simoneas02%2Freact-cheatsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simoneas02%2Freact-cheatsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simoneas02","download_url":"https://codeload.github.com/simoneas02/react-cheatsheet/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simoneas02%2Freact-cheatsheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28926630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T22:32:35.345Z","status":"online","status_checked_at":"2026-01-31T02:00:09.179Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cheatsheet","es6","frontend","react","reactjs","web"],"created_at":"2024-10-15T16:31:57.851Z","updated_at":"2026-01-31T02:02:10.141Z","avatar_url":"https://github.com/simoneas02.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌈 React Cheat Sheet\n\n\u003e A simple cheat sheet for facilitate the process in the workshops and event about React. Let me know if you see any problem, I'll love a pull request for improve this document.\n\n## Table of contents\n\n- [x] [Installation](#installation)\n- [x] [No configuration](#no-configuration)\n- [x] [ReactDOM](#reactdom)\n- [x] [Functional Stateless Component](#functional-stateless-component)\n- [x] [Class Component](#class-component)\n- [x] [Composition](#composition)\n- [x] [Module component](#module-component)\n- [x] [Hot Module Replacement](#hot-module-replacement)\n- [x] [Props](#props)\n- [x] [State](#state)\n- [x] [Methods and Events](#methods-and-events)\n- [x] [State manipulation](#state-manipulation)\n- [x] [Bindings](#bindings)\n- [ ] [Refs](#refs)\n- [ ] [Keys](#keys)\n- [ ] [Component Lifecycle](#component-lifecycle)\n- [ ] [Inline Styles](#inline-styles)\n- [ ] [React Router](#react-router)\n- [ ] [Storybook](#storybook)\n- [ ] [Tests](#tests)\n- [ ] [a11y](#a11y)\n- [ ] [API comunication](#api-comunication)\n- [ ] [Flux](#flux)\n- [ ] [Redux](#redux)\n- [ ] [MobX](#mobx)\n- [ ] [Best Practices](#best-practices)\n- [ ] [Concepts](Concepts)\n    - [ ] [Immutable](#immutable)\n    - [ ] [Functionnal programing](#functionnal-programing)\n    - [ ] [Virtual Dom](#virtual-dom)\n- [x] [ES6](#es6)\n    - [x] [Arrow Functions](#arrow-functions)\n        - [x] [Syntax](#syntax)\n        - [x] [Advanced Syntax](#advanced-syntax)\n    - [x] [Spread Operations](#spread-operations)\n        - [x] [Spread in array literals](#spread-in-array-literals)\n        - [x] [Spread in object literals](#spread-in-object-literals)\n\n---\n\n## Installation\n\n* Add the tags in your HTML\n    ```HTML\n    \u003cscript src=\"https://unpkg.com/react@16/umd/react.development.js\" crossorigin\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/react-dom@16/umd/react-dom.development.js\" crossorigin\u003e\u003c/script\u003e\n    ```\n* Run this scripts in your terminal\n    ```SSH\n    $ npm install react react-dom\n    ```\n \n **[⬆ back to top](#table-of-contents)**\n---\n \n## No configuration\n\nJust start with React no configuration (run the scripts bellow in your terminal)\n* Install the React\n    ```SSH\n    $ npm install -g create-react-app\n    ```\n* Create your application (change `myApp` to your application name)\n    ```\n    $ create-react-app myApp\n    ```\n* Go to the application folder and install the dependencies\n    ```\n    $ cd myApp\n    $ npm install\n    ```\n* Start your application\n    ```\n    $ npm start\n    ```\n* Go to the browser by `URL` bellow and see your beautiful application   \n    - [localhost:8080](http://localhost:8080)\n\n**[⬆ back to top](#table-of-contents)** \n---\n\n## ReactDOM\n\n```JS\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render( \u003ch1\u003eHello React Ladies\u003c/h1\u003e, document.getElementById('root') );\n```\n\n**[⬆ back to top](#table-of-contents)**\n---\n\n## Functional Stateless Component\n\n```JS\nimport React from 'react';\n\nconst Button = () =\u003e\n    \u003cbutton\u003e Apply\u003c/button\u003e\n\nexport default Button;\n```\n\n```JS\nimport React from 'react';\n\nconst Button = ({ onClick, className = 'button', children  }) =\u003e\n    \u003cbutton\n        onClick={ onClick }\n        className={ className }\n        type='button'\n    \u003e\n        { children }\n    \u003c/button\u003e\n\nexport default Button;\n```\n\n**[⬆ back to top](#table-of-contents)**\n---\n\n## Class Component\n\n```JS\nimport React, { Component } from 'react';\n\nclass MyComponent extends Component {\n    render() {\n        return (\n            \u003cdiv className=\"main\"\u003e\n                \u003ch1\u003eHelo Devas\u003c/h1\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default MyComponent;\n```\n\n```JS\nimport React, { Component } from 'react';\n\nclass MyComponent () extends Compnent {\n    constructor ( props ) {\n    super(props);\n    this.state = { message: 'Helo Devas' }\n    };\n\n    render() {\n        return (\n            \u003cdiv className=\"main\"\u003e\n                \u003ch1\u003e{ this.state.message }\u003c/h1\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default MyComponent;\n\n```\n\n**[⬆ back to top](#table-of-contents)**\n--- \n\n## Composition\n\n```JS\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\n\nclass Love extends Component {\n    render() {\n        return (\n            \u003cdiv clssName=\"love\"\u003e\n                \u003ch1\u003eMy love\u003c/h1\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nclass LoveList extends Component {\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cLove /\u003e\n                \u003cLove /\u003e\n                \u003cLove /\u003e\n                \u003cLove /\u003e\n            \u003c/\u003e\n        );\n    }\n}\n\nReactDOM.render(\n    \u003cLove /\u003e,\n    document.getElementById(´root´)\n);\n\n**[⬆ back to top](#table-of-contents)**\n```\n\n## Module component\n\n```JS\n//App.js\nimport React, { Component } from 'react';\n\nclass App extends Component {\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cp\u003eMy App\u003c/p\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default App\n```\n\n```JS\n//Index.js\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App.js';\n\nclass Index extends Component {\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cApp /\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\n\nReactDOM.render (\n    \u003cIndex /\u003e,\n    document.getElementById('root')\n);\n\n```\n\n**[⬆ back to top](#table-of-contents)**\n---\n\n## Hot Module Replacement\n* Retain application state which is lost during a full reload.\n* Save valuable development time by only updating what's changed.\n* Tweak styling faster -- almost comparable to changing styles in the browser's debugger.\n\n```JS\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport MyComponent from './MyComponent';\n\nReactDOM.render( \u003cMyComponent /\u003e, document.getElementById('root') );\n\nif (module.hot) {\n    module.hot.accept();\n}\n```\n\n**[⬆ back to top](#table-of-contents)**\n---\n\n## Props\n\n```JS\nimport React, { Component } from 'react';\n\nclass App extends Component {\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cp\u003eMy App {this.props.name}\u003c/p\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nclass Index extends Component {\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cApp name=\"Simone\"/\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default Index;\n```\n\n**[⬆ back to top](#table-of-contents)**\n---\n\n## State\n\n```JS\nimport React, { Component } from 'react';\n\nclass App extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {messages: 0};\n    } \n\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cp\u003eMy messages: {this.state.messages}\u003c/p\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default App;\n```\n\n**[⬆ back to top](#table-of-contents)**\n---\n\n## Methods and Events\n\n```JS\nimport React, { Component } from 'react';\n\nclass App extends Component {\n\n    escreve() {\n      console.log(\"Eu te amo\");\n    }\n\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cbutton onClick={this.escreve}\u003esave\u003c/button\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default App;\n```\n\n**[⬆ back to top](#table-of-contents)**\n---\n\n## State manipulation\n\n```JS\nimport React, { Component } from 'react';\n\nclass App extends Component {\n    constructor() {\n        super();\n        this.state = { like: 0 };\n    } \n\n    isLiked = () =\u003e {\n      this.setState({ like: this.state.like + 1});\n    }\n\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cbutton onClick={ this.isLiked }\u003e{ this.state.like }\u003c/button\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default App;\n```\n\n```JS\nimport React, { Component } from 'react';\n\nclass App extends Component {\n    constructor() {\n        super();\n        this.state = { messages: ['JS', 'React'] };\n    } \n\n    addMessages = () =\u003e {\n        const updateMessages = [...this.state.messages, 'Polymer']\n        this.setState({ messages: [...updateMessages] })\n    }\n\n    render() {\n        return (\n            \u003cdiv className=\"app\"\u003e\n                \u003cbutton onClick={this.addMessages}\u003eadd\u003c/button\u003e\n                {console.log(this.state.messages) /* ['JS', 'React', 'Polymer'] */}\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default App;\n```\n\n\n**[⬆ back to top](#table-of-contents)**\n---\nd\n## Bindings\n\n```JS\nimport React, { Component } from 'react';\n\nclass MyComponent extends Component {\n    constructor () {\n    super();\n\n    this.state = { list: list };\n\n    this.doSomethingElse = this.doSomethingElse.bind(this);\n    };\n\n    doSomething = () =\u003e {\n        // do something\n        /* if don't have a parameter, you can use arrow function\n           and don't need to use bind */\n    }\n\n    doSomethingElse ( itemId ) {\n        // do something else\n    }\n\n    render() {\n        return (\n            \u003cdiv className=\"main\"\u003e\n                {this.state.list.map( item =\u003e\n                ...\n                    \u003cbutton \n                        onClick={ this.doSomething } \n                        type=\"button\"\n                    \u003e\n                        Some Thing\n                    \u003c/button\u003e\n\n                    \u003cbutton \n                        onClick={ () =\u003e this.doSomethingElse( item.objectID ) } \n                        type=\"button\"\n                    \u003e\n                        Some Thing Else\n                    \u003c/button\u003e\n                ...\n                )}\n            \u003c/div\u003e\n        );\n    }\n}\n\nexport default MyComponent;\n```\n\n---\n\n# ES6\n\n## Arrow Functions\n\n### Syntax\n\n  #### Basic syntax\n    ```JS\n    ( param1, param2, ..., paramN ) =\u003e { statements }\n\n    ( param1, param2, ..., paramN ) =\u003e  expression\n\n    ( singleParam ) =\u003e { statements }\n\n    singleParam =\u003e { statements }\n\n    () =\u003e { statements }\n    ```\n  #### Advanced Syntax\n    ```JS\n    params =\u003e ({ foo: bar }) /* return an object literal expression */\n\n    ( param1, param2, ...ladies ) =\u003e  { statements } /* rest parameters */\n\n    ( language = JS, ladies, ..., framework = React ) =\u003e { statements } /* default parameters */\n\n    const sum = ( [num1, num2] = [1, 2], { x: num3 } = { x : num1 + num2 } ) =\u003e num1 + num2 + num3  /*  destructuring within the parameter list */\n    sum() /* 6 */\n    ```\n\n---\n\n## Spread Operations\n\n### Spread in array literals\n```JS\nconst basics = [ 'JS', 'HTML', 'CSS' ];\nconst frameworks = [ 'React', 'Vue' ];\nconst web = [ ...basics, ...frameworks ]; \nconsole.log(web); /* ['JS', 'HTML', 'CSS', 'React', 'Vue'] */\n\nconst addWeb = [ ...web, 'al11' ];\nconsole.log(addWeb); /* ['JS', 'HTML', 'CSS', 'React', 'Vue', 'al11'] */\n```\n\n### Spread in object literals\n```JS\nconst basics = { behavior: 'JS', markup: 'HTML' };\nconst style = 'CSS';\nconst web = { ...basics, style }; \nconsole.log(web); /* { behavior: \"JS\", markup: \"HTML\", style: \"CSS\" } */\n\nconst devFront = { framework: 'react', event: 'React Conf' };\nconst devBack = { framework: 'django', state: 'cool' };\n\nconst cloneDev = { ...devFront };\nconsole.log(cloneDev); /* { framework: 'react', event: 'React Conf' } */\n\nconst merged = { ...devFront, ...devBack };\nconsole.log(cloneDev); /* { framework: 'django', event: 'React Conf', state: 'cool' } */\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimoneas02%2Freact-cheatsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimoneas02%2Freact-cheatsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimoneas02%2Freact-cheatsheet/lists"}