ReactJS_Study_Notes.txt

# ReactJS study notes
## by j-sparrow, 2018-02-07

## What is ReactJS
ReactJS is a JavaScript library, for building user interfaces.

# ReactJS features
## Stateful Components
  Encapsulated js, html(JSX), css as packages(components) that can manage
their own state, and components are composable to make complex UIs.
  App States and logic are handled by components, so *no* logic/state are
injected to DOM nor HTML templates.
## Declarative Views
  Views are described by a syntax called JSX.
  ReactJS apps create Views for each state in the application.
  React will update and render just the right View when the state of the
Application changes.
## React Component object can be inherited(extended) by third-party
Components / Libraries so as to enchance them.
## React Elements
  In fact, what the render() method returns is a React Element(usually in
the form of a JSX expression), which is a lightweight description of what
to render to the screen.

# How ReactJS works
  1 Components implement a render() method that takes input data(as
component properties: this.props) and returns a description of what to
display.
  2 Components maintain internal data as its state(as this.state) property.
State changes will be reflected to what to display.
  3 Besides this.props and this.state, you're free to add additionaly
properties to this. Only thoes data need to be reflected on UI needs
to go to this.state.
  4 this.props is something passed from parent React Elements to children,
and prosessed by children React Elements.
  5 this.state is something owned by a Component itself.
  6 A component's own state may fork from upper-stream via this.props, or
from this.state of upper tier components.

# JSX
  JSX is designed to tackle the pain that, the UI rendering is inherently
coupled with other logics(UI logic or business logic).
  This is how JSX does its job:
  JSX is essentially JavaScript(a syntax extension to JavaScript), it's
like an HTML template but it comes with nearly full power of JavaScript.
It's purpose is to produce React Elements in a declarative way.
  JSX can contain JavaScript expressions.
  JSX itself is a JavaScript expression too. This means that after
compilation JSX become regular JavaScript function calls and evaluate to
*JavaScript objects*. And this means that you can use JSX inside of
JavaScript statements(such as if...else, for, and so on...), you can accept
JSX as arguments or return it from functions.
  Eventually JSX is compiled by babel into React.createElement() calls
which return React Elements.

# React Elements
  React Elements correspond to HTML DOM, but they're different in that React
Elements are plain JavaScript objects, it can be manipulated as JavaScript
objects.
  And React DOM takes care of HTML DOM to match the states of React
Elements. React only updates what's necessary, React DOM compares the
element and its children to the previous one, and only applies the DOM
updates necessary to bring the DOM to the desired state.
  React Elements are immutable. Once you create an element, you can't change
its children or attributes. An React Element is like a single frame in a
movie: it represents the UI at a certain point in time.
  What we can do with React Elements?
## Rendering an React Element into the HTML DOM(this process is taken care
by React DOM).
## Updating a rendered React Element --> note that React Elements are
  immutable.
## React Only Updates What's Necessary(the necessary part)

# React Components
  Essentially, React Components are JavaScript functions, that accept
arbitrary inputs(called "props") and return React Elements as a description
of the View. Additionally, React Components are pure JavaScript functions,
that they do not change states --> but only producing new states.
  What we can do with React Components?
## Rendering a Component
## Composing Components

# State and Lifecycle
## Using State Correctly
1 Use this.steState instead of assigining value to this.state directly so
that the changes can trigger UI updates to reflect the changes.
2 State updates may be asynchronous(and this.props too).
  React may batch multiple setState() calls into a single update for
performance. this.props and this.state may be updated asynchronously,
you should not rely on their values for calculating the next state.
  To fix this problem, use a second form of setState that accepts a
function rather than an objet. That function will receive the previous
state as the first argument, and the props at the time the update is
applied as the second argument:
  this.setState((prevState, props) => {
    counter: prevState.counter + props.increment
  })
3 State updates are merged
  When you call setState(), React merges the object you provide into the
the current state(this.state), and the merging is shallow.

## componentDidMount: after the component output has been rendered to the
DOM.
## componentWillUnmount:

# Events Handling
  There're two forms to define event handlers:
  The handler function is wrapped within {} as JSX expression.
  1 arrow function: <button onClick={(e) => this.handler(id, e)} />, need no this bind
  2 normal function: <button onClick={this.handler.bind(this, id)} />
  In both forms, the e argument representing the React Event will be passed
as a second argument after the id. With an arrow function, we have to pass
it explicityly, but with bind any further arguments are automatically
forwarded.

# Conditional Rendering