2016-05-15

Hello React

Leaning facebook react

react

You can download react starter kit at react Doc. Under this kit folder, you can find two folders:
My React Sample
build folder
This folder contains react framework files, such as react.js, react-dom.js, react.min.js and so on.
examples folder
This folder contains many react start examples. You can practice your react skill by these exsmples.

my react github address

1	git clone git@github.com:oceanpad/react.git

I will write some codes under training folder

1, start react code

With react, you can write html code into javascript code, and it work well. That is so cool.

helloworld.html

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8" />
	<title>Hello React!</title>
	<script src="../build/react.js"></script>
	<script src="../build/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
		<div id="example"></div>
		<script type="text/babel">
			ReactDOM.render(
				<h1>Hello, world!</h1>,
				document.getElementById('example')
			);
		</script>
  </body>
</html>

The XML syntax inside of JavaScript is called JSX.
In order to translate it to vanilla JavaScript we heve to use <\script type=”text/babel”>.
You don’t have to use JSX with React. You can just use plain JS.

2, react Array

You can identify array in script, and react will get all these array cotents.

demo1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Array!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
			var names = ['Tom', 'Jack', 'Ivy']
      ReactDOM.render(
				<div>
					{
						names.map(function(name){
								return <div>How are you, {name}!</div>
							}	
						)
					}
				</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

You will get result like this:

1
2
3

How are you, Tom!
How are you, Jack!
How are you, Ivy!

Also, you can put html contents into your var value, and react will tack them to html result. Like this:

var names2 = [<h1>Good</h1>, <h2>Good</h2>, <h3>Good</h3>]
ReactDOM.render(
	<div>{names2}</div>,
  document.getElementById('example2')
);

3, react component

use React.creatClass to creat a react component.

val NewCom = React.creatClass({
	render: function(){
		.....
	}		
})

NewCom is a component class, first char must be uppter, you can’t write it like this:newCom.

demo2.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React Array!</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
		var NewCom = React.createClass({
			render: function(){
				return <div>Hello, {this.props.name}</div>;
			}
		});

		ReactDOM.render(
			<NewCom name="ocean"/>,
			document.getElementById('example')
		);
    </script>
  </body>
</html>

You will get a result “Hello, oceaan”.

facebook react homepage

4, this.props.children

demo3.html

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

Result:

1 2	1. hello 2. world

5, Prop Validation

demo4.html

PropTypes, you can spectify component’s proptype, like number, int, string, and so on. React Prop Validation

var MyTitle = React.createClass({
	propTypes: {
		title: React.PropTypes.string.isRequired,
	},
	
	render: function() {
		return <h1> {this.props.title} </h1>;
	}
});

var data = "test";
ReactDOM.render(
	<MyTitle title={data} />,
	document.body
);

Result:

test

6, Get real Dom

demo5.html

React’s components is not real Dom, They ate vitrual Dom, But if you want get real Dom, You must use ref Property.(eg. You want get input’s value)

var MyComponent = React.createClass({
	handleClick: function() {
		this.refs.myTextInput.focus();
	},
	render: function() {
		return (
			<div>
				<input type="text" ref="myTextInput" />
				<input type="button" value="Focus the text input" onClick={this.handleClick} />
			</div>
		);
	}
});

ReactDOM.render(
	<MyComponent />,
	document.getElementById('example')
);

Result:
If you click button, input will be focused.

7, component’s state

demo6.html

React’s components has a init state, You can change it’s state by some Action.

var LikeButton = React.createClass({
	getInitialState: function() {
		return {liked: false};
	},
	handleClick: function(event) {
		this.setState({liked: !this.state.liked});
	},
	render: function() {
		var text = this.state.liked ? 'like' : 'haven\'t liked';
		return (
			<p onClick={this.handleClick}>
			You {text} this. Click to toggle.
			</p>
		);
	}
});

ReactDOM.render(
	<LikeButton />,
	document.getElementById('example')
);

Result:
If you click button, input will be focused.

8, Form

demo7.html

Get input’s value by event.target.value

var Input = React.createClass({
	getInitialState: function() {
	return {value: 'Hello!'};
},
handleChange: function(event) {
 this.setState({value: event.target.value});
},
render: function () {
	var value = this.state.value;
	return (
		<div>
    <input type="text" value={value} onChange={this.handleChange} />
    <p>{value}</p>
		</div>
	);
}
});

ReactDOM.render(<Input/>, document.body);

Result:
If you click button, input will be focused.

9, Component Lifecycle

Components have three main parts of their lifecycle:

demo8.html

Mounting: A component is being inserted into the DOM.
Updating: A component is being re-rendered to determine if the DOM should be updated.
Unmounting: A component is being removed from the DOM.
A cycle have to method: will/did.

* componentWillMount()
* componentDidMount()
* componentWillUpdate(object nextProps, object nextState)
* componentDidUpdate(object prevProps, object prevState)
* componentWillUnmount()

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

Ajax

You can use componentDidMount to set ajax method.

demo9.html

var UserGist = React.createClass({
	getInitialState: function() {
	  return {
	    username: '',
	    lastGistUrl: ''
	  };
	},

	componentDidMount: function() {
	  $.get(this.props.source, function(result) {
	    var lastGist = result[0];
	    if (this.isMounted()) {
	      this.setState({
	        username: lastGist.owner.login,
	        lastGistUrl: lastGist.html_url
	      });
	    }
	  }.bind(this));
	},

	render: function() {
	  return (
	    <div>
	      {this.state.username}'s last gist is
	      <a href={this.state.lastGistUrl}>here</a>.
	    </div>
	  );
	}
});

ReactDOM.render(
	<UserGist source="https://api.github.com/users/octocat/gists" />,
	document.body
);

haiyang's blog

Lifelong Learning

Hello React

react

build folder

examples folder

my react github address

1, start react code

helloworld.html

2, react Array

demo1.html

3, react component

demo2.html

4, this.props.children

demo3.html

5, Prop Validation

demo4.html

6, Get real Dom

demo5.html

7, component’s state

demo6.html

8, Form

demo7.html

9, Component Lifecycle

Components have three main parts of their lifecycle:

demo8.html

Ajax

demo9.html