Workshop App if you'd like to code along https://github.com/copasetickid/railsconf-react-workshop

Making Moves With React

The Workshop

Rushaine McBean

@copasetickid
React-logo

Declartive Programming

Focusing on what you want to happen

Component-Based

Learning React Fundamentals

Components

JSX

Props & State

Component Types

The Component API

Making Your First React Component

facebook-profile

JSX

Props & State

Props

State

PropTypes

Making Sense of "this"

  • Implict Binding

Working with State

Stateless Functional Components

The Component API

React Life Cycle methods

How to think about React's Life Cycle Methods

  • When a component gets mounted to the DOM and unmounted.
  • When a component receives new data.
  • Mounting / Unmounting

  • Establish some default props in our component
  • Set some initial state in our component
  • Make an Ajax request to fetch some data needed for this component
  • Set up any listeners (ie Websockets or Firebase listeners)
  • Remove any listeners you initially set up (when unmounted)
  • defaultProps property

    Establish some default props in our component

    ES6 constructor property

    Set some initial state in our component

    componentDidMount

    Make an Ajax request to fetch some data needed for this component

    componentDidMount

    Set up any listeners (ie Websockets or Firebase listeners)

    componentWillUnmount

    Remove any listeners you initially set up (when unmounted)

    Life Cycle Events

    componentWillReceiveProps

    shouldComponentUpdate

    props.children

    Excerise Time

    How Component Roles Work

    Recap

    Questions?

    Thank You

    @copasetickid