Muhsin "Moose" Abdul-Musawwir

• Frontend Software Engineer
• github.com/shinobi881
• linkedin.com/in/muhsin81

About Me

React in 5 Minutes

What is React

• Open source view library (web, mobile, VR)
• An ecosystem of technologies
• A methodology of building applications

A View Library

• React - Web
• React Native - Mobile
• ReactVR - VR

import React, { Component } from 'react';

// Functional or stateless component
const SomeText = props => {
  const { isOn } = props;

  return (
    <div id="microphone" onClick={this.onClick}>
      <h1>{`Is this thing ${isOn}`}</h1>
    </div>
  );
};

// Stateful component
class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.onClick = this.handleClick.bind(this);
    this.state = { on: false };

  }
  
  handleClick(e) {
    e.preventDefault();
    
    this.setState({ on: true });
  }
  
  render() {
    const isOn = this.state.on ? 'on?' : '...tap, tap...tap!';

    return (
      <div id="microphone" onClick={this.onClick}>
        <SomeComponentOne {...this.props} />
        {/* A bunch of other components */}
        <SomeText {...this.state} />
      </div>
    );
  }
}

export default MyComponent;

Composeable

Stateful and Functional

Create markup and apply logic

An Ecosystem

• React
• Redux (or some Flux implemetation)
• Node
• Server-side rendering
• Immutable JS
• Webpack
• Flow
• Redux-Observable
• ES6+
• Much, much more

A Methodology

• Composability  (components technologies)
• Separation of Concerns
• Component-based architechture