1. Web Programming Anselm Spoerri PhD (MIT) SC&I @ Rutgers University
Info + Web Tech Course
Web Programming
Anselm Spoerri PhD (MIT)
Rutgers University

2. Quiz 4 – React.js Due Mar 31 (moved from Mar 17)
Lecture 9 - Overview
Recap – React.js
Ex4 Lab Due Mar 31
Quiz 4 – React.js Due Mar 31 (moved from Mar 17)
What to Do BEFORE Next Class
Videos in Week 10 (in green)

3. Recap – React.js
Library for Creating Interfaces Focus on the View Virtual DOM = JS Object: efficiently update & render components when data changes Components and subcomponents  nested structure (like HTML) One-way Data Flow States store what is happening in application and react to changes in state or data Props used to pass information between main component and subcomponents JSX = JavaScript as XML – write HTML tags inside JavaScript Combine the best parts of JavaScript with HTML tags JSX needs to be converted to regular JavaScript

4. Recap – React.js React = Components = UI element with changing data
ES6 Class Component
class MyComp extends React.Component { render () { HTML }}
ReactDOM.render(<MyComp />, where in DOM))
Always start component names with capital letter
render method for component
Fairly simple nested JSX with {JS statement}
Use external variable inline style = JS object
CSS class  className
background-color  backgroundColor
ReactDOM – render elements in the actual DOM
render(ReactElement, DOMElement)
ReactDOM.render(<MyComponent />, document.getElementById("react-container"))

5. Recap – React.js – Properties and State
Class component: this.props contains props defined by caller of this component
{this.props.text} inside JSX <MyComp text="Hello World"/>
{this.props.children} inside JSX <MyComp text="Hi">World</myComp>
 Props used to pass information between main component and subcomponents
Define state that can be queried and changed
constructor(props) {
super(props) //  access this.props in constructor
this.state = { checked: false } // define state checked
this.handleCheck = this.handleCheck.bind(this) // keep this in scope }
handleCheck () { this.setState({ checked: !this.state.checked })}
Note: if we want to use this.props inside of return () then need to work using vars
States store what is happening in application and react to state / data changes
constructor(props) { super(props) this.state = { x: y } this.funcZ = this.funcZ.bind(this)

6. Recap – React.js – Parent / Children
Refs store & access actual value of user input component
<textarea ref={input => this._newText = input}/>
this._newText.value or
<textarea ref="newText"></textarea>
this.refs.newText.value
Parent / Children Relationships – Create Subcomponents
Create Main / Parent component: var Board = React Component
this.state = { notes: array with content to add to subcomponents}
render() { return (<div className='board'>
{ this.state.notes.map(this.eachNote) }
</div>) }
Nest inside of board div a series of Note components with property key

7. Recap – map / filter function and arrow (=>) function
array.map()
creates new array with results of calling function for every array element
array.filter()
creates new array filled with array elements that pass test (provided as function)
arrow function
shorter syntax than a function expression and does not bind its own this, arguments, super, or new.target. 
var materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ];
var materialsLength1 = materials.map(function(material) { return material.length; });
var materialsLength2 = materials.map((material) => { return material.length; });
var materialsLength3 = materials.map(material => material.length);

8. Recap – React.js – Update Children
Update Children constructor(props) for Parent Component = array of objects {id: 0, note: 'Call Bob'} Create update method use ... as a "spread" operator to pass whole props object (all of its properties) update(newText, id) { this.setState(prevState => ({ notes: prevState.notes.map( note => (note.id !== i) ? note : {...note, note: newText} ) })) <Note key={i} index={i} onChange={this.update}> {note.note} </Note> save method for Note component needs to updated this.props.onChange(this._newText.value, this.props.index) // passed to update func

9. Recap – React.js – Remove Children
Remove Children Create remove method: only keep notes don’t have id remove(id) { this.setState(prevState => ({ notes: prevState.notes.filter(note => note.id !== id) })) <Note key={ note.id} id={note.id} onChange={this.update} onRemove={this.remove}> {note.note} </Note> remove method for Note component needs to be updated this.props.onRemove(this.props.index)

10. Recap – React.js – Add Children
Add Children this.state = { notes = [] } add(text){ this.setState(prevState => ({ notes: [ ...prevState.notes, { id: this.nextId(), note: text}] })) Need to add button to Board render() { return (<div className='board'> {this.state.notes.map(this.eachNote)} <button onClick={this.add.bind(null, "New Note")}>+</button> </div>) } <style> div.note {position: relative / absolute;} </style>

11. React.js – Component Lifecycle
Hooks for Creation, Lifetime and Teardown
Mounting
componentWillMount // load data or do things before DOM renders 1st time
render
componentDidMount
Updating
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

12. Ex4 React.js – Create React App using Node.js
Housekeeping
In bulletin-board folder, select src folder
Use: files from Exercise Files > Ch05 > 05_03> completed> bulletin-board > src
Open Command Prompt: cd into the bulletin-board folder and npm start
Fixed Bug in Week 8
Can’t remove all the notes (hint: what does index represent; role of id)
Rename Functions
CSS: div#react-container vs div#root
Board: add  addNote | … | nextID  nextNoteID | … etc
Note: edit  editNote | remove  removeNote | save  saveNote
Board / Note: onRemove  onRemoveNote | onChange  onChangeNote
Ex4 Overview
Change note appearance when click on “Done”
Add comments to a note Remove comments from a note
 Study code used to add and remove notes from board

13. Ex4 – React.js: Position + Button and Control Note Appearance
Place + Button in top / right corner
id="addNote" and position: fixed; top: 10px; right: 10px;
Control Note Appearance via “done” checkbox
Add checkbox in Note
<input type="checkbox" onChange={this.handleCheckbox} defaultChecked={this.state.checked}/>
handleCheckbox function
calls setState to update checked state
Want to change note appearance
div className="note" style={this.style}>
noteAppearance function: use noteBG to specify style obj to return
renderDisplay: use … spread operator to create style obj
var styleToUse = { ...this.noteAppearance()}
<div className="note" style={styleToUse}>

14. Ex4 – React.js: Add Comment to Note
Note component Add Comment placeholder below Note and style it Add “Add Comment” button in Note Specify onClick and addComment function onClick={this.addComment.bind(null, "Comment")} Add comments array as state of Note Create Comment component Create object with id and comment properties nextCommentId function Specify render function Add Comment component to Note eachComment function: create JSX for NoteComment {this.state.comments.map(this.eachComment)}

15. Ex4 – React.js: Remove Comment from to Note
Add Delete button to Comment component
<button onClick={this.removeComment}>X</button>
Specify removeComment function:
this.props.onRemoveComment (this.props.index)
Specify onRemoveComment (index)
this.state.comments.filter(comment => comment.id !== index)
Need to update state of comments array
Comment.remove calls
Comment.props.onRemoveComment(index) which calls
In Note component via <Comment onRemoveComment>
removeComment function