Njeshe Amal “ARTicle” blog

If you want to go quickly, go alone. If you want to go far, go together.


· An Informal Introduction
· To Bootstrap, or Not To

· Redux: What The Flow?

· Get Started: Node/Express


Computer scientist, Lisa Gelobter, assisted with the 1995 creation of Shockwave, essential technology that led to the development of web animation. (So, we have her to thank for GIFs).

Every morning, a gazelle wakes up. It knows it must run faster than the fastest lion or it will be killed. Every morning, a lion wakes up. It knows it must outrun the slowest gazelle or it will starve to death. It doesn’t matter whether you’re a lion or gazelle. When the sun comes up, you’d better be running.

︎  ︎  

ART—icle 08

React/Redux Notes

Consider this...a cheat sheet.


  1. Redux is a pattern and library used to manage and update an application’s state through events called “actions”.
  2. It stores and tracks the global state, ensuring that it can only be manipulated in a predictable way. (controlled components?) Nope...actions via dispatch
  3. The store is a container that holds the application’s global state


  1. Redux store method
  2. The only way to update the state is by calling store.dispatch() and pass in an action object
  3. This triggers the store to run its reducer function, makes the changes, and returns the new state


  1. The source of data for the store.
    1. It carries a payload of information from the application to the store
    2. It must have a type (descriptive name for the action) that describes what kind of action was performed
  2. It is a plain JS object


  1. An event listener which handles events based on the action/event type it receives
  2. It is a function, receives current state and an action object, determines if and how to update the state, and returns a new state
    1. (state, action) => newState


  1. State is a plain JS object that is managed within a component
    1. Starts with a default value when the component mounts
    2. Redux application state lives in the store
    3. state => like a variable declared in a function
  2. Props, short for properties, is a plain JS object that is passed to a component
    1. Received from a parent, immutable to the children receiving it
    2. props => like an argument passed to the function
  3. They both hold information that influences the output of render


  1. Thunk is middleware that allows functions to be returned instead of plain JS action objects. This allows for delayed actions, like working with promises.
  2. Middleware is important because it prevents things like an action creator returning an action before data has been fetched.


  1. A component that makes the react store available to any nested component.
    1. Components that need access to the store, do so by calling connect()


  1. Connects a React component to the Redux store
  2. React component -> receives data from the store and learns which functions it can use to dispatch actions to the store
  3. Returns a new,  connected component class. DOES NOT modify the original.


  1. A function that can only render the data it receives. It DOES NOT manage or track changes to that data


  1. A Container is connected to redux store, by convention, and is supposed to make things work
  2. A component is supposed to be presentational. It only renders the data.


  1. JSX = JavaScript XML => is a syntax extension of JavaScript. Enables us to write HTML in React


  1. Provides a copy of all the elements inside something, like an array.


  1. Special methods of the component class that run some code when a component mounts and unmounts.
    1. Mounts: when the component is rendered in the DOM for the first time
    2. Unmounts: when the DOM produced by the component is removed


  1. The data representation of the objects that comprise the structure and content of a document on the web.


  1. Conditional rendering is when one creates a new component that encapsulates some behavior and then renders that component and its logic in another component.
  2. List rendering takes some array and one can iterate through the values, or map a new array.
  3. Keys help react identify which items have changed
    1. Using indexes as keys can be problematic because data can change, if something gets deleted from the list, its index would be invalid and the element will have an unstable identity.


  1. This gives an ES6 class access to useful React features such as lifecycle hooks and local state.
  2. Constructor

    1. A special method used when objects created with the class keyword are initialized.
  3. Super( )

    1. A method used to call the constructor of the parent class; usually React.Component


  1. A function that remembers its lexical scope
    1. Lexical scope is the functions local memory as well its parents local memory
  2. Example:
    1. function x() {
    2.   var a = 7
    3.   function y() {
    4.     console.log(a)
    5.   }
    6.   return y
    7. }
    8. Even when y is returned, it remembers the scope of its parent, x; and that is where it finds the value for a.


  1. A way of pointing to something in the program; provides context.
  2. Its value depends on when and how it is called.
  3. Example:
    1. function myFunc() {
    2.     console.log(this)    
    3.   }
    4. // this is default to the window because there is nothing to the left of the period
    5. const obj = {
    6.   bool: true,
    7.   myFunc: myFunc,
    8. }

    9. obj.myFunc()
    10. // this is now an object because to the left of the period is obj

Pro Tip: Read Documentation!

Thanks for stopping by 🙃️, BYE!