Ushop - ChickenDinner Project

• Create React App - 3.1.2 [Changelog]
• React - 16.9.0 [Changelog]
• Mobx / Mobx React - 4.13.0 / 6.1.3 [Changelog]
• Bootstrap - 4.3.1
• Fontawesome - 5.9
• [Styled Components]
• [Emotion]

1. Install stable/latest version of Node.js (10+).
2. Install stable build of Visual Studio Code.
3. Clone repository https://github.com/Unicity/chickendinner.git.
4. Launch Visual Studio Code and open project on your disk.
5. Run npm install on terminal, wait until everything done.
6. Run npm start, the project should run on localhost:3000.

1. Path Intellisense
2. IntelliSense for CSS class names in HTML
3. GitLens
4. GitHistory
5. Visual Studio IntelliCode
6. Code Spell Checker
7. Better Comments
8. Task Kill

MobX’s observable variables no need to pass as props. If they were use as props they may lose there observable ability. An observable ability make our component render automatically when observable variables changed.

No need

this.props.store.isRainingToday

Correct

store.isRainingToday

always observe isRainingToday when it’s changed (whatever change)

@observable isRainingToday

observe when the value is different (e.g. false to true)

@observable.struct isRainingToday

and don't forget to add observer to your components.

// class in the function to avoid decorator (Recommended)
const Timer = observer(
  class Timer extends React.Component {
    /* ... */
  }
)

// pure function for new react hooks style (Recommended)
const Timer = observer((props) => (
    /* rendering */
))

// decorator syntax (This still valid, but we need to get rid decorators in the future)
@observer
class Timer extends React.Component {
    /* ... */
}

shouldComponentUpdate() life cycle is overrided Mobx behavior please be careful when you use it. If you need this life cycle, you should removed @observer or observer() from that component since it will decided when it should render instead Mobx. If you mixed both, code return an error.

Example:

import { store } from '../store/MainStore'

const Counter = observer((props) => {
    return (
        <div>
            <span>I will render when you count: {store.count}</span>
        </div>
    )
}

export default Counter

dictionary('next')

Always use dictionary(key) function for any dictionary text since it is easy to handled when language switched (it’s Mobx) and it could display [key] when key is missing in other languages. If you want to reveal dictionary keys on webpage add ?dic=true after the url.

You can now use conditional tag in JSX, such as . Easier to read and manage when we use many conditions.

Read here: https://github.com/romac/react-if

Example:

return (
    <div className="container-cat">
        {/* If/Then/Else */}
        <If condition={isCatMeow}>
            <Then>{renderCatFood()}</Then>
            <Else>{renderComfyBox()}</Else>
        </If>

        {/* Shorthands */}
        <When condition={isBigCat}>{renderBigCat()}</When>
        <Unless condition={isBigCat}>{renderSmallCat()}</Unless>

        {/* Switch/Case/Default */}
        <Switch>
          <Case condition={cats.length === 1}>
            It is a cat.
          </Case>
          <Case condition={cats.length < 10}>
            A group of cats?
          </Case>
          <Default>
            Too many cats!
            {() => console.log('Any execute method should do inside arrow function.')}
            {() => playCatVideo()}
          </Default>
        </Switch>
    </div>
)

• If any icons show as [ ? ] (question mark) try to change fa to far fas fab depend on icon type you use.

Example: fab fa-facebook, fas fa-circle, far fa-circle

• You can not use onClick on <i> anymore, use <span> instead.

<span onClick={onClickCatHandler}><i className="fa fas-cat"><i></span>

• Use <span> to avoid an error from RemoveChild, if you want to use condition in JSX.

this.state.showLoader && <span><i className="fas fa-spinner fa-spin"></i></span>