React notes.js

"Web Apps of the Future with React"
by Neeh Mehta for cs50

React is a framework
Used on facebook, insta, KA

React DOM for web
React Native for Android, iOS

Components: HTML tags on steroids
<Time>, <Profile>, <LikeCounter> all within <Post>
interactive, declarative, composobale, reusable

unidirectional data flow:
Data source sends to components,
components send to data
Components use data for their rendering
Given certain data, you know exactly how the page will look: deterministic

"Use Flux to interact with outside world"

Can use data from anything: node, ruby, etc. for components
Flux to turn

github.com/hathix/cs50-seminars/blob/tree/master/react
is.gd/cs50react

flashcard app
4 steps from scratch to build this
Step 1. first component- html element
Step 2. Customize components with properties // react uses virtual DOM
Step 3. Interactivity?
Step 4. Embedding Components

facebook.github.io/react
yeoman.io to get "transformer" babel thing working


/*****************************************/
/**      code written in codepen        **/
/** http://codepen.io/hathix/pen/NGMBxj **/
/**  http://codepen.io/anon/pen/RWyEjx  **/
/**         babel transformer           **/
/*****************************************/

HTML:
<div id="page">

</div>

CSS:
body {
  padding: 50px;
}

JS:
let CardView = React.createClass({
  getInitialState: function(){
    return {
      front: true
    };
  },
  
  flip: function(){
    this.setState({
      front: !this.state.front
    });
  },
  
  // returns HTML
  // jsx to write html in your js
  render: function(){
    let text;
    if(this.state.front) {
      text = this.props.card.question;
    } else {
      text = this.props.card.answer;
    }
                                 
    return (<div>
      <p>{text}</p>
      <button onClick={this.flip}>Flip</button>
    </div>);
  }
});

let ListView = React.createClass({
  render: function(){
    // [1,2,3].map(x => x*x); == 1,4,9
    let list = this.props.cards.map(card => (
      <li>{card.question}</li>
    ));
    
    return (
     <ul>
      {list}
     </ul>
    );
  }
});
    
let App = React.createClass({
  getInitialState: function(){
    return {
      activeIndex: 0
    };
  },
  
  render: function() {
    var activeCard = this.props.cards[this.state.activeIndex];
    return (
      <div>
      <CardView card={activeCard}/>
      <ListView cards={this.props.cards} />
      </div>
    );
  }
});
 
 let cards = [
   {
     question: "What is 5+37?",
     answer: "42"
   }, {
     question: "What is 5+370?",
     answer: "375"
   }, {
     question: "What is 50+37?",
     answer: "87"
   }
 ];
    
React.render(<App cards={cards} />, document.getElementById('page'));