Street Creds

• Web Developer

• ASP.NET C# (10yrs+)

• "Backend"

Always flirting with

Front-End

GEOCITES

ANGELFIRE

Angular1

Angular2

No more

To-do Apps

Weather Apps

What API should I use?

Expectations

Not Covered

Covered

LOTS OF

LIVE CODING!

JavaScript library for building interfaces

React writes HTML in JavaScript

Others extend HTML

Declarative

Logic written in

JavaScript

instead of

Templates

Virtual DOM

Virtual representation of

HTML in-memory

Tree Reconciliation

Only write back the differences between
new and previous tree

Components

Describe UIs

Props vs State

Component Types

@SamerBuna

Function Component

function Button() {
    return (
        <button>Go</button>
    )
}

Class Component

Same as function component

+

@SamerBuna

Class Component

class Hello extends React.Component {
  render() {
    return (
      <div className="container">
        <h1>Getting Started</h1>
      </div>
    );
  }
}

JSX

<div><H1><ul><li><p>

JSX Func Example

function Button() {
    return (
        <button>Go</button>
    )
}

function Button() {
    return (
        React.createElement("button", null, "Go")
    );
}

JSX Class Example

class Hello extends React.Component {
  render() {
    return (
      <div className="container">
         <h1>Getting Started</h1>
      </div>
    );
  }
}

class Hello extends React.Component {
  render() {
    return (
      React.createElement("div", 
        { className: "container"},
          React.createElement("h1", null, "Getting Started")
      )
    );
  }
}

FunFunFunction

Events

componentDidMount()

componentDidUpdate()

https://facebook.github.io/react/docs/react-component.html

Next Step!

Resources

bit.ly/JumpStartReact

Jose Gonzalez

@JoseGonz321

MindBodySoulDeveloper.com