Understanding React

What is React?

Virtual DOM

Event and Data binding

Web components

Why use React?

Much more control over UX of application

Good framework for large applications

Significant amount of Ecosystem code

Fast!

React's place in greater web ecosystem

Pure Frontend library

The V in MVC

100% javascript

React Vs. similar libraries

React Vs. Ember.js

Ember is significantly larger in scope

Ember includes model framework - React doesn't

Ember includes Routing framework

React vs. Angular

Angular is larger in scope

Angular has builtin routing

Angular has built in http handling

Angular has assorted functionality

React vs. JQuery

React is orthogonal in scope

React has little DOM handling

JQuery plays well with React

React Basics

Rendering to DOM

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

JSX Templates

 const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );

Components

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Combining Components

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Event binding

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

State handling

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

React Design Philosophy

Hold your state at the top level

State drips down into components via props

No built in state management

Helps keep global state consistant

Minimize Local State changes

State changes add complexity

React tries to be "pure"

Components do a good job managing local state - keep state within them

Have the dumbest components possible

It's cheap to have more components

It's tempting to stick a lot of logic into a single component

Throw subcomponents at any problem that gets complex

What React is good at

Single page apps loading from an api

When everything client side is React all pieces play well with each other

The default use case

Complex single page work flows

Collecting data for form submission

Self contained sub apps have well defined borders

Better UX with React is easy

Single pages that shift with user input or over time

React is a very good template language

Is very good at redrawing in response to state changes

Can propagate changes down to ensure consistency

What React is not good at

Global touchups of existing applications

React wants to own a defined scope

Moving data into and out of React is possible but annoying

Doesn't play to the strengths of React

One off components in existing applications

React does best with systems of components

Probably overkill for a single element

Support needed to make React work

What concrete steps go into adding React to an existing application

Compile Step

Create React app can setup a scaffold

Without a compile step no JSX, no ES6

Forced to use single large file

Possible but lose out on a lot of functionality

ES6 knowlege

React is strongly biased for es6

Much easier and more fun to write es6

lingua franca of react world

API to feed data

Although you can load with data, better to sip from API

Strong support for async state updates

Truly complex applications require defined backend interaction

Node installed on build and develop boxes

Almost all React based tech uses node

Yarn/Npm for all third party package installs

All current build tools run via node

Testing considerations

Integration testing is hard

Pure architecture focus makes unit testing easy

Jest is officially supported solution, but others work

React has no built in testing soultion

SEO considerations

Will pay a small penalty - render time at the very least

Server side rendering options exist for single page apps

Check out next.js

Google supports JS rendering

Large Ecosystem players

Large number of small community libraries to handle specific ux cases - E.G. calendars, enhanced inputs, css

Large libraries make significant changes to structure and scope of React project

Facebook support ensures lots of fundamental libraries

Large and diverse ecosystem

State management libraries

Flux pattern rebuilt by community - Reflux is current popular library

Also check out mobx

Facebook supplies flux

Routing libraries

React router

Used when changing page url or complex state trees

Introduce significant complexity

Developer tools

es6linter is react ready

React developer chrome extension

Most editors have JSX mode

React Native

Instagram, Facebook, Airbnb

Build IOS/Android applications w/ web tech

Fully featured apps

React VR

Still pretty early

Build Rift applications w/ web tech

React office-ui-fabric-react

React components to match office UI

Officially supported library

Good React/Sharepoint example

https://github.com/waldekmastykarz/spfx-react-fabric-trendinginthissite

Use webparts framework to include self contained JS app

Sharepoint framework includes es6 libraries such as promises

https://blog.mastykarz.nl/building-sharepoint-framework-client-side-web-parts-react/