jennli/react.md

## react.md

      
    Raw
  

              react.md
            
          
    React

https://facebook.github.io/react/downloads.html


download the starter kit and use the following files from the zip
react.js
react-dom.js


need "Babel" library to convert React to javascript
https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/babel">
      var HelloWorld React.createClass({
        render: function(){
          return <div>Hello World!</div>;
        }
      });
      ReactDOM.render(<HelloWorld />, document.getElementById("container"));
    </script>
  </body>
</html>
using react to create a component using a class that has a render function for a single tag


React.createClass

<script type="text/babel">
      var HelloWorld = React.createClass({
        render: function() {
          return <div>
                  Hello World!
                  <p>Hello React!</p>
                 </div>;
        }
      });
      ReactDOM.render(<HelloWorld />, document.getElementById('container'));
    </script>
Component is the basic building block


javascript exists and loads before the DOM/javascript loads the DOM

JSX


how to mix html and javascript

Props


immutable, set by parent component,
the component itself can't set its own props
only set the prop when you create a component for the very first time

  var Greeting = React.createClass({
        render: function(){
          return <p>Hello {this.props.name}</p>;
        }
      });
  ReactDOM.render(<Greeting name="John"/>, document.getElementById('container-1'));
  ReactDOM.render(<Greeting name="Mary"/>, document.getElementById('container-2'));

{{}}: outside is to embed javascript, inside is to define literal objects

var styles = {color: "#0FF", fontSize: "20px"};
      return <div style={styles}>
              Hello World!
              <p>Hello React!</p>   
              </div>;
make use of component in other component:

<script type="text/babel">
  var Person = React.createClass({
    render: function() {
      return <li>{this.props.name}</li>;
    }
  });
  var Team = React.createClass({
    render: function() {
      var people = this.props.members.map(function(name){
        return <Person name={name} />;
      });
      return <div>
      <h2>{this.props.title}</h2>
      <ul>
        {people}
      </ul>
      </div>;
    }
  });
  ReactDOM.render(<Team title="team awesome" members={['Michael', 'Ryan']}/>, document.getElementById("container-1"));
  ReactDOM.render(<Team title="team crazy" members={['Certize', 'Stanley']}/>, document.getElementById("container-2"));
  </script>

give unique id for react element:

return <Person name={name} key={index} />;

code above can be refactored to:

  <script type="text/babel">
  var Person = React.createClass({
    render: function() {
      return <li>{this.props.name}</li>;
    }
  });
  var Team = React.createClass({
    people: function(){
      return this.props.members.map(function(name, index){
        return <Person name={name} key={index} />;
      });
    },

    render: function() {
      return <div>
      <h2>{this.props.title}</h2>
      <ul>
      {this.people()}
      </ul>
      </div>;
    }
  });
  ReactDOM.render(<Team title="team awesome" members={['Michael', 'Ryan']}/>, document.getElementById("container-1"));
  ReactDOM.render(<Team title="team crazy" members={['Certize', 'Stanley']}/>, document.getElementById("container-2"));
  </script>
State


mutable
we have to initialize it with some state, state is set by component itself
a state can be considered an object
state change should be minimal
User event causes state change which gets recieved during render event

  <script type="text/babel">
      var Box = React.createClass({
        getInitialState: function(){
          return {color: "red"};
        },
        handleClick: function(){
          alert("hey");
        },
        render: function(){
          var styles = {width: "100px", height: "100px",
                        backgroundColor: this.state.color };
          return <div style={styles} onClick={this.handleClick}></div>;
        }
      });
      ReactDOM.render(<Box />, document.getElementById('container'));
    </script>

to handle state change, declare handlers as a part of the component

  <script type="text/babel">
  var Box = React.createClass({
    getInitialState: function(){
      return {color: "red"};
    },
    handleClick: function(){
      this.setState({color: "green"});
    },
    render: function(){
      var styles = {width: "100px", height: "100px",
      backgroundColor: this.state.color };
      return <div style={styles} onClick={this.handleClick}></div>;
    }
  });
  ReactDOM.render(<Box />, document.getElementById('container'));
  </script>
ComponentDidMount


only want it to execute once:

...
componentDidMount: function(){
 alert("component did mount");
},
...

timer

<div id="container"></div>
  <script type="text/babel">
  var CurrentDate = React.createClass({
    getInitialState: function(){
      var now = new Date();
      return {date: now.toString()};
    },
    tick: function(){
      var now = new Date();
      this.setState({date: now.toString()});
    },
    componentDidMount: function(){
      setInterval(this.tick, 1000);
    },
    render: function(){
      return <div> {this.state.date}</div>;
    }
  });
  ReactDOM.render(<CurrentDate />, document.getElementById("container"));
  </script>
Events


Browser Event:


click (onclick)
Change (onchange)


SyntheticEvent


React will trigger function when an event happens


Component Event


componentDidMount


componentWillUnmount


stop watch


  <div id="container"></div>

  <script type="text/babel">
  var Watch = React.createClass({
    getInitialState: function(){
      return{seconds: 0};
    },

    tick: function(){
      this.setState({seconds: this.state.seconds+1});
    },

    reset: function(){
      this.setState({seconds: 0});
    },

    start: function(){
      this.interval = setInterval(this.tick, 1000);
    },
    stop: function(){
      clearInterval(this.interval);
    },
    render: function(){
      return <div>
      <p className="time">{this.state.seconds}</p>
      <button className="button" onClick={this.reset}>reset</button>
      <button className="button" onClick={this.start}>start</button>
      <button className="button" onClick={this.stop}>stop</button>
      </div>
    }
  });
  ReactDOM.render(<Watch  />, document.getElementById("container"));
  </script>
Form

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React.js Forms</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/babel">
      var Form = React.createClass({
        getInitialState: function() {
          return {userText: ""};
        },
        upcaseIt: function(){
          var userInput = this.refs.userInput.value;
          this.setState({userText: userInput.toUpperCase()});
        },
        render: function(){
          return <div>
                   <input type="text" ref="userInput" onChange={this.upcaseIt} />
                   <div>{this.state.userText}</div>
                 </div>;
        }
      });
      ReactDOM.render(<Form />, document.getElementById('container'));
    </script>
  </body>
</html>
React with Ajax

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React.js Forms</title>
  <script src="react.js"></script>
  <script src="react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
  <div id="container"></div>

  <script type="text/babel">
  var AwesomeAnswers = React.createClass({
    getInitialState: function(){
      return { questions: []};
    },

    componentDidMount: function(){
      $.ajax({
        url: "http://localhost:3000/questions.json",
        method: "GET",
        error: function(){
          alert("failed to load! People retry.");
        },
        success: function(data){
          this.setState({questions: data.questions});
        }.bind(this)
      });
    },

    questionsDisplay: function(){
      if(this.state.questions.length > 0){
        // return "Question Loaded";
        return this.state.questions.map(function(question, index){
          return <Question title={question.title} key={index} />;
        });
      }
      else{
        return "Loading...";
      }
    },

    render: function(){
      return <div>
      <h1>Welcome to AwesomeAnswers</h1>
      {this.questionsDisplay()}
      </div>;
    }
  });
  var Question = React.createClass({
    render: function(){
      return <div>
      <h2>{this.props.title}</h2>
      <hr />
      </div>;
    }
  });

  ReactDOM.render(<AwesomeAnswers />, document.getElementById("container"));
  </script>
</body>
</html>