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

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.

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.

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.

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

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

Simple component Nested component Try some JSX See it in action

React Events

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

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.

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

Innovation Co-Lab Application Manager

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

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