React Fundamentals

Library, not framework Convert state of UI to the Dom Created and maintained by Facebook One way data flow simplified things Virtual dom Declarative style

Props + State = Model Model + Component = DOM

Dom events trigger changes in state

React maintains a copy of the Dom in memory, much faster to work with than the real Dom

Proptypes enforce var types

Jest and Enzyme for component testing

React.createElement, JSX transpires to this

JSX attributes become component props

Spread syntax to add props to element: props = { a:4 } <Sum {...props} />

Data is passed down the component hierarchy as props

Data is moved back up the hierarchy by passing it as params to callback functions that are passed in as props

JSX attributes are written in camelcase, for and class are reserved words, use htmlFor and className

JSX also has a style attribute that accepts a JSON object rather than a CSS string. Each key in the JSON is written in camelcase

React escapes all content by default

JSX attribute dangerouslySetInnerHTML is used to display unescaped content

JSX elements can be nested

Children can be referenced using props.children

Dom Events: SyntheticEvents are abstractions of events so the programmer doesn't need to know about each browsers event specifics

When an event listener calls a function, a synthetic event object is passed to the callback function

Component Events: Call made to send data to parent component via a function passed in as a prop

JSX textarea and select elements use a value attribute

Form elements are read only by default as the value attributes are bound to empty strings

Set value attribute to a state property, add an onchange attribute with a function call that uses setState

ReactJSONSchemaForm for form validation

pushState allows React to update url and browser history without triggering a refresh of the browser

allows components to be rendered at that place if the path attribute matches

If exact is not present then the path becomes a 'begins with'

Path attributes containing a colon will match a passed in property. These can be accessed using the match.params object

history.push takes you to a different route and adds to browser history

MVI - Model View Intent Model - Completely describes the state of the user interface View - Function that transforms the Model into the user interface Intent - The user interface (view) can generate intents. When an intent is produced it is applied to the model

Intents and actions are the same thing

State container: getState - Get current application state dispatch - Apply intent to application state subscribe - Registers callback, to be called when intent is applied against state

Redux: Implements the MVI architecture, intents are referred to as actions in redux

Reducer: Takes in the current state and an intent and returns the new state It reduces the stream of intents to a single object

React-redux: Makes code neater, connects React components to the application state Provides data from the Redux store to components when they are rendered Provides a way for components to publish actions that can be used to modify the redux store

Provider: React component provided by React-redux Allows all React components below it in the component tree to have access to the redux store

connect: mapStateToProps:

• manage what data from the redux store should be provided to child components

mapDispatchToProps:

• manages how the components can send actions to the redux store
• maps component events to redux actions

Simple Redux config: let store = createStore(reducer);

function reducer(state = { initialData }, action){
  switch(action.type) {
    case ‘MYEVENT’: return Object.assign({}, state, { val: true })
  }

  default: return state;
}

Wrap any components in the Provider:

<Provider store={store}>

Then wrap the component declaration in the redux connect call: const AuthorQuiz = connect(mapStateToProps, mapDispatchToProps)(MyComponent)

function mapStateToProps (state){
  return {
    foo: state.foo
  }
}

function mapDispatchToProps (dispatch){
  return {
    onMyEvent: answer => {
      dispatch({ type: ‘MYEVENT’, answer })
    }
  }
}