HTML5 field types, componentWillMount, etc.

Added HTML field types to the bind / data articles
Removed componentWillMount in favor or DidMount
Renamed redux action properties to payload per feedback

Author: Seth Lemmons

05-mixins/a-floatingbox/src/Box.js

@@ -4,7 +4,7 @@ import withFloat from './util/withFloat';
 export class Box extends Component {
   state = {}
 
-  componentWillMount() {
+  componentDidMount() {
     const { float } = this.props;
 
     if (float) {

22-react-binding/a-simple-binding/src/Form.js

@@ -17,8 +17,8 @@ class Form extends Component {
     return (
       <form>
         {renderField(state, 'name')}
-        {renderField(state, 'email')}
-        {renderField(state, 'phone', 'Phone Number')}
+        {renderField(state, 'email', undefined, 'email')}
+        {renderField(state, 'phone', 'Phone Number', 'tel')}
         {renderField(state, 'company')}
         {renderField(state, 'department')}
         {renderField(state, 'title')}
@@ -28,13 +28,13 @@ class Form extends Component {
     );
   }
 
-  renderField = (state, name, label = name) => {
+  renderField = (state, name, label = name, type = 'text') => {
     return (
       <div style={{ marginBottom: '12px' }}>
         <label style={{textTransform: 'capitalize'}}>
           {label}
           <input
-            type="text"
+            type={type}
             name={name}
             value={state.user[name] || ''}
             onChange={this.handleFieldChange}

22-react-binding/b-tell-parent/src/Form.js

@@ -17,8 +17,8 @@ class Form extends Component {
     return (
       <form>
         {renderField(state, 'name')}
-        {renderField(state, 'email')}
-        {renderField(state, 'phone', 'Phone Number')}
+        {renderField(state, 'email', undefined, 'email')}
+        {renderField(state, 'phone', 'Phone Number', 'tel')}
         {renderField(state, 'company')}
         {renderField(state, 'department')}
         {renderField(state, 'title')}
@@ -28,7 +28,7 @@ class Form extends Component {
     );
   }
 
-  renderField = (state, name, label = name) => {
+  renderField = (state, name, label = name, type = 'text') => {
     return (
       <div style={{ marginBottom: '12px' }}>
         <label style={{textTransform: 'capitalize'}}>

23-redux-state/a-application-state-redux/src/actions/user.js

@@ -1,8 +1,8 @@
 export const UPDATE_USER = 'UPDATE_USER';
 
-export function updateUser (change) {
+export function updateUser (payload) {
   return {
-    change,
+    payload,
     type: UPDATE_USER
   };
 }

23-redux-state/a-application-state-redux/src/components/user/Form.js

@@ -1,10 +1,6 @@
 import React from 'react';
 
-const renderField = (
-  props,
-  name,
-  label = name
-) => {
+const renderField = (props, name, label = name, type = 'text') => {
   return (
     <div style={{ marginBottom: '12px' }}>
       <label style={{textTransform: 'capitalize'}}>
@@ -31,8 +27,8 @@ const Form = props => {
   return (
     <form>
       {renderField(props, 'name')}
-      {renderField(props, 'email')}
-      {renderField(props, 'phone', 'Phone Number')}
+      {renderField(props, 'email', undefined, 'email')}
+      {renderField(props, 'phone', 'Phone Number', 'tel')}
       {renderField(props, 'company')}
       {renderField(props, 'department')}
       {renderField(props, 'title')}

23-redux-state/a-application-state-redux/src/reducers/user.js

@@ -10,12 +10,12 @@ const DEFAULT_USER = {
   title: 'Creative Director'
 };
 
-function user(user = DEFAULT_USER, action) {
+function user(userData = DEFAULT_USER, action) {
   switch (action.type) {
     case UPDATE_USER:
-      return Object.assign({}, user, action.change);
+      return Object.assign({}, userData, action.payload);
     default:
-      return user;
+      return userData;
   }
 }
 

24-mobx-state/a-application-state-mobx/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-binding",
+  "name": "a-application-state-mobx",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

24-mobx-state/a-application-state-mobx/src/Form.js

@@ -17,31 +17,32 @@ class Form extends Component {
   }
 
   @action
-  componentWillMount() {
+  componentDidMount() {
     const { store, user } = this.props;
 
     store.user = user;
   }
 
   render() {
     const { user } = this.props.store;
+    const { renderField, submit } = this;
 
     return (
       <form>
-        {this.renderField(user, 'name')}
-        {this.renderField(user, 'email')}
-        {this.renderField(user, 'phone', 'Phone Number')}
-        {this.renderField(user, 'company')}
-        {this.renderField(user, 'department')}
-        {this.renderField(user, 'title')}
+        {renderField(user, 'name')}
+        {renderField(user, 'email', undefined, 'email')}
+        {renderField(user, 'phone', 'Phone Number', 'tel')}
+        {renderField(user, 'company')}
+        {renderField(user, 'department')}
+        {renderField(user, 'title')}
 
-        <button onClick={this.submit}>Submit</button>
+        <button onClick={submit}>Submit</button>
         <br />
       </form>
     );
   }
 
-  renderField(user, name, label = name) {
+  renderField = (user, name, label = name, type = 'text') => {
     if (user[name] == null) {
       extendObservable(user, {
         [name]: ''

25-react-data/a-remote-loading/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-data",
+  "name": "a-remote-loading",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

25-react-data/b-sorting/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-data",
+  "name": "b-sorting",
   "version": "0.1.0",
   "private": true,
   "dependencies": {