https://github.com/idindrakusuma/learn-react-burger-apps
Burger Project Udemy
https://github.com/idindrakusuma/learn-react-burger-apps
learn-reactjs react-router redux redux-thunk
Last synced: 12 months ago
JSON representation
Burger Project Udemy
- Host: GitHub
- URL: https://github.com/idindrakusuma/learn-react-burger-apps
- Owner: idindrakusuma
- Created: 2018-08-22T16:41:45.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-16T22:53:24.000Z (over 7 years ago)
- Last Synced: 2025-02-14T21:46:12.138Z (about 1 year ago)
- Topics: learn-reactjs, react-router, redux, redux-thunk
- Language: JavaScript
- Homepage: https://burgerapps-react.firebaseapp.com/
- Size: 644 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Burger App - Real Project from Udemy React Course
## How to run
- Clone this repo on your local machine
- enter repo directory
- run this command `npm install`
- then, `npm start`
- Open your browser and open in `localhost:3000`
## How to Deploy in Firebase?
- Make initial setup `npm install -g firebase-tools`
- `firebase login` => then login using your account
- `firebase init` => init the project setup
- `firebase deploy` => deploy! done!
- And if setup was created, for deploy just using `npm run deploy`
## Planning React
1. Component Tree / Component Structure
2. Aplication State (Data)
- what's data we needed?
3. Components vs Container
- Stateless / functional component?
- or Stateful Component?
---
## Rangkuman belajar
### Pengguaan High Order Component (hoc)
penting sekali untuk implement `hoc` pada workflownya react. `hoc` sendiri berfungsi untuk _wrapping_ component pada react agara style yang dibuat tidak rusak.
> Ingat! Dalam satu component, react hanya memperbolehkan satu root element
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`.
```js
const aux = (props) => props.children;
export default aux;
```
implementnya
```js
render () {
return (
{ this.props.children }
);
}
```
### Analisa apa yang perlu di Render oleh React
Penting 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()`
```js
/* make sure show is changed before you re-render modal */
shouldComponentUpdate (nextProps, nextState) {
return this.props.show !== nextProps.show;
}
```
> Tentu jika kita menggunakan lifecycle pada React, maka perlu menggunakan Statefull component
masih berlanjut...