… (spread) operator
explained, 74
limitations of, 76
transferring properties with, 75–76
<> (two arrows) tag, 83
accessing
DOM elements
ES6 arrow functions, 143
properties, 33
action creators, 244
actions
action creators, 244
defined, 240
FavoriteColors app, 244
Redux console-driven app, 244
active links, highlighting, 235–236
addColor function, 244
addEventListener function, 118–119
addresses (IP)
fetching from web services, 169–172
Ajax, 167
Animaniacs Good Idea/Bad Idea sketches, 35
animations, 194
APIs (application programming interfaces), 8–10
App.js file
ReduxCounter app, 263
application programming interfaces (APIs), 8–10
application state
storing, 239
apps. See also components
catalog browser
SPA (single-page app) model, 3–6
creating with React Router
active links, highlighting, 235–236
CSS (Cascading Style Sheets), 233–236
Home component, 228
Main component, 227
NavLink component, 231
render method, 228
Stuff component, 229
FavoriteColors Redux, 243
actions, 244
favoriteColors.html file, 243–244
first React
blank HTML page, creating, 16–17
HelloWorld
HelloWorld.css file, 160
IP Address
creating, 168
index.css file, 169
index.html file, 168
IPAddressContainer component, 169–172
ReduxCounter, 256
App.js file, 263
connect function, 264
Counter.js file, 265
creating, 259
decreaseCount function, 264
increaseCount function, 264
index.html file, 260
mapDispatchToProps function, 264
mapStateToProps function, 263–264
overlay of Redux and React, 257–259
Provider component, 261
Redux library installation, 259–260
sliding menu
CSS (Cascading Style Sheets), 199–201
example of, 197
index.css file, 203
index.js file, 203
MenuContainer.js file, 203
online tutorial, 197
state
storing, 239
Todo List
animations, 194
CSS (Cascading Style Sheets), 189–190
index.css file, 180
render method, 183–184, 186–187, 194
architecture (MVC), 12
arrays
filteredItems, 193
arrows (<>) tag, 83
Asynchronous JavaScript and XML (Ajax), 167
automatic UI state management, 7
Babel, 152, 162. See also Create React project
referencing, 16
transpilation from JSX to JavaScript, 80–81
babel.min.js script, 149
background color, customizing, 45–46
backgroundColor property (letterStyle object), 45
behavior property (Buttonify component), 35
bgcolor attribute (letterStyle object), 45
bind method, 119
blank HTML pages, creating, 16–17
browser compatibility, 120
button counter
event listening
lifecycle methods
componentDidMount, 129
componentDidUpdate, 131
componentWillMount, 129
componentWillReceiveProps, 132
componentWillUnmount, 132
componentWillUpdate, 131
default state, 129
getDefaultProps, 128
initial rendering phase, 128
shouldComponentUpdate, 131
unmounting phase, 132
updating phase, 130
buttons. See also button counter
calling functions, 25
capitalization (JSX), 85
catalog browser app
SPA (single-page app) model, 3–6
cd helloworld command, 153
child components
transferring properties to
component hierarchy and, 65–69
Circle component
render method, 102
Clark, Andrew, 242
class syntax, 29. See also components
CleverComponent, 34
color of background, customizing, 45–46
color palette card
component identification, 51–54
properties, passing to child components, 61–63
visual element identification, 49–51
Colorizer component
website, 136
commands
cd helloworld, 153
create-react-app, 153, 154, 202, 213, 225, 259
createStore, 261
export command, 157
component hierarchy, 50, 53–54, 65–66, 249–255
component updates, overriding, 218–220
componentDidMount method
IP Address app, 170
LightningCounterDisplay, 90, 92–93, 96
componentDidUpdate method, 131
components. See also methods
capitalization of, 85
Circle
render method, 102
class syntax for, 29
CleverComponent, 34
color palette card
component identification, 51–54
properties, passing to child components, 61–63
visual element identification, 49–51
Colorizer
website, 136
composability of. See also color palette card
defined, 47
container, 175
controlled, 195
CounterParent
creating
component identification, 51–54
visual element identification, 49–51
HelloWorld
hierarchy of, 50, 53–54, 65–66, 249–255
HOCs (Higher Order Components), 259
Home, 228
Label, 73
LightningCounterDisplay
componentDidMount method, 90, 92–93, 96
initial state value, setting, 91–92
setInterval function, 90
state change, rendering, 95
Main, 227
MenuContainer.js file, 203
render method, 207–208, 216–218
shouldComponentUpdate method, 218–220
multiple components, displaying, 103–105
NavLink, 231
presentational, 175
Provider, 261
sliding menu
CSS (Cascading Style Sheets), 199–201
index.css file, 203
index.js file, 203
MenuContainer.js file, 203
Stuff, 229
styling with React
customizable background color, 45–46
overview, 42
TodoList
animations, 194
CSS (Cascading Style Sheets), 189–190
index.css file, 180
render method, 183–184, 186–187, 194
uncontrolled, 195
componentWillMount method, 129
componentWillReceiveProps method, 132
componentWillUnmount method, 119, 132
componentWillUpdate method, 131
composability of components
color palette card example
component identification, 51–54
properties, passing to child components, 61–63
visual element identification, 49–51
defined, 47
configuring development environment
Create React project
advantages of, 152
creating projects with, 152–154
project file and folder structure, 154–157
development mode, 161
HelloWorld app
HelloWorld.css file, 160
Node, installing, 152
connect function, 264
console warnings, 105
console-driven app (Redux), 243
actions, 244
favoriteColors.html file, 243–244
console.log statements, 216–218
Contact component (SPA), 229–230
container components, 175
container elements, 19–20, 143–144
content pages (single-page app), 228–230
controlled components, 195
Counter app (Redux), 256
App.js file, 263
connect function, 264
Counter.js file, 265
creating, 259
decreaseCount function, 264
increaseCount function, 264
index.html file, 260
mapDispatchToProps function, 264
mapStateToProps function, 263–264
overlay of Redux and React, 257–259
Provider component, 261
Redux library installation, 259–260
Counter.js file, 265
CounterParent component
counters. See also button counter
LightningCounterDisplay
componentDidMount method, 90, 92–93, 96
initial state value, setting, 91–92
setInterval function, 90
state change, rendering, 95
Redux Counter, 256
App.js file, 263
connect function, 264
Counter.js file, 265
creating, 259
decreaseCount function, 264
increaseCount function, 264
index.html file, 260
mapDispatchToProps function, 264
mapStateToProps function, 263–264
overlay of Redux and React, 257–259
Provider component, 261
Redux library installation, 259–260
Create React project
advantages of, 152
creating projects with, 152–154
HelloWorld app
HelloWorld.css file, 160
project file and folder structure, 154–157
createPortal method, 146
create-react-app command, 153, 154, 202, 213, 225, 259
Creating a Smooth Sliding Menu tutorial, 197
CSS (Cascading Style Sheets)
HelloWorld app
HelloWorld.css file, 160
IP Address app, 169
index.css file, 203
SPA (single-page app), 233–236
styling React content with, 40–42
TodoList component, 180, 189–190
curly brackets ({ }), 33, 81, 84–85
custom background color, 45–46
decreaseCount function, 264
deep links, 224
delete function, 191
design
SPA (single-page app) model, 3–6
destination variable, 20
development environment
Create React project
advantages of, 152
creating projects with, 152–154
project file and folder structure, 154–157
development mode, 161
HelloWorld app
HelloWorld.css file, 160
Node, installing, 152
development mode, 161
dispatch method, 247
div element
document.body argument (render method), 19
DOM elements, accessing
ES6 arrow functions, 143
elements
capitalization in JSX, 85
div
DOM elements, accessing
ES6 arrow functions, 143
multiple elements, returning, 82–83
script, 244
transferring properties with, 141–142
UI elements, inefficiencies with, 26–28
ellipses (…) operator
explained, 74
limitations of, 76
transferring properties with, 75–76
EmberJS templates, 10
Erikson, Mark, 247
errors in ranges, 105
evaluating expressions, 81
event handlers
events
browser compatibility, 120
button counter
defined, 107
event handlers
KeyboardEvent type, 112
listening to
MouseEvent type, 112
properties, 112
readystatechange, 167
export command, 157
expressions, evaluating, 81
extending PureComponent, 220–221
IP Address app
creating, 168
index.css file, 169
index.html file, 168
IPAddressContainer component, 169–172
web request processing, 166–167
FavoriteColors app, 243
actions, 244
favoriteColors.html file, 243–244
favoriteColors function, 245–246
favoriteColors.html file, 243–244
files. See also components
HelloWorld app
HelloWorld.css file, 160
IP Address app
index.css file, 169
index.html, 168
IPAddressContainer.js, 169–172
Redux console-driven app
actions, 244
ReduxCounter app
App.js, 263
Counter.js, 265
index.html, 260
sliding menu
index.css, 203
index.js, 203
MenuContainer.js, 203
Menu.js, 208
SPA (single-page app)
Home.js, 228
index.html file, 226
Main.js, 227
Stuff.js, 229
Todo List app
index.css, 180
TodoItems.js, 187
TodoList.js, 181
filter method, 192
filteredItems array, 193
first React app
blank HTML page, creating, 16–17
Flip Move library, 194
folders
node_modules, 194
react_spa, 226
formatDistance function, 25
functions. See also methods
addColor, 244
calling, 25
connect, 264
decreaseCount, 264
delete, 191
filter, 192
formatDistance, 25
getDistance, 25
increaseCount, 264
mapDispatchToProps, 264
printStuff, 74
removeColor, 244
removeEventListener, 119
generated HTML
getDefaultProps method, 128
getState method, 247
greetTarget attribute (HelloWorld component), 33–34
heading variable, 146
HelloWorld app
HelloWorld.css file, 160
HelloWorld component
component definition, 33
HelloWorld.css file, 160
hierarchy, component, 50, 53–54, 65–66, 249–255
highlighting active links, 235–236
HOCs (Higher Order Components), 259
Home component (SPA), 228
HTML elements, capitalization in JSX, 85
HTTP protocol, 166
identifying
import statement
SPA (single-page app), 230, 234
importing libraries, 156
increase function, 111–112, 116
increaseCount function, 264
incrementing state value, 94
index.css file
IP Address app, 169
sliding menu, 203
SPA (single-page app), 233–234
Todo List app, 180
index.html file
IP Address app, 168
ReduxCounter app, 260
SPA (single-page app), 226
index.js file
sliding menu, 203
SPA (single-page app), 226, 234
initial rendering phase (lifecycle methods), 128
inline styles
Circle component, 102
customizable background color, 45–46
overview, 42
_input property, 142
installing
Node, 152
React Router, 226
Introduction to CSS Transitions, 200
IP addresses
fetching from web services, 169–172
ip_address state variable, 175
IPAddressContainer component, 169–172
IPAddress.js file, 174
items (Todo list)
JavaScript. See also components; functions; React Router
JSX-to-JavaScript transformation, 79–81
XMLHttpRequest object, 167
JSX
capitalization, 85
CSS (Cascading Style Sheets) and, 83–84
expressions, evaluating, 81
first React app
blank HTML page, creating, 16–17
JSX-to-JavaScript transformation, 79–81
location in code, 86
multiple elements, returning, 82–83
key attribute, 82
KeyboardEvent type, 112
keywords. See commands; methods; statements
Letter component
styling with React
customizable background color, 45–46
letterStyle object, creating, 42–43
overview, 42
letterStyle object
customizable background color, 45–46
overview, 84
libraries. See also React Router
Flip Move, 194
importing, 156
Redux library installation, 259–260
lifecycle methods
button counter example, 124–127
componentDidMount, 129
IP Address app, 170
LightningCounterDisplay, 90, 92–93, 96
componentDidUpdate, 131
componentWillMount, 129
componentWillReceiveProps, 132
componentWillUnmount, 119, 132
componentWillUpdate, 131
default state, 129
defined, 123
getDefaultProps, 128
initial rendering phase, 128
render
Buttonify component, 34
Card component, 57
HelloWorld app, 156
initial rendering phase, 129
IPAddressContainer component, 171–172
LightningCounterDisplay component, 90
renderData evaluated in, 105–106
SPA (single-page app) example, 228
Square component, 58
updating phase, 131
shouldComponentUpdate, 131
unmounting phase, 132
updating phase
prop changes, 132
LightningCounterDisplay component
componentDidMount method, 90
initial state value, setting, 91–92
setInterval function, 90
setState method, 90
state change, rendering, 95
links
active links, highlighting, 235–236
deep links, 224
listening to events
listItems variable, 188
lists. See TodoList component
log method, 247
Main component (SPA), 227
mapDispatchToProps function, 264
mapStateToProps function, 263–264
Matryoshka dolls analogy, 9–10
MenuContainer component, 201–202, 215
MenuContainer.js file, 203
render method, 207–208, 216–218
shouldComponentUpdate method, 218–220
MenuContainer.js file, 203
Menu.js file, 208
menus, sliding. See sliding menu
messages, console warnings, 105
methods
bind, 119
button counter example, 124–127
componentDidMount
IP Address app, 170
LightningCounterDisplay, 90, 92–93, 96
componentDidUpdate, 131
componentWillMount, 129
componentWillReceiveProps, 132
componentWillUnmount, 119, 132
componentWillUpdate, 131
createPortal, 146
createStore, 247
defined, 123
dispatch, 247
getDefaultProps, 128
getDistance, 32
getState, 247
initial rendering phase, 128
log, 247
processRequest, 171
render
button counter, 129
Buttonify component, 34
Card component, 57
HelloWorld app, 156
initial rendering phase, 129
IPAddressContainer component, 171–172
LightningCounterDisplay component, 90
renderData evaluated in, 105–106
SPA (single-page app) example, 228
Square component, 58
updating phase, 131
setInterval, 90
setNewColor, 142
shouldComponentUpdate, 131, 218–220
subscribe, 248
timerTick, 95
toggleMenu, 205
translate3d, 200
unmountComponentAtNode, 131
unmounting phase, 132
updating phase, 130
MouseEvent type, 112
multiple components, displaying, 103–105
multiple elements, returning, 82–83
MVC architecture, 12
NavLink component, 231
Node, installing, 152. See also Create React project
node_modules folder, 194
npm install command, 152, 259, 260
npm start command, 153, 204, 227
objects. See also components
letterStyle
customizable background color, 45–46
overview, 84
XMLHttpRequest, 167
onClick event handler, 110–112
online resources, Using Classes in JavaScript tutorial, 29
operators, spread (…)
explained, 74
limitations of, 76
transferring properties with, 75–76
optimizing render method
component updates, overriding, 218–220
console.log statements, 216–218
overriding component updates, 218–220
passing properties
color palette card example, 61–63
component hierarchy and, 65–69
spread operator (…)
explained, 74
limitations of, 76
performance, events and, 120–121
predictability of application state, 242–243
presentational components, 175
preventDefault function, 185–186
printStuff function, 74
processRequest method, 171
production builds, creating, 161–162
properties
accessing, 33
event properties, 112, 114–115
component definition, 33
letterStyle object
backgroundColor, 45
bgcolor, 45
prop changes, 132
specifying
component definition, 33
transferring
color palette card example, 61–63
component hierarchy and, 65–69
protocols, HTTP, 166
Provider component, 261
React Developer Tools add-on, 216
React Event System document, 114
React library, importing, 156
React Router
creating SPAs (single-page apps) with
active links, highlighting, 235–236
CSS (Cascading Style Sheets), 233–236
Home component, 228
Main component, 227
NavLink component, 231
render method, 228
Stuff component, 229
installing, 226
react_spa folder, 226
react.development.js script, 149
React-DOM library, importing, 156
react-dom.development.js script, 149
readystatechange event, 167
reconciliation, 8
reducers
cautions, 246
defined, 240
Redux console-driven app, 245–247
building apps with, 243
actions, 244
Counter app, 256
App.js file, 263
connect function, 264
Counter.js file, 265
creating, 259
decreaseCount function, 264
increaseCount function, 264
index.html file, 260
mapDispatchToProps function, 264
mapStateToProps function, 263–264
overlay of Redux and React, 257–259
Provider component, 261
Redux library installation, 259–260
FavoriteColors app, 243
actions, 244
favoriteColors.html file, 243–244
overlay of Redux and React, 257–259
predictability of application state in, 242–243
state management with, 256
ReduxCounter app, 256
App.js file, 263
connect function, 264
Counter.js file, 265
creating, 259
decreaseCount function, 264
increaseCount function, 264
index.html file, 260
mapDispatchToProps function, 264
mapStateToProps function, 263–264
overlay of Redux and React, 257–259
Provider component, 261
Redux library installation, 259–260
referencing
Babel JavaScript compiler, 16
React library, 16
registerServiceWorker script, 156
regular DOM events, listening to, 118–119
remote services, data from, 163–166
React app
creating, 168
index.css file, 169
index.html file, 168
IPAddressContainer component, 169–172
web request processing, 166–167
removeColor function, 244
removeEventListener function, 119
removing items from Todo list, 191–193
render method
Buttonify component, 34
Card component, 57
HelloWorld app, 156
initial rendering phase, 129
IPAddressContainer component, 171–172
LightningCounterDisplay component, 90
MenuContainer component, 207–208
component updates, overriding, 218–220
console.log statements, 216–218
renderData evaluated in, 105–106
SPA (single-page app) example, 228
Square component, 58
updating phase, 131
renderData array, 104
rendering state change, 95
requestAnimationFrame, 194
resources, Using Classes in JavaScript tutorial, 29
return statement, 33
ColorLabel component, 145
sliding menu, 208
Todo List app, 191
returning multiple elements, 82–83
routing, 224
routing regions, defining, 230–231
Russian Matryoshka dolls analogy, 9–10
script element, 244
seeing render method calls, 216–218
setInterval function, 90
setNewColor method, 142
shiftKey property (SyntheticEvent), 114–115
shouldComponentUpdate method, 131, 218–220
simple catalog browser app
SPA (single-page app) model, 3–6
sliding menu
CSS (Cascading Style Sheets), 199–201
example of, 197
index.css file, 203
index.js file, 203
MenuButton.js, 221
MenuContainer.js file, 203
online tutorial, 197
SPA (single-page app)
creating with React Router
active links, highlighting, 235–236
CSS (Cascading Style Sheets), 233–236
Home component, 228
Main component, 227
NavLink component, 231
render method, 228
Stuff component, 229
specifying properties
component definition, 33
spread operator (…)
explained, 74
limitations of, 76
transferring properties with, 75–76
state change, rendering, 95
state management
application state
storing, 239
LightningCounterDisplay
componentDidMount method, 90, 92–93, 96
initial state value, setting, 91–92
setInterval function, 90
LightningCounterDisplay component
setInterval function, 90
state change, rendering, 95
managing React state with, 256
overlay of Redux and React, 257–259
predictability of application state in, 242–243
state value, incrementing, 94
UI (user interface), 7
state object (Todo List app), 184
state value, incrementing, 94
statements
import
SPA (single-page app), 230, 234
return, 33
ColorLabel component, 145
sliding menu, 208
Todo List app, 191
Store (Redux)
creating, 247
defined, 239
Redux console-driven app, 247–248
storing application state, 239
Stuff component (SPA), 229
styles
CSS (Cascading Style Sheets)
IP Address app, 169
SPA (single-page app), 233–236
styling React content with, 40–42
TodoList component, 180, 189–190
inline approach
Circle component, 102
customizable background color, 45–46
overview, 42
overview, 37
subscribe method, 248
swatchComponent variable, 86
templates
EmberJS templates, 10
this.props property, 33
TodoItems.js file, 187
TodoList component
animations, 194
CSS (Cascading Style Sheets), 189–190
index.css file, 180
render method, 183–184, 186–187, 194
TodoItems.js file, 187
TodoList.js file, 181
TodoList.js file, 181
toggleMenu method, 205
transferring properties
color palette card example, 61–63
component hierarchy and, 65–69
spread operator (…)
explained, 74
limitations of, 76
translate3d method, 200
transpilation from JSX to JavaScript, 79–81
UI (user interface)
Circle component example
render method, 102
sliding menu
CSS (Cascading Style Sheets), 199–201
example of, 197
index.css file, 203
index.js file, 203
MenuContainer.js file, 203
online tutorial, 197
state management, 7
uncontrolled components, 195
unmountComponentAtNode method, 131
unmounting phase (lifecycle methods), 132
unnecessary renders, avoiding
component updates, overriding, 218–220
console.log statements, 216–218
updating phase (lifecycle methods)
prop changes, 132
Using Classes in JavaScript tutorial, 29
variables
destination, 20
heading, 146
ip_address, 175
listItems, 188
swatchComponent, 86
visibility, 209
viewport height (vh), 200
viewport width (vw), 200
views, 223
visibility variable, 209
visuals
visual hierarchy, 50
vw (viewport width), 200
warnings in console, 105
web requests
IP Address app
creating, 168
index.css file, 169
index.html file, 168
IPAddressContainer component, 169–172
webpack, 152, 162. See also Create React project
XMLHttpRequest object, 167
35.175.174.36