React

"React is a declarative, efficient, and flexible JavaScript library for building user interfaces."

Compared to other frameworks:

120KB, pretty large, but no required dependencies
Fast
Less DSL - "domain specific language" (vs. Angular, Ember)
React Native for iOS and Android apps
Supports server-side rendering

Example apps

Facebook, Instagram (basically one large React app), Flipboard, BBC and Netflix

Basic structure

React component class/types
Take in props as parameters
Return hierachy or views via render method
Render returns React elements, a lightweight description of what to render

JSX

JSX is a "syntax extension to JavaScript"
After compilation, JSX expressions become regular JavaScript objects.

<div />

will evaluate to

React.createElement('div');

at runtime

Embedded Javascript

{helloWorld();}

Put in {}

State

Concept of state and building statelessy is important in React.

Basic points:

Move state upwards (to parent)
- i.e. Board stores state for each Square
- State will be passed to Squares as props

If you know the state, you know the rendered output. *

What is Flux?

"more of a pattern than a framework"
Concept: view > event > update model > model triggers event > view responds by re-rendering

Hello World in React

See example here: http://codepen.io/gaearon/pen/rrpgNB?editors=1010

Have div with id root in index.html
Render h1 hello world in root div in ???.js

How to include React?

Can add as CDN (suitable for development only)

In your index.html file:

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>

Scroll down to bottom for updated link: https://facebook.github.io/react/docs/installation.html

Do you need Babel?

Yes - for compiling JSX at runtime

"Since the browser doesn’t understand JSX natively, we need to transform it to JavaScript first. This is handled by including Babel 5’s in-browser ES6 and JSX transformer called browser.js. Babel will recognize JSX code in <script type="text/babel"></script> tags and transform it into JavaScript on the fly. Transforming JSX in the browser works quite well during development. However, you will need to pre-compile your JSX code into JS before deploying to production so that your app renders faster. We will see how to do that later on." https://www.sitepoint.com/getting-started-react-jsx/