1. Innovation Co-Lab roots/React
Victor Wang, Software Engineer & Technical Consultant
March 30, 2017

2. What is React?
React is a JS library for building user interfaces, but it's more than that.
Frameworks are born to tackle a particular engineering problem in the industry.
Frameworks are usually opinionated, which mean they follow ways of thinking of their creators.
To use a framework, we need to evaluate if it solves the problem you are faced with—never go into battle unprepared.

3. What problems are painful?
Modern software is sophisticated. Changes are propagated. It get hard to control and manage.
The more sophisticated it gets, the harder for software engineers to manage its states. Even worse, we may end with infinitely many changes caused by one another.
Changes are not deterministic. If something is wrong, very hard for engineers to track down the bug.

4. Thinking in React
Inspired by functional programming—no values are permanently changed. Pipe looks like input → function1 → function2 → function3 → output.
good because functions are deterministic. When something is wrong, you'll know where it's wrong
Components! Highly modularised.
good because it offers a clear hierarchical structure. No more messed up dependencies.
Minimal and fast
React doesn't assume anything about the rest of your technical stack. It can work with anything.
Usage of Virtual DOM technology.

5. JSX & ES6 JSX ES6 Feels like writing HTML in JS.
It's syntactic sugar to write web components in JS.
ES6
Suitable for writing web components
Clean code

6. Setting up Development Environment
Using Babel to transpile ES6 down to ES5
Quick and easy way
put everything in the browser, even Babel transpiling
sacrifice speed for easiness
For large projects, need to transpile it first.
Use webpack
Grab bootstrap, set font size 24px for body input, get react react DOM babel browser

7. Simple component
Nested component
Try some JSX
See it in action

8. React Events

9. What are React Events? JS Events, such as clicking
Internally triggered events such as errors
What are React Events?

10. Most painful when application scales.
Example: Message unread badge on the front page of Facebook
Dependency: higher level changes will propagate all the way down to the base level.
States
Most painful when application scales.

11. The React Way Decompose UI into hierarchical components.
All UI can have the internal states.
When state changes, UI is re-rendered.
Virtual DOM makes partial rendering possible—blazing fast!
Properties are passed down from high levels to low levels.
What if what to pass state down? As properties
State change → UI re-render → cause properties to be passed to low levels to update
The result is a manageable way to build sophisticated UI.
Use Appmanager as an example of decompose

12. Innovation Co-Lab Application Manager

13. Destructuring App Manager
Open app manager and decompose it from the browser

14. Finding out its states Live editing Error handling
Even OAuth is simpler