Backbone + React

Backbone + React

Micah Wood @wpscholar

http://wpscholar.com

Project Background

Enterprise ProjectCustom Page Builder

Actual CodeFlaws Included

Project Setup

Models and Collections

Components

GulpTask Runner

Node Modules for the Browser

Browserify TransformReactify

- - ComponentBackbone Mixins for React

JSX Syntax

Root Element

Self-Closing Tags

Camel Case Attributes

Magic Attributes

Boolean Attributes

Form Fields

Ternary Operators

Keys

React Basics

Render Method

One-Way Data Flow

Props vs State

Initialization

Property Types

Controlled Components

Nested Components

Nested Components

Life Cycle Methods

Accessing the DOM

Don’t Manipulate the DOM!

Dynamic Instantiation

React + Backbone

The Mixin

Accessing Collection Data

Accessing Model Data

Accessing Model Data

Questions?

Micah Wood @wpscholar

http://wpscholar.com