React with Router & Redux

Oct.17.2017 | 7m Read | ^UX

React is an open-source framework (unhidden reusable code) from Facebook. It powers many complex User Interfaces (UIs) for apps. We shall cover not only basic operations and lifecycle, but the MVC (Model View Controller) software pattern, networking protocols, and Redux (pluggable storage). Time to read and React!


A User Interface framework with JSX components (JavaScript plus X or HTML and CSS combined into a singular syntax). So buttons, images, text, and other elements are rendered and updated via state management. The states and props are driven using a simplified virtual DOM (Data Object Model) tree.

This virtual DOM (ReactDOM) is smaller. Thus it is a faster structure and data set to traverse before updating the web browser's actual DOM. React is designed to use the architectural pattern MVC (Model-View-Controller).

▼ Model-View-Controller:

    • ☑⁡⁡ Model: The data, typically located on servers and databases therein.
      ☑⁡⁡ View: The display or what you see on the screen.
        ⁡◆⁡⁡ Includes graphics, animation, and other components.
      ☑⁡⁡ Controller: The middleware between the view and the model.
        ⁡◆⁡⁡⁡⁡ Updates the view and model based on user and server interaction.
      ☑⁡⁡ Invented by Trygve Reenskaug ('Trig-va Reens-gaw') during the Objected-Oriented Programming craze in the 1970's.
        ⁡◆⁡⁡ ⁡⁡Originally developed and implemented in the 1980's for the SmallTalk language at Xerox PARC (Palo Alto Research Center).
        ⁡◆⁡⁡ ⁡⁡Later developed by Apple and NeXT using WebObjects in Objective C and converted to Java. MVC is then implemented in Java's Spring UI framework. It is also used in Python's Django web framework and Rails (Ruby's web framework). Windows has its own ASP.NET MVC.
        ⁡◆⁡⁡⁡⁡ JavaScript implementations are many: ReactJS, AngularJS, MithrilJS, VueJS, BackboneJS (legacy backend code), and more.
  • The React Component Lifecycle:

    ▼ render():

    • ☑⁡⁡ Greenlights the ReactDOM to allow the browser to draw the components onto the actual DOM layout.
        ⁡◆⁡⁡ NOTE: An internal react check is done first with componentDidMount().
      ☑⁡⁡ Typically returns a JSX element/component.
  • ▼ setState() :

    • ☑⁡⁡ Sets the state of the DOM component which stores its place in ReactDOM lifecycle.
    • ☑⁡⁡ Has a callback function param for further instruction execution upon completion.

    ▼ forceUpdate():

    • ☑⁡⁡ Skips over shouldComponentUpdate() to componentWillUpdate().
    • ☑⁡⁡ Discouraged unless you can not update properly.

    Stateful vs Presentational Components:

    ▼ Stateless (Functional or Presentational):

    • ☑⁡⁡ Has no state object and must be passed directly to the render function.
    • ☑⁡⁡ Simply returns props.
    • ☑⁡⁡ More difficult to clone since you have to write your own code to manage the props or copy them into a stateful component.
    • ☑⁡⁡ The ideal component for optimization.

    ▼ Stateful (Class):

    • ☑⁡⁡ Has a state object to store and reference.
    • ☑⁡⁡ Refs to past, current, and future changes.

    ▼ 3 arguments passed to React.createElement():

    • ☑⁡⁡ [props]: properties array, usually enclosed in curly braces {}.
      ☑⁡⁡ type: element type, usually a JSX component.
      ☑⁡⁡ [...children]: children array passed as to the created JSX component.
        ⁡◆⁡⁡ Stored under this.props.children.
  • React Router:

    ▼ Client Side Routing:

    • ☑⁡⁡ Requires more data to be stored on the client and/or be unpacked.
    • ☑⁡⁡ Ideal for rendering or offloading server processing.

    ▼ Server Side Routing:

    • ☑⁡⁡ Requires data requested from the server.
    • ☑⁡⁡ Ideal for prerendered data and feeding a dummy or terminal-like client.

    ▼ Client Side Routing Pros:

    • ☑⁡⁡ Reduced server load.
    • ☑⁡⁡ Ideal for high speed clients.
    • ☑⁡⁡ More responsive interfaces (no request bottleneck).
    • ☑⁡⁡ Better swappable/component-based architecture.

    ▼ <Route> Component & Props:

    • ☑⁡⁡ Route props
    • ☑⁡⁡ component
    • ☑⁡⁡ render
    • ☑⁡⁡ children
    • ☑⁡⁡ path
    • ☑⁡⁡ exact
    • ☑⁡⁡ location

    ▼ Override component path associations by...

    • ☑⁡⁡ Setting a default route path (like path = '/').


    ▼ Flux model plug-in for API/database/server:

    • ☑⁡⁡ Replaces other Model View Controller frameworks.
      ☑⁡⁡ Has a global store for state data management.
      ☑⁡⁡ Single Source of Truth:⁡ a state object tree known as store.
      ☑⁡⁡ Trades rigid overhead for easily mutable states.
      ☑⁡⁡ React is for rendering/updating JSX ReactDOM components.
        ◆⁡⁡ Optional stateful components store their state in the rendering lifecycle.
  • ▼ Actions:

    • ☑⁡⁡ Data wrapped in an object and sent via store.dispatch() to alter the store.
        ⁡◆⁡⁡ NOTE: must have a type.
  • ▼ Reducers:

    • ☑⁡⁡ A function with the params (previousState, action) that returns or 'reduces' to the next state.

    Interfacing with APIs & Servers:

    ▼ HTTP vs TCP/IP, FTP, & UDP:

    • ☑⁡⁡ HTTP: Hyptertext Transfer Protocol.
        ⁡◆⁡⁡ Contains various web protocols accessed via an abstracted Application Layer.
        ⁡◆⁡⁡ Currently uses a single TCP connection on port 80.
        ⁡◆⁡⁡ UDP⁡ is available with plugins, but may have firewall issues due to blocked ports.
        ⁡◆⁡⁡ HTTPSecure is a standardized extension (on port 443) that uses TLS or SLL security certificates and may be required for access.
      ☑⁡⁡ FTP: File Transfer Protocol.
        ⁡◆⁡⁡ Older than HTTP and not as good for small, multi-connections (like web pages).
        ⁡◆⁡⁡ Uses TCP on port 21.
        ⁡◆⁡⁡ Has various modes (like ASCII for text transfers that must be configured).
        ⁡◆⁡⁡ Weak security.
        ⁡◆⁡⁡ Wide browser support.
      ☑⁡⁡ TCP: Transmission Control Protocol.
        ⁡◆⁡⁡ Robust and slower protocol for secure and accurate data.
      ☑⁡⁡ IP: Internet Protocol.
        ⁡◆⁡⁡ Connectionless protocol from below TCP for addressing devices.
      ☑⁡⁡ UDP: User Datagram Protocol.
        ⁡◆⁡⁡ Fast and less robust/secure protocol for games and video streams.
      ☑⁡⁡ RTP/RTCP: Real-time Transport Protocol/RTP Control Protocol.
        ⁡◆⁡⁡ Uses UDP for video streams.
  • ▼ REST vs SOAP:

    • ☑⁡⁡ REST: REpresentational State Transfer client-server API.
        ⁡◆⁡⁡ Data formats: JSON, HTML, XML, YAML, and text using only HTTP/HTTPS.
        ⁡◆⁡⁡ Scalable, browser friendly, and caching with flexible architecture.
      ☑⁡⁡ SOAP: Simple Object Access Protocol client-server API.
        ⁡◆⁡⁡ Data formats: XML using HTTP, TCP, SMTP or UDP.
        ⁡◆⁡⁡ Higher security and reliability than REST at the cost of performance and more resources.
        ⁡◆⁡⁡ Older and standardized instead of flexible like REST.
  • ▼ Actual CRUD functions:

    • ☑⁡⁡ Create Read Update Delete: Basic function layout for a client-server app.
      ☑⁡⁡ GET(): Read server data/locally store it.
      ☑⁡⁡ HEAD(): Read server data/locally store it, but only from the HEAD or header.
        ⁡◆⁡⁡ Header data is much smaller and comprised of notes about the BODY data.
      ☑⁡⁡ PUT(): Write server data to a URI (URL/URN).
      ☑⁡⁡ DELETE(): Remove/deactivate server data.

  •        : NEWS