Notes for React

Lesson 1

Installing required modules:

$ npm install express body-parser express-react-views node-jsx

Lesson 2 - React components

ReactClass & domElement

var ReactClass = React.createClass({
  render: function() {
    return (
      //<myHtmlElement></myHtmlElement>
      //<MyReactComponent />
    );
  }
});

Lesson 3 - props

Passing properties from parents to children

  <td style={{border: "1px solid black"}}{this.props.title}</td>
  <td style={{border: "1px solid black"}}{this.props.children}</td>

Lesson 4 - propTypes

Validate that components are passed with all needed properties by: propTypes and React.PropTypes. Example:

React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
    id: React.PropTypes.number.isRequired,
    alt: React.PropTypes.string
  },
  /* ... */
);

Lesson 5 - state

Define mutable values with this.state, which is private to each component. Change state by using this.setState.
https://facebook.github.io/react/docs/component-api.html
https://facebook.github.io/react/docs/component-specs.html

Lesson 6 - css

Define style as variable:

var style = {
  tableContent: {
    border: "1px solid black"
  }
};

<td style={style.tableContent}>

https://facebook.github.io/react/tips/inline-styles.html

Lesson 7 - Props from Server

React makes use of a key attribute to keep track of each component in the VirtualDOM. This allows it to update the real DOM as sensibly and infrequently as possible.

<TodoList data = {this.props.data} />

var todo = this.props.data.map(function(obj) {
  return <Todo title={obj.title} key={obj.title}>{obj.detail}</Todo>
});

Lesson 8 - Isomorphic (React on the front-end)

$ npm install browserify reactify

Lesson 9 - CSS2

https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
https://facebook.github.io/react/docs/events.html
https://facebook.github.io/react/docs/forms.html

Lesson 10 - Event

(same as above)

KlavierCat / learnyoureact