React: Get URL from prop

In class extends React.Component , "this.props.match.params.xxx".
xxx is defined in Router tag.

React: Switch

Usage: To route for only one component in the Switch tag.

import { Router, Route, Switch } from 'react-router-dom';

...

<Router history={history}>
  <div>
    <Header />
    <Switch>
      <Route path="/" exact component={StreamList} />
      <Route path="/streams/new" exact component={StreamCreate} />
      <Route path="/streams/edit/:id" exact component={StreamEdit} />
      <Route path="/streams/delete/:id" exact component={StreamDelete} />
      <Route path="/streams/:id" exact component={StreamShow} />
    </Switch>
  </div>
</Router>

VS Code Environment

Extensions:

• Insert semicolon : In shortcut, set insert "ctrl + ;", set insert with new line "shift + ctrl + ;"
• Auto Close Tag

Preference:

• Format on save

React: Portal

Usage

A normal react component tree normally looks like this:

And due to this cluster pattern, the bottom UI components' styling got influenced by their parents components.

To solve this restriction, React portal helps us to achieve this: 

So we could have an independent root element to do the "document.querySelector" that we can build another component tree under it without been influenced by the main branch or component tree.

Tips:

• stopPropagation: prevent the event to bubble up to parent elements

1 2 3 4 5 6 7

<div onClick={props.onDismiss} className="ui dimmer modals visible active"> <div onClick={e => e.stopPropagation()} className="ui standard modal visible active"> <div className="header">{props.title}</div> <div className="content">{props.content}</div> <div className="actions">{props.actions}</div> </div> </div>

• React.Fragment: Blank HoC to wrap elements without side effect on styling 

1 2 3 4

<React.Fragment> <button className="ui button negative">Delete</button> <button className="ui button">Cancel</button> </React.Fragment>

<...>

Book list 2019

Web development

Back-end:

• ASP.NET Core 2 Fundamentals - Onur Gumus (3.5★)
• Comment: It's a quick guide for dotNet Core MVC  Web App development. Slightly covered the works of M,V,C and DB. It's a good material for a quick start of web app development, yet the examples are relatively simple. 

Front-end:

• O'Reilly: Learning React (4.5★)
• Comment: This book might be a bit hard for people have not play around any web front-end framework before, and I personally read it back and forward for 4~5 times till I gradually started to get some concept and design philosophy. But when it comes to on hand project practice, the official doc might be better than this book.
  

Computer Science

Design Pattern:

• 大話設計模式 - (Ongoing)
  

Software Project Management:

• The Mythical Man-Month - 人月神話 (Ongoing)
  

Hobbies 

Tech:

• The Fuzzy and the Techie - 書呆與阿宅 (Ongoing)
  

Self Development:

• Do Less, Get More - 你只要做好一件事就夠了 (Ongoing)
  
• The Long View - 人生的長尾效應 (Ongoing)
  
•