Basic ReactJS work

01-react-syntax.jsx

// React Native syntax
var MyComponent = React.createClass({
  render() {
    return <div>
        <h1>Hello World</h1>
        <p>This is my first React component!</p>
    </div>
  }
})

// ES6 class syntax
class MyComponent extends React.Component {
  render() {
    return <div>
        <h1>Hello World</h1>
        <p>This is my first React component!</p>
    </div>
  }
}

// Stateless functional component syntax
const MyComponent = () => {
  return <div>
      <h1>Hello World</h1>
      <p>This is my first React component!</p>
  </div>
}

// Render DOM element
ReactDOM.render( <MyComponent />,
    document.getElementById('react-container' ) )

02-react-props-state.jsx

// Properties (stateless syntax)
const ChristmasGift = () => {
  return (
    <div className="present">
      <span className="bow"></span>
      <span className="ribbon"></span>
      <h1 className="present-title">{this.props.text}<span>{this.props.children}</span></h1>
    </div>
  )
}

// Events (ES6 syntax)
/**
 * Note: CAN'T use ES6 syntax nor Stateless syntax to write custom function() names separated by commas
 * Should use React Native syntax instead
 */
var Present = React.createClass {
  open() { // Create your own custom events
    alert( "Opening present" )
  },
  render() {
    return (
      <div className="present" onClick={this.open}>
        <span className="bow"></span>
        <span className="ribbon"></span>
        <h1 className="present-title">{this.props.text}<span>{this.props.children}</span></h1>
      </div>
    )
  }
} // END React.Component

// State (React Native syntax)
var Satisfied = React.createClass({
  getInitialState() { // the state of the Component when first created
    return {checked: false}
  },
  checkToggle() {
    this.setState({checked: !this.state.checked}) // reverse the state true/false
  },
  render() {
    var msg
    if ( this.state.checked ) { msg = "satisfied" }
    else { msg = "unsatisfied" }
    return (
      <div>
        <input type="checkbox" 
               onChange={this.checkToggle}
               defaultChecked={this.state.checked} />
        <p>Looks like you are {msg} with your Christmas presents.</p>
      </div>
    )
  }
}) // END React class

// Render our Components
/**
 * Notes: 
 * 1. Don't put comments in this function - the compiler will either have an error, or output the comment as plain text
 * 2. Also, don't use commas between Components - this is XML, treat it like a block of HTML
 * 3. All Components must be contained within an enclosing <div>
 * 4. Any text between Component tags (i.e. "th") is this.props.children
 */
ReactDOM.render(
  <div>
    <ChristmasGift text="25">th</ChristmasGift>
    <Present text="24">th</Present>
    <Satisfied></Satisfied>
  </div>,
  document.getElementById('under-the-tree')
)

03-react-gifts.jsx

// Add State to Present 
class PresentState extends React.Component {
  getInitialState() {
    return { open: false }
  },
  open() { // Create your own custom events
    this.setState({open: true})
  },
  close() {
    this.setState({open: false})
  },
  renderGift() {
    return (
      <div className="present" onClick={this.open}>
        <span className="bow"></span>
        <span className="ribbon"></span>
        <h1 className="present-title">25<span>th</span></h1>
      </div>
    )
  },
  renderBlog() {
    return (
      <div className="blog-post">
        <h1 className="post-title">{this.props.title}</h1>
        <p className="excerpt">{this.props.children}</p>
        <button onClick={this.close}>CLOSE</button>
      </div>
    )
  },
  render() {
    return (this.state.open) ? this.renderBlog() : this.renderGift()
  }
} // END React.Component

// Render our Component
ReactDOM.render(
  <PresentState title="Blog Post Title">Blog Post Excerpt</PresentState>
  document.getElementById('under-the-tree')
)

04-react-christmas-tree.jsx

// React Gift Component
var Gift = React.createClass({
  getInitialState() {
    return { open: false, addressing: false }
  },
  
  // Functions for handling the opening/closing of a Gift (to view the blog post)
  open() {
    this.setState({reading: true})
  },
  close() {
    this.setState({reading: false})
  },
  
  // Functions for handling adding a "To:" address note on the present's tag
  address() {
    this.setState({addressing: true})
  },
  save() {
    var name = this.refs.yourName.value // retrieved from the "tag" <div> - save it later
    this.setState({addressing: false})
  },
  
  // Function to render the Gift
  /* Note: Use refs to retrieve data (input) into the React script and work with it further */
  renderGift() {
    return (
      <div className="present" onClick={this.open}>
        <span className="bow"></span>
        <span className="ribbon"></span>
        <div className="tag" onClick={this.address}>
          To: <input type="text" ref="yourName" />
          <button onClick={this.save}>X</button>
        </div>
        <h1 className="present-title">25<span>th</span></h1>
      </div>
    )
  },
  
  // Function to render the Blog post
  renderBlog() {
    return (
      <div className="blog-post">
        <h1 className="post-title">{this.props.title}</h1>
        <p className="excerpt">{this.props.children}</p>
        <button onClick={this.close}>CLOSE</button>
      </div>
    )
  },
  
  render() {
    return (this.state.open) ? this.renderBlog() : this.renderGift()
  }
}) // END Gift Component

// React Christmas Component
var Christmas = React.createClass({
  // use propTypes to do some error checking on our Components
  propTypes: {
    count: function( props, propName ) {
      if( typeof props[propName] !== 'number' ) {
        return new Error( "The count must be a number" ) // Output an error in the JS console
      }
      if( props[propName] > 25 ) {
        return new Error( "There are not " + props[propName] + " days in Advent. count is too high" )
      }
    }
  },
  getInitialState() { // this is the initial state for Gifts (the children of Christmas)
    return {
      gifts: [
        'Transformer',
        'Lego City Train set',
        'Super Mario Anything',
        'New bicycle'
      ]
    }
  },
  // Note: map iterates through all our notes to display them all
  render() {
    return (
      <div className="christmas">
        {this.state.gifts.map((gift, i) => { 
          return <Gift key={i}>{gift}</Gift>
        })}
      </div>
    )
  }
}) // END Christmas Component

// Render our page!
ReactDOM.render(
  <Christmas count={25}/>,
  document.getElementById('christmas-scene')
)

05-react-christmas-playlist.json

{ // Dec 1
  "font": [
    "typeface": "Sonsie One",
    "googleFont": 1,
    "url": "",
    "fontMsg": "Selected for the large, stylized numerals."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 2
  "font": [
    "typeface": "Varela Round",
    "googleFont": 1,
    "url": "",
    "fontMsg": 'This is the ONLY Google Font with "Round" in its name.'
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 3
  "font": [
    "typeface": "Averia Serif Libre",
    "googleFont": 1,
    "url": "",
    "fontMsg": "A great, rounded, old-style, Christmas-y serif font."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 4
  "font": [
    "typeface": "Quicksand",
    "googleFont": 1,
    "url": "",
    "fontMsg": "A thin sans-serif with rounded terminals."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 5
  "font": [
    "typeface": "Nunito",
    "googleFont": 1,
    "url": "",
    "fontMsg": "A nicer sans-serif with rounded terminals. (Also, the body font on <a href='http://poststatus.com'>Post Status</a>.)"
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 6
  "font": [
    "typeface": "Volkhov",
    "googleFont": 1,
    "url": "",
    "fontMsg": "A beautiful serif I recently used for the headings on my <a href='http://wordpress.org/themes/jkl'>first WordPress theme on the .org repository</a>."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 7
  "font": [
    "typeface": "Source Sans Pro",
    "googleFont": 1,
    "url": "",
    "fontMsg": "The sans-serif font I selected for the body on my <a href='http://wordpress.org/themes/jkl'>first WordPress theme on the .org repository</a>."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 8
  "font": [
    "typeface": "Source Code Pro",
    "googleFont": 1,
    "url": "",
    "fontMsg": "The monospace font I selected for &lt;code&gt; tags on my <a href='http://wordpress.org/themes/jkl'>first WordPress theme on the .org repository</a>."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 9
  "font": [
    "typeface": "Font Awesome",
    "googleFont": 0,
    "url": "",
    "fontMsg": "Simply, Awesome. Obviously I love Font Awesome - and backed <a href='http://kickstarter.com'>Font Awesome 5.0</a>!"
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 10
  "font": [
    "typeface": "Merriweather",
    "googleFont": 1,
    "url": "",
    "fontMsg": "This is one of the most beautiful serif fonts I've seen in recent years. I used it in a book I wrote."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 11
  "font": [
    "typeface": "Montserrat",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 12
  "font": [
    "typeface": "Playfair Display",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 13
  "font": [
    "typeface": "Oswald",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 14
  "font": [
    "typeface": "Play",
    "googleFont": 1,
    "url": "",
    "fontMsg": "A font I selected for a new logo (MarsX) I designed. (They wanted something a little like SpaceX.)"
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 15
  "font": [
    "typeface": "Fira Sans",
    "googleFont": 1,
    "url": "",
    "fontMsg": "I selected this font for the body text on MarsX's website."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "l5Y0lVM-44k",
    "videoTitle": 'Jordan Smith sings "The Grinch"',
    "videoMsg": "I've always enjoyed this song - and this is a great rendition of it."
  ]
},
{ // Dec 16
  "font": [
    "typeface": "Julius Sans One",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 17
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 18
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 19
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 20
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 21
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 22
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 23
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": ""
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 24
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": "Since it's my birthday today..."
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},
{ // Dec 25
  "font": [
    "typeface": "",
    "googleFont": 1,
    "url": "",
    "fontMsg": "The Christmas font!"
  ],
  "video": [
    "provider": "youtube",
    "videoId": "",
    "videoTitle": "",
    "videoMsg": ""
  ]
},