React mini lecture
Download as PPTX, PDF0 likes414 views
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.
React mini lecture
- 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);
- 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
Editor's Notes
- #5: Here we are printing “Hello John” to the screen.
- #6: The “name” attribute of the “HelloMessage” element is set to “John”. We are referring to “John” via “this.props.name”.
- #7: We will build a friend finder. On the left we have the initial view: a list of friends. On the right we typed the letter “j” and got a list of friends whose names start with that letter. Does this remind you of something you’ve seen online? Facebook list of friends?
- #8: Let’s break down the interface into components.
- #9: Let’s start with the most primitive element of the interface: the Friend. Here we are defining a React component for a Friend. The class has one function, render, which returns the html. On line 6, we are inserting the name property which we will be passing into the component.
- #10: Now we are building a list of friends. We create a new React component representing a list of friends. At line 3, we transform a list of friend objects into a list of Friend components, which we are calling `friendNodes`. On line 5 we can see that each friend object has a name property which we pass into the Friend component as a property. At line 10, we return a div containing the list of Friend components.
- #11: Now let’s implement the html form with the text input. Starting at line 12, we build the the form and the text input. At line 15, notice the onChange attribute. We set to this attribute to a function in the same FriendForm component. Line 2 starts the definition of the handleChange function. At line 4, we grab whatever the user typed in the Name field. We trim any extraneous whitespace with the trim function. Notice how we grabbed the name field by the ref attribute. At line 6, we send the name to another function which we will see shortly.
- #12: Here’s the final component that composes together the previous components. You can see on line 12 where we set the onFriendChange property to a function that handles loading the friends from the server.
- #13: The function to load the friends is an ajax request that assigns the data received from the server to the component state. The FriendList component relies on the same component state to draw the list of friends.