Introduction to React

And how we're using it!

About React

“A JavaScript library for building user interfaces”

The V in MVC

Why React?

Original plan: HTML with piecemeal JS

Problems with original plan:

• Piecemeal JS is messy and hard to reason about
• Not DRY

How React solves those problems:

• Establishes conventions on how user interactions change rendered content
• Makes code modular and reusable

Main concepts

1. Components
2. JSX
3. State
4. Props
5. Data Flow
6. Redux

Components

The building blocks of your React UI.

An abstraction of HTML and JS into reusable, composable units.

Bundles together necessarily dependent behavior and display logic.

Component example

class ErrorableTextInput extends React.Component {
  /* other code */

  handleChange(domEvent) {
    this.props.onValueChange(domEvent.target.value);
  }

  render() {
    return (
      <div>
        <label htmlFor="text-input-1">{this.props.label}</label>
        <input id="text-input-1"
            placeholder={this.props.placeholder}
            type="text"
            value={this.props.value}
            onChange={this.handleChange}/>
      </div>
    );
  }
}
					

Rendering components

A component can be rendered by calling it from within another component.

class SocialSecurityNumber extends React.Component {
  render() {
    return (
      <ErrorableTextInput value={this.props.ssn}/>
    );
  }
}
					

Component Hierarchy

Helps identify which components you'll need and how they'll be used.

HCA's component hierarchy:

- HealthCareApp
  - Nav
  - Section
    - Questions (e.g., SocialSecurityNumber)
      - Form elements (e.g., ErrorableTextInput)
    - Form elements
  - ProgressButton
					

This naturally corresponds with the structure of our application.

JSX

JS syntax for rendering content in the DOM.

Similar to HTML.

Reserved words (class and for) are replaced (className and htmlFor).

Components look like HTML tags

render() {
  return (
    <div className="medium-4 columns show-for-medium-up">
      <Nav currentUrl={this.props.location.pathname}/>
    </div>		
  );
}
					

2 sources of data

1. State
• Mutable data
• Set in a particular component and not directly accessible by other components.
2. Props
• Immutable data
• Attached to a particular component and passed down by the parent component.

State

Example from HCA: a store of our model data in a JSON object.

nameAndGeneralInformation: {
  fullName: {
    first: 'William',
    middle: null,
    last: 'Shakespeare',
    suffix: null,
  },
  mothersMaidenName: 'Arden',
  socialSecurityNumber: '555-55-5555',
  gender: 'M',
  dateOfBirth: {
    month: 4,
    day: 23,
    year: 1564,
  }
}
					

Props

Data from state is passed down through props from parent components to nested components.

class NameAndGeneralInfo extends React.Component {
  render() {
    return (
      <SocialSecurityNumber ssn={this.props.data.socialSecurityNumber}/>
    );
  }
}

class SocialSecurityNumber extends React.Component {
  render() {
    return (
      <ErrorableTextInput value={this.props.ssn}/>
    );
  }
}
					

Data Flow

React convention is one-way data flow:

1. User triggers a change to a form element
2. State is updated with the change
3. Props are passed down with new data
4. The form element displays the data passed to it through props

Best practices of state

Keep as many components as possible stateless.

Keep the minimal amount of data needed to represent your UI in state.

State should contain data that, once changed, will trigger a UI update.

Do not store computed data in state.

Do not store duplicated data from props in state.

Redux

Helps us manage state

Only way to update state is to dispatch an action

render() {
  return (
    <SocialSecurityNumber ssn={this.props.data.socialSecurityNumber}
      onValueChange={(update) => {this.props.onStateChange('ssn', update);}}/>
  );
}

function mapDispatchToProps(dispatch) {
  return {
    onStateChange: (field, update) => {
      dispatch(
        veteranUpdateField(['nameAndGeneralInformation', field], update)
      );
    }
  };
}
					

Learn more!

React tutorial

Redux docs