{"id":18272058,"url":"https://github.com/idindrakusuma/learn-react-burger-apps","last_synced_at":"2026-04-16T19:48:50.298Z","repository":{"id":119635009,"uuid":"145736449","full_name":"idindrakusuma/learn-react-burger-apps","owner":"idindrakusuma","description":"Burger Project Udemy","archived":false,"fork":false,"pushed_at":"2018-10-16T22:53:24.000Z","size":659,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T21:46:12.138Z","etag":null,"topics":["learn-reactjs","react-router","redux","redux-thunk"],"latest_commit_sha":null,"homepage":"https://burgerapps-react.firebaseapp.com/","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/idindrakusuma.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}},"created_at":"2018-08-22T16:41:45.000Z","updated_at":"2020-09-04T19:40:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"ca77fea2-ad14-4efd-aa0a-7dd568439d6e","html_url":"https://github.com/idindrakusuma/learn-react-burger-apps","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idindrakusuma%2Flearn-react-burger-apps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idindrakusuma%2Flearn-react-burger-apps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idindrakusuma%2Flearn-react-burger-apps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idindrakusuma%2Flearn-react-burger-apps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idindrakusuma","download_url":"https://codeload.github.com/idindrakusuma/learn-react-burger-apps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968383,"owners_count":21025824,"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":["learn-reactjs","react-router","redux","redux-thunk"],"created_at":"2024-11-05T11:39:42.695Z","updated_at":"2026-04-16T19:48:45.235Z","avatar_url":"https://github.com/idindrakusuma.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Burger App - Real Project from Udemy React Course\n\n\u003ccenter\u003e\n\u003cimg src=\"./src/assets/images/burger-logo.png\" style=\"max-width: 100px\"\u003e\n\u003c/center\u003e\n\n## How to run\n\n- Clone this repo on your local machine\n- enter repo directory\n- run this command `npm install`\n- then, `npm start`\n- Open your browser and open in `localhost:3000`\n\n## How to Deploy in Firebase?\n\n- Make initial setup `npm install -g firebase-tools`\n- `firebase login` =\u003e then login using your account\n- `firebase init` =\u003e init the project setup\n- `firebase deploy` =\u003e deploy! done!\n- And if setup was created, for deploy just using `npm run deploy`\n\n## Planning React\n1. Component Tree / Component Structure\n2. Aplication State (Data)\n - what's data we needed?\n3. Components vs Container \n - Stateless / functional component?\n - or Stateful Component?\n\n ---\n\n ## Rangkuman belajar\n\n ### Pengguaan High Order Component (hoc)\n penting sekali untuk implement `hoc` pada workflownya react. `hoc` sendiri berfungsi untuk _wrapping_ component pada react agara style yang dibuat tidak rusak. \n\n \u003e Ingat! Dalam satu component, react hanya memperbolehkan satu root element\n \n Dalam kasus Layout misalkan. Layout.js memiliki beberapa component didalamnya seperti `Toolbar`, `Sidebar` serta `Main` component. Jika penggunaannya `div`, bisa jadi style yang kita buat berantakan, maka dibuatkan `hoc` dengan model functional component pada `Aux/Aux.js`.\n```js\nconst aux = (props) =\u003e props.children;\n\nexport default aux;\n```\nimplementnya\n```js\n  render () {\n    return (\n      \u003cAux\u003e\n        \u003cToolbar toggleMenuClicked={this.sideDrawerToggleHandler} /\u003e\n        \u003cSideBar show={this.state.showSideDrawer} closed={this.sideDrawerClosedHandler} /\u003e\n        \u003cmain className={classes.Content}\u003e\n          { this.props.children }\n        \u003c/main\u003e\n      \u003c/Aux\u003e\n    );\n  }\n```\n\n### Analisa apa yang perlu di Render oleh React\nPenting banget untuk memahami lifecycle dari react. Seperti kasus component `Modal.js` di proyek ini. Secara default, react akan selalu melakukan rendering ulang pada component `Modal.js` ketika ada perubahan di `state`. Padahal, `Modal.js` kita tampilkan hanya pada saat **Order** button ditekan bukan? Maka sebaiknya harus dirender saat order button ditekan saja kan? atau bisa dibilang ketika ada perubahan saja di state `showModal` nya, bukan `ingredient`nya. Oleh karena itu perlu diterapkan `shouldComponentUpdate()`\n```js\n  /* make sure show is changed before you re-render modal */\n  shouldComponentUpdate (nextProps, nextState) {\n    return this.props.show !== nextProps.show;\n  }\n```\n\n\u003e Tentu jika kita menggunakan lifecycle pada React, maka perlu menggunakan Statefull component\n\n\nmasih berlanjut...","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidindrakusuma%2Flearn-react-burger-apps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidindrakusuma%2Flearn-react-burger-apps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidindrakusuma%2Flearn-react-burger-apps/lists"}