Intro to React

React vs. Angular

Approaching the same problem with a different strategy

Software Programming

Art or Science?

Angular

• Framework
• MVC

React

• Library
• Component Based
• Pairs with something like Redux to control state.

Component Based

Is Component based better?

Two Way Data Flow

One Way Data Flow

React's Design Principles

• Composition - Components
• Debugging - State
• Interoperability

Things we need to use React

• From ES6
  • Classes
  • Import/Export
• create-react-app
• JSX

ES6 Classes

class App extends Component {
  constructor(props) {
    super(props)
  }

  myMethod(arg) {
    // Do something with arg
  }

  render() {
    return <div>Hello World!</div>
  }

}

function App(args) {
  this.args = args;
  

  this.myMethod(args) {
    // Do something with args
  }
  

  this.render() {
    return <div>Hello World!</div>
  }

}

Import/Export

// myFile.js

function sum(a, b) {
    return a + b;
}

function divide(a, b) {
  return a / b;
}

function multiply(a, b) {
  return a * b;
}


export sum;

export divide;

export multiply

// number.js

import {sum, multiply} from './myFile.js';

let number = sum(3, 4);

number = multiply(number, 5);

export default number;

// index.js

import myCoolNumber from './number.js';

console.log(number);

JSX

import React from 'react';
import {render} from 'react-dom';
import AwesomeComponent from './shared/AwesomeComponent/AwesomeComponent.jsx';

class App extends React.Component {
    render() {
        return (
            <div>
                <p>Hello React!</p>
                <AwesomeComponent />
            </div>
        )
    }
}

render(<App/>, document.getElementById('app'));

Bootstrapping React

• Angular code is interpreted by the browser.
• React code is compiled into es5, then interpreted.

npm i -g

create-react-app