Second Component

In notebook:
FrontEndMasters React Intro 2
Created at:
2016-12-21
Updated:
2016-12-21
Tags:
JavaScript libraries React
50:11

Removes the inline JS from before and extracts to ​<script src="js/ClientApp.js"></script>​

Syntax highlighting

Install the babel package (sublime) and open all js files as JavaScript(Babel). 
Vimbox for vim. Atom and Visual Studio Code work great out of the box with JSX. 

52:33
Every component in React must have  a ​render​ method and it always must return markup and it has to be a pure function. 
  1. have a ​render​ method
  2. return markup
  3. must be a pure function
53:40

You can do (pass an array): 54:58
   div(null, [
    React.createElement(MyTitle),
    React.createElement(MyTitle),
    React.createElement(MyTitle),
    React.createElement(MyTitle),
    ]
  )
You can create big components that contain smaller components. This is how all apps work in React.57:15

Semicolons.

He doesn't use semicolons. They are not necessary. Uses standard to lint his code. It catches the few edge cases where you do need to include them. 

createFactory

just a convenience method
   var MyTitleFact = React.createFactory(MyTitle)
 
 div(null, [
    MyTitleFact(null),
    MyTitleFact(null),
    MyTitleFact(null),
    MyTitleFact(null),
    ]
  )
59:45

Props

Pass parameters to components.  These are read-only properties (important). 
​props​ are what the parent passes to the component. 

Except for one type of component (later) you don't pass props to the ​render​ function. 

You can pass down any type of value to props. (function, string, array).

Shows how to pass parameters to style:
1:07:00
  var MyTitle = React.createClass({
  render () {
    return (
      div(null,
      // pass style instead of null
        h1({ style: {color: this.props.color, fontWeight: 'bold'}}, this.props.title)
      )
    )
  }
})

var MyFirstComponent = (
  div(null,
    MyTitleFact({title: 'Props are great!', color: 'peru'})
  )
)

  // **** js/ClientApp.js

var div = React.DOM.div
var h1 = React.DOM.h1

var MyTitle = React.createClass({
  render: function () {
    return (
      div(null,
        h1({ style: { color: this.props.color } }, this.props.title)
      )
    )
  }
})

var MyTitleFactory = React.createFactory(MyTitle)

var MyFirstComponent = React.createClass({
  render: function () {
    return (
      div(null,
        MyTitleFactory({title: 'props are the best', color: 'peru'}),
        MyTitleFactory({title: 'semicolons are the worst', color: 'mediumaquamarine'}),
        MyTitleFactory({title: 'jklol its okay if you like semicolons', color: 'rebeccapurple'}),
        MyTitleFactory({title: 'im out of ideas', color: 'dodgerblue'})
      )
    )
  }
})

ReactDOM.render(React.createElement(MyFirstComponent), document.getElementById('app'))