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: 17 days 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 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-16T22:53:24.000Z (over 6 years ago)
• Last Synced: 2024-12-22T17:15:56.266Z (about 1 month 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...