How we react/redux

README.md

Introduction to React

• React is the V in MVP (Model-View-Controller)
• It's architecture is similar to the Web Components standard
• Simple said: You can create your "own html tags" like
• React then reassembles your components into the DOM and manages the expensive DOM updates (throught diffing a shadow DOM)

Further reading

• Facebook's thinking in react
• React Intro in Meteor Guide

Class Based Component vs Functional Component

TD:LR; Avoid class based components, but know how they differ.

import React from 'react';

export class MyComponent extends React.Component {
  // must
  render() {
    return (
      <div></div>
    );
  }
  // optional
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  componentDidMount() {
  }
  componentWillUnmount() {
  }
  // ... https://facebook.github.io/react/docs/react-component.html
}

vs:

import React from 'react';

const functionalComponent = props => (<div>{props.title}</div>)

Key differences:

• Functional components do not handle internal state and lifecycle

Adding lifecycle methods to functional Components: https://github.com/acdlite/recompose

Handling state: With Redux

Styling

• React itself does not enforce any styling concepts
• But there are disadvantages with the current CSS solution(s)
• There is no official and agreed upon way to style yet. But it seems it goes the direction of JSS.
• React: CSS in JS techniques comparison

Tooling

• React Developer Tools
• Redux DevTools
• Meteor DevTools

Introduction to Redux

• Predictable application state management
• Replacement for Meteor Sessions

In words

• An events happens, that triggers an action: UI interaction or data update
• An action has the following shape:

{
  type,     // String, f.e. 'melonchallenge/ADD_PRICE_ENTRY'
  ...params // Other parameters in any form
}

• This action can be constructed with an actionCreator
• The action is dispatched on the store
• The store consists of a state and reducers
• Reducers take the current state and the dispatched action to calculate a new state
• State-changes trigger change events

Link to React

• React-redux simply maps the Redux state to React component props
• Also, it binds dispatches to React component props
• Form handling with erikras/redux-from
• Routing with react-router (with Redux integration)

Other technologies coming

• GraphQL (Schema, Validation, PropTypes Generation, Data Query)
• Flow Type