[Udacity HTML, CSS, JS Style Guide](http://udacity.github.io/frontend-nanodegree-styleguide/index.html)
* A good function should follow the "DOT" rule:
* Do One Thing
* Composition is to combine simple functions to build more complicated ones
* React builds up **pieces** of a UI using **components**.
* كل فنكشن ترجع UI
* Declarative code vs imperative code
* Imperative code: tell JavaScript exactly **what** to do and **how** to do it.
* Declarative code: *declare* what we want done, and JavaScript will take care of doing it. (React)
* Data-Binding
* two-way data binding, the data is kept in sync throughout the app no matter where it is updated (view>model, model>view).
* **one-way** data binding, *Data flows down from parent component to child component. Data updates are sent to the parent component where the parent performs the actual change*.
* = React is using this
* = React's unidirectional data flow.
* [The Diffing Algorithm](https://facebook.github.io/react/docs/reconciliation.html#the-diffing-algorithm)
* React uses JavaScript objects to create React elements
* Use these React elements to describe what we want the page to look like.
* React will be in charge of generating the DOM nodes to achieve the result.
```javascript
React.createElement( /* type */, /* props */, /* content */ );
```
* `/* type */` either a string or a React Component can be a string of any existing HTML element (e.g. 'p', 'span', or 'header') or you could pass a React component (JSX)
ReactDOM.render(/* React.createElement() */ , /* DOM Obj */ )