This document introduces React, a JavaScript library for building user interfaces. It demonstrates how to build a simple friend finder application with React that allows a user to search for friends. The application uses several React components - FriendForm to add a friend, FriendList to display a list of friends, and FriendBox as the main container. When the form changes, an API call is made to load friends from the server and update the FriendList component.

1. July 5, 2015
Ilia Lobsanov
A gentle introduction

2. Objectives
• Build a user interface by diving into code
• Learn the basics of React

3. What’s React?
• A javascript library for building user interfaces
• Great for single-page applications
• Developed at Facebook/Instagram, open-sourced in
2013
• Used by Khan Academy, New York Times, Airbnb

4. The Basics
1 var HelloMessage = React.createClass({
2 render: function() {
3 return <div>Hello {this.props.name}</div>;
4 }
5 });
6
7 React.render(<HelloMessage name="John" />, mountNode);

5. The Basics
1 var HelloMessage = React.createClass({
2 render: function() {
3 return <div>Hello {this.props.name}</div>;
4 }
5 });
6
7 React.render(<HelloMessage name="John" />, mountNode);

6. The Interface

7. The Interface
FriendForm
FriendList
Friend
FriendBox

8. 1 var Friend = React.createClass({
2 render: function() {
3 return (
4 <div className="friend">
5 <h2 className="name">
6 {this.props.name}
7 </h2>
8 </div>
9 );
10 }
11 });

9. 1 var FriendList = React.createClass({
2 render: function() {
3 var friendNodes = this.props.data.map(function(friend) {
4 return (
5 <Friend name={friend.name}>
6 </Friend>
7 );
8 });
9
10 return (
11 <div className="friendList">
12 {friendNodes}
13 </div>
14 );
15 }
16 });

10. 1 var FriendForm = React.createClass({
2 handleChange: function(e) {
3 e.preventDefault();
4 var name = React.findDOMNode(this.refs.name).value.trim();
5
6 this.props.onFriendChange({
7 name: name
8 });
9 },
10
11 render: function() {
12 return (
13 <form className="friendForm">
14 Name:
15 <input type="text" ref="name" onChange={this.handleChange}/>
16 </form>
17 );
18 }
19 });

11. 1 var FriendBox = React.createClass({
2 loadFriendsFromServer: function(formData) {
3 $.get(this.props.url, formData, function(data) {
4 this.setState({ data: data.friends });
5 }.bind(this));
6 },
7
8 render: function() {
9 return (
10 <div className="friendBox">
11 <h1>Friend Finder</h1>
12 <FriendForm onFriendChange={this.loadFriendsFromServer} />
13 <FriendList data={this.state.data} />
14 </div>
15 );
16 }
17 });

12. 1 var FriendBox = React.createClass({
2 loadFriendsFromServer: function(formData) {
3 $.get(this.props.url, formData, function(data) {
4 this.setState({ data: data.friends });
5 }.bind(this));
6 },
7
8 render: function() {
9 return (
10 <div className="friendBox">
11 <h1>Friend Finder</h1>
12 <FriendForm onFriendChange={this.loadFriendsFromServer} />
13 <FriendList data={this.state.data} />
14 </div>
15 );
16 }
17 });

13. More Info
• The app: http://friend-finder-react.herokuapp.com/
• Source Code: https://github.com/nurey/friend-finder