Slides from the Philly .net Hands on Labs on React.js

1. React Basics
Bill Wolff
phillydotnet.org, inc.

2. philly.NET labs
• Been doing this for 10 years
• Room gets crowded, arrive early and bring extension cords
• We are not React experts but know enough to get you started
• We are working on live streaming all labs, please be patient!
• Bandwidth is limited at times, keep off the network if possible
• Download key code before you arrive
• This is a community event, please help the person next to you

3. React Lab Series
• November 8
• React intro, tooling, components, JSX syntax, props, state, lifecycle
• December 6
• React routing, styles, server side render, testing
• January 3
• React flux architecture with Redux and RxJS observables
• February 7
• Make the same simple app in Angular, React, and Vue
• December 20
• Monthly meeting compares Angular, React, and Vue

4. React
• Maintained by Facebook and Instagram
• Created by Jordan Walke for internal projects
• Initial open source March 2013
• Currently version 16.0.0 as of Sep 2017
• React Native enables phone apps since March 2015
• React Fiber was introduced in 2017

5. License Controversy
• May 2013 Apache 2.0
• BSD restrictive license followed
• April 2015 updated patent grant
• September 2017 MIT License

6. Virtual DOM
• Virtual Document Object Model
• In-memory data structure
• React does diff with real DOM and efficiently applies changes

7. Components
• Implemented as a JavaScript ES6 class
• Extends React.Component
• Render method is required
• JSX is often used in render but not required
• Accept props
• Can maintain state
• ReactDOM.render method creates a DOM instance of a component

8. JSX
• JavaScript extension syntax
• Nested elements must be wrapped in a single parent
• 16.0.0 allows arrays of elements -> fragments or strings
• Custom attributes require the data- prefix
• Expressions are wrapped in curlies {}
• If/else are not supported but conditional expressions are

9. One way data flow
• Properties are immutable values passed to render method
• Components should not modify props
• “Properties flow down, actions flow up”
• This architecture is referred to as Flux
• Redux is a popular implementation and will be covered in the January lab

10. Tooling
• Visual Studio Code
• Node.js with NPM for package management
• Babel and TypeScript transpilers
• Webpack for bundling
• create-react-app for scaffolding

11. Visual Studio Terminal
• Use terminal mode to run node commands
• Ctrl-`
• Open as many as needed
• Check versions
• node –v
• npm –v
• npm i create-react-app -g
• create-react-app --help
• create-react-app --version

12. create-react-app
• Depends on react-scripts
• Make an ES6 app
• create-react-app react-app
• Review the file structure and package.json
• Make a TypeScript app
• create-react-app react-app-ts --scripts-version=react-scripts-ts
• Review the file structure and package.json
• /public
• /src
• /node_modules

13. Test and Build Your Apps
• cd react-app
• npm start
• Use your browser at localhost:3000
• code .
• Opens a new editor for this project folder
• npm run build
• Makes /build folder
• npm install –g serve
• serve –s build

14. Minimal App
• Remove all files except app.js and index.js
• index.html
• Defines a root element
• index.js
• Renders the App component in the root element
• app.js
• Imports react
• Defines the component class and constructor
• Provides a render method (can use short form stateless function syntax)

15. index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);

16. app.js – stateless function
import React from 'react';
const App = () => <h1>Go Eagles!</h1>
export default App;

17. app.js – JSX syntax
import React from 'react';
class App extends React.Component {
render() {
return <h1>Go Eagles!</h1>
}
}
export default App;

18. app.js – ES6 syntax
import React from 'react';
class App extends React.Component {
render() {
return React.createElement('h1', null, 'Eagles!’)
}
}
export default App;

19. app.js – single wrapper element
class App extends React.Component {
render() {
return (
<div>
<h1>Go Eagles!</h1>
<h3>beat Dallas</h3>
</div>
);
}
}

20. Properties
• How static data is passed between components
• propTypes
• Object with keys that define parameter signature
• defaultProps
• Object with keys for default values

21. app.js – propTypes and defaultTypes
import PropTypes from 'prop-types';
App.propTypes = {
message: PropTypes.string.isRequired,
scoreEagles: PropTypes.number,
scoreCowboys: PropTypes.number
}
App.defaultProps = {
message: "Fly EAGLES Fly"
}

22. app.js – consuming props
class App extends React.Component {
render() {
let message = this.props.message
return (
<div>
<h1>{message}</h1>
Eagles: {this.props.scoreEagles} - Cowboys:
{this.props.scoreCowboys}
</div>
)
}
}

23. index.js – sending props
ReactDOM.render(
<App scoreEagles={30} scoreCowboys={17} />,
document.getElementById('root')
);

24. State
• Properties that will change value
• Call super() in constructor to create context
• Define state object with default values
• Typical to use update() method to change state
• Later we will use lifecycle events to fetch external data to state

25. App.js – State constructor
constructor(){
super();
this.state = {
message: 'fly eagles fly’,
scoreEagles: 28,
scoreCowboys: 14
}
}

26. App.js – State update
update(e){
this.setState({message: e.target.value})
}

27. App.js – State render
render(){
return (
<div>
<input type="text“
onChange={this.update.bind(this)} />
<h1>{this.state.message}</h1>
<h3>Eagles: {this.state.scoreEagles}
- Cowboys: {this.state.scoreCowboys}</h3>
</div>
)
}

28. App.js – Child component constructor
constructor(){
super();
this.state = {
message: 'Cowboys’
}
}

29. App.js – Child component update
update(e){
this.setState({message: e.target.value})
}

30. App.js – Child component render
render(){
return (
<div>
<h1>Who you gonna beat?<br/>
{this.state.message}</h1>
<Cheer update={this.update.bind(this)} /><br/>
<Cheer update={this.update.bind(this)} /><br/>
<Cheer update={this.update.bind(this)} />
</div>
)
}

31. App.js – Child component
const Cheer = (props) =>
<input type="text" onChange={props.update}/>

32. App.js – Nested children render
class App extends React.Component {
render(){
return <Button>I <Heart /> the Eagles</Button>
}
}

33. App.js – Nested child components
const Button = (props) =>
<button>{props.children}</button>
class Heart extends React.Component {
render(){
return <span>&hearts;</span>
}
}

34. App.js – Synthetic Event constructor
constructor(){
super();
this.state = {currentEvent: '---’}
this.update = this.update.bind(this)
}
update(e){
this.setState({currentEvent: e.type})
}

35. render(){
return (
<div>
<textarea
onKeyPress={this.update}
onCopy={this.update}
onCut={this.update}
onPaste={this.update}
onFocus={this.update}
onBlur={this.update}
onDoubleClick={this.update}
onTouchStart={this.update}
onTouchMove={this.update}
onTouchEnd={this.update}
cols="30"
rows="10" />
<h1>{this.state.currentEvent}</h1>
</div>
)
}

36. App.js – Refs constructor
constructor(){
super();
this.state = {a: '', b: ''}
}
update(){
this.setState({
a: this.a.refs.input.value,
b: this.refs.b.value
})
}

37. App.js – Refs render
render(){
return (
<div>
<Input
ref={ component => this.a = component}
update={this.update.bind(this)}
/> {this.state.a}
<hr />
<input
ref="b"
type="text"
onChange={this.update.bind(this)}
/> {this.state.b}
</div>
)
}

38. App.js – Refs child component
class Input extends React.Component {
render(){
return <div><input ref="input" type="text“
onChange={this.props.update}/></div>
}
}

39. Component Lifecycle
• componentWillMount
• componentDidMount
• componentWillUnmount

40. constructor() {
super();
this.state = {val: 0}
this.update = this.update.bind(this)
}
update(){
this.setState({val: this.state.val + 1})
}
componentWillMount(){
console.log('componentWillMount’)
this.setState({m: 2})
}

41. render(){
console.log('render’);
return <button onClick={this.update}>
{this.state.val * this.state.m}
</button>
}
componentDidMount() {
console.log('componentDidMount’);
console.log(ReactDOM.findDOMNode(this));
}
// componentDidMount(){
// console.log('componentDidMount');
// this.inc = setInterval(this.update,500)
// }
// componentWillUnmount(){
// console.log('componentWillUnmount')
// clearInterval(this.inc);
// }

42. Property and State Lifecycle
• componentWillReceiveProps
• shouldComponentUpdate
• componentDidUpdate

43. constructor(){
super();
this.state = {increasing: false}
}
update(){
ReactDOM.render(
<App val={this.props.val + 1} />,
document.getElementById('root’))
}
componentWillReceiveProps(nextProps){
this.setState({increasing: nextProps.val > this.props.val})
}
shouldComponentUpdate(nextProps, nextState) {
return nextProps.val % 5 === 0;
}

44. render(){
console.log(this.state.increasing)
return (
<button onClick={this.update.bind(this)}>
{this.props.val}
</button>
)
}
componentDidUpdate(prevProps, prevState) {
console.log(`prevProps: ${prevProps.val}`)
}

45. App.js – Map data constructor
constructor(){
super();
this.state = {items: []}
}
componentWillMount(){
fetch( 'https://swapi.co/api/people/?format=json’ )
.then( response => response.json() )
.then( ({results: items}) => this.setState({items}))
}
filter(e){
this.setState({filter: e.target.value})
}

46. App.js – Map data render
render(){
let items = this.state.items;
if(this.state.filter){
items = items.filter( item =>
item.name.toLowerCase()
.includes(this.state.filter.toLowerCase()))
}
return (
<div>
<input type="text"
onChange={this.filter.bind(this)}/>
{items.map(item =>
<Person key={item.name} person={item} />)}
</div>
)
}

47. App.js – Map data child component
const Person = (props) =>
<h4>{props.person.name}</h4>