Index

Symbols

{ } (curly brackets), 33, 81, 8485

… (spread) operator

explained, 74

limitations of, 76

transferring properties with, 7576

<> (two arrows) tag, 83

A

Abramov, Dan, 175, 242, 266

accessing

DOM elements

advantages of, 135137

ES6 arrow functions, 143

portals, 143147

references, 140143

properties, 33

action creators, 244

actions

action creators, 244

defined, 240

FavoriteColors app, 244

Redux console-driven app, 244

active links, highlighting, 235236

addColor function, 244

addEventListener function, 118119

addItem function, 183185

addresses (IP)

fetching from web services, 169172

formatting output of, 172175

Ajax, 167

Animaniacs Good Idea/Bad Idea sketches, 35

animations, 194

APIs (application programming interfaces), 810

app frames, 227228

App.js file

HelloWorld app, 156157

ReduxCounter app, 263

application programming interfaces (APIs), 810

application state

predictability of, 242243

storing, 239

apps. See also components

catalog browser

multi-page design, 1, 23

SPA (single-page app) model, 36

creating with React Router

active links, highlighting, 235236

app frame, 227228

Contact component, 229230

CSS (Cascading Style Sheets), 233236

example, 224225

HashRouter component, 230233

Home component, 228

Main component, 227

NavLink component, 231

overview, 223224

project setup, 225226

render method, 228

Route component, 231233

routing regions, 230231

Stuff component, 229

FavoriteColors Redux, 243

actions, 244

favoriteColors.html file, 243244

reducer, 245247

Store, 247248

first React

blank HTML page, creating, 1617

destination, changing, 1920

name, displaying, 1719

styles, 2022

HelloWorld

HelloWorld.css file, 160

HelloWorld.js file, 158159

index.css file, 159160

index.js file, 158161

production build, 161162

IP Address

creating, 168

index.css file, 169

index.html file, 168

index.js file, 168169

IPAddress component, 172175

IPAddressContainer component, 169172

ReduxCounter, 256

App.js file, 263

connect function, 264

Counter.js file, 265

creating, 259

decreaseCount function, 264

increaseCount function, 264

index.css file, 265266

index.html file, 260

index.js file, 260261

mapDispatchToProps function, 264

mapStateToProps function, 263264

overlay of Redux and React, 257259

Provider component, 261

reducer.js file, 261262

Redux library installation, 259260

sliding menu

button, creating, 206207

CSS (Cascading Style Sheets), 199201

example of, 197

how it works, 197201

index.css file, 203

index.html file, 201202

index.js file, 203

initial setup, 201202

Menu component, 207210

MenuContainer.js file, 203

online tutorial, 197

showing/hiding, 205206

state

predictability of, 242243

storing, 239

Todo List

adding items to, 183186

animations, 194

CSS (Cascading Style Sheets), 189190

displaying items in, 186189

index.css file, 180

index.html file, 179180

overview, 177179

removing items from, 191193

render method, 183184, 186187, 194

UI (user interface), 180182

architecture (MVC), 12

arrays

of components, 103105

filteredItems, 193

arrow functions, 143, 191

arrows (<>) tag, 83

Asynchronous JavaScript and XML (Ajax), 167

automatic UI state management, 7

B

Babel, 152, 162. See also Create React project

referencing, 16

transpilation from JSX to JavaScript, 8081

babel.min.js script, 149

background color, customizing, 4546

backgroundColor property (letterStyle object), 45

behavior property (Buttonify component), 35

bgcolor attribute (letterStyle object), 45

bind method, 119

blank HTML pages, creating, 1617

browser compatibility, 120

button counter

event handler, 110112

event listening

indirect nature of, 116117

regular DOM events, 118119

event properties, 114115

initial code listing, 108110

lifecycle methods

componentDidMount, 129

componentDidUpdate, 131

componentWillMount, 129

componentWillReceiveProps, 132

componentWillUnmount, 132

componentWillUpdate, 131

default state, 129

getDefaultProps, 128

initial code listing, 124127

initial rendering phase, 128

render, 129, 131

shouldComponentUpdate, 131

unmounting phase, 132

updating phase, 130

overview, 107108

SyntheticEvent type, 113114

this keyword, 119120

Buttonify component, 3435

buttons. See also button counter

Buttonify component, 3435

sliding menu, 206207

C

calling functions, 25

capitalization (JSX), 85

Card component, 5657

catalog browser app

multi-page design, 13

SPA (single-page app) model, 36

cd helloworld command, 153

changing destination, 1920

child components

overview, 3435

passing properties to, 6163

transferring properties to

component hierarchy and, 6569

problems with, 6574

spread operator (…), 7476

Circle component

array of, 103105

circleStyle object, 101102

initial code listing, 99102

render method, 102

showCircle function, 102103

theCircle variable, 102103

circleStyle object, 101102

Clark, Andrew, 242

class syntax, 29. See also components

CleverComponent, 34

color of background, customizing, 4546

color palette card

Card component, 5657

component definitions, 5456

component identification, 5154

generated HTML, 6364

Label component, 5961

overview, 4749

properties, passing to child components, 6163

Square component, 5859

visual element identification, 4951

Colorizer component

behavior of, 135137

code listing, 137140

portals, 143147

references, 140143

website, 136

ColorLabel component, 145146

commands

cd helloworld, 153

create-react-app, 153, 154, 202, 213, 225, 259

createStore, 261

export command, 157

npm install, 152, 259260

npm start, 153, 204, 227

comments, 8485

component hierarchy, 50, 5354, 6566, 249255

component updates, overriding, 218220

componentDidMount method

button counter, 118119, 129

IP Address app, 170

LightningCounterDisplay, 90, 9293, 96

componentDidUpdate method, 131

components. See also methods

arrays of, 103105

Buttonify, 3435

capitalization of, 85

child components, 3435

Circle

array of, 103105

circleStyle object, 101102

initial code listing, 99102

render method, 102

showCircle function, 102103

theCircle variable, 102103

class syntax for, 29

CleverComponent, 34

color palette card

Card component, 5657

component definitions, 5456

component identification, 5154

generated HTML, 6364

Label component, 5961

overview, 4749

properties, passing to child components, 6163

Square component, 5859

visual element identification, 4951

Colorizer

behavior of, 135137

code listing, 137140

portals, 143147

references, 140143

website, 136

ColorLabel, 145146

composability of. See also color palette card

advantages of, 6364

defined, 47

overview, 4749

Contact, 229230

container, 175

controlled, 195

CounterParent

event handler, 110112

event listening, 116117

event properties, 114115

initial code listing, 108110

overview, 107108

this keyword, 119120

creating

Card component, 5657

component definitions, 5456

component identification, 5154

generated HTML, 6364

Label component, 5961

overview, 4749

properties, 6163

Square component, 5859

visual element identification, 4951

defined, 2324, 2829

Fragment, 8283

HashRouter, 230233

HelloWorld

creating, 2932

properties, 3234

hierarchy of, 50, 5354, 6566, 249255

HOCs (Higher Order Components), 259

Home, 228

IPAddress, 172175

IPAddressContainer, 169172

Label, 73

Letter, 3739

generated HTML, 4041

overview, 3739

styling with CSS, 4142

styling with React, 4246

LightningCounterDisplay

componentDidMount method, 90, 9293, 96

full code listing, 9597

getInitialState method, 9192

initial code, 8890

initial state value, setting, 9192

overview, 8788

setInterval function, 90

setState method, 90, 9394

state change, rendering, 95

strikes variable, 9192

timerTick function, 9294, 95

Main, 227

Menu, 207210

MenuContainer, 201202, 215

MenuContainer.js file, 203

render method, 207208, 216218

shouldComponentUpdate method, 218220

multiple components, displaying, 103105

NavLink, 231

PlusButton, 116117

presentational, 175

properties, 3234

Provider, 261

PureComponent, 220221

Route, 231233

Shirt, 6973

sliding menu

button, creating, 206207

CSS (Cascading Style Sheets), 199201

how it works, 197201

index.css file, 203

index.html file, 201202

index.js file, 203

initial setup, 201202

Menu component, 207210

MenuContainer.js file, 203

showing/hiding, 205206

Stuff, 229

styling with CSS, 4142

styling with React

customizable background color, 4546

overview, 42

style object, creating, 4243

styles, applying, 4344

TodoList

adding items to, 183186

animations, 194

CSS (Cascading Style Sheets), 189190

displaying items in, 186189

index.css file, 180

index.html file, 179180

overview, 177179

removing items from, 191193

render method, 183184, 186187, 194

UI (user interface), 180182

uncontrolled, 195

updates, overriding, 218220

componentWillMount method, 129

componentWillReceiveProps method, 132

componentWillUnmount method, 119, 132

componentWillUpdate method, 131

composability of components

advantages of, 6364

color palette card example

Card component, 5657

component definitions, 5456

component identification, 5154

generated HTML, 6364

Label component, 5961

overview, 4749

properties, passing to child components, 6163

Square component, 5859

visual element identification, 4951

defined, 47

overview, 4749

configuring development environment

advantages of, 149152

Create React project

advantages of, 152

creating projects with, 152154

project file and folder structure, 154157

development mode, 161

HelloWorld app

HelloWorld.css file, 160

HelloWorld.js file, 158159

index.css file, 159160

index.js file, 158161

production build, 161162

Node, installing, 152

connect function, 264

console warnings, 105

console-driven app (Redux), 243

actions, 244

favoriteColors.html file, 243244

reducer, 245247

Store, 247248

console.log statements, 216218

Contact component (SPA), 229230

container components, 175

container elements, 1920, 143144

content pages (single-page app), 228230

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.css file, 265266

index.html file, 260

index.js file, 260261

mapDispatchToProps function, 264

mapStateToProps function, 263264

overlay of Redux and React, 257259

Provider component, 261

reducer.js file, 261262

Redux library installation, 259260

Counter.js file, 265

CounterParent component

event handler, 110112

event listening, 116117

event properties, 114115

initial code listing, 108110

overview, 107108

this keyword, 119120

counters. See also button counter

LightningCounterDisplay

componentDidMount method, 90, 9293, 96

full code listing, 9597

initial code, 8890

initial state value, setting, 9192

overview, 8788

setInterval function, 90

setState method, 90, 9394

state change, rendering, 95

strikes variable, 9192

timerTick function, 9294, 95

Redux Counter, 256

App.js file, 263

connect function, 264

Counter.js file, 265

creating, 259

decreaseCount function, 264

increaseCount function, 264

index.css file, 265266

index.html file, 260

index.js file, 260261

mapDispatchToProps function, 264

mapStateToProps function, 263264

overlay of Redux and React, 257259

Provider component, 261

reducer.js file, 261262

Redux library installation, 259260

Create React project

advantages of, 152

creating projects with, 152154

HelloWorld app

HelloWorld.css file, 160

HelloWorld.js file, 158159

index.css file, 159160

index.js file, 158161

production build, 161162

project file and folder structure, 154157

createElement function, 8081

createPortal method, 146

create-react-app command, 153, 154, 202, 213, 225, 259

createStore method, 247, 261

createTasks function, 187188

Creating a Smooth Sliding Menu tutorial, 197

CSS (Cascading Style Sheets)

first React app, 2022

HelloWorld app

HelloWorld.css file, 160

index.css file, 159160

HTML versus JSX, 8384

IP Address app, 169

ReduxCounter app, 265266

sliding menu, 199201

index.css file, 203

MenuButton.css file, 206207

Menu.css file, 209210

SPA (single-page app), 233236

styling React content with, 4042

TodoList component, 180, 189190

curly brackets ({ }), 33, 81, 8485

custom background color, 4546

D

decreaseCount function, 264

deep links, 224

delete function, 191

deleteItem function, 192193

design

multi-page design, 23

SPA (single-page app) model, 36

destination, changing, 1920

destination variable, 20

development environment

advantages of, 149152

Create React project

advantages of, 152

creating projects with, 152154

project file and folder structure, 154157

development mode, 161

HelloWorld app

HelloWorld.css file, 160

HelloWorld.js file, 158159

index.css file, 159160

index.js file, 158161

production build, 161162

Node, installing, 152

development mode, 161

dispatch method, 247

div element

first React app, 1920

HelloWorld component, 3132

styling with CSS, 4142

document.body argument (render method), 19

DOM elements, accessing

advantages of, 135137

ES6 arrow functions, 143

portals, 143147

references, 140143

DOM manipulation, 78

E

elements

capitalization in JSX, 85

div

container div, 143144

first React app, 1920

HelloWorld component, 3132

styling with CSS, 4142

DOM elements, accessing

advantages of, 135137

ES6 arrow functions, 143

portals, 143147

references, 140143

input, 141142

multiple elements, returning, 8283

script, 244

transferring properties with, 141142

UI elements, inefficiencies with, 2628

ellipses (…) operator

explained, 74

limitations of, 76

transferring properties with, 7576

EmberJS templates, 10

Erikson, Mark, 247

errors in ranges, 105

ES6 arrow functions, 143, 191

evaluating expressions, 81

event handlers

overview, 110112

this keyword, 119120

events

browser compatibility, 120

button counter

event handler, 110112

event listening, 116119

event properties, 114115

initial code listing, 108110

overview, 107108

this keyword, 119120

defined, 107

event handlers

overview, 110112

this keyword, 119120

KeyboardEvent type, 112

listening to

indirect nature of, 116117

regular DOM events, 118119

MouseEvent type, 112

performance, 120121

properties, 112

readystatechange, 167

SyntheticEvent type, 113114

export command, 157

expressions, evaluating, 81

extending PureComponent, 220221

external data, 163166

IP Address app

creating, 168

index.css file, 169

index.html file, 168

index.js file, 168169

IPAddress component, 172175

IPAddressContainer component, 169172

web request processing, 166167

F

FavoriteColors app, 243

actions, 244

favoriteColors.html file, 243244

reducer, 245247

Store, 247248

favoriteColors function, 245246

favoriteColors.html file, 243244

files. See also components

HelloWorld app

App.js, 156157

HelloWorld.css file, 160

HelloWorld.js, 158159

index.css file, 159160

index.js, 158161

IP Address app

index.css file, 169

index.html, 168

index.js, 168169

IPAddressContainer.js, 169172

IPAddress.css, 173174

IPAddress.js, 172175

Redux console-driven app

actions, 244

favoriteColors.html, 243244

reducer, 245247

Store, 247248

ReduxCounter app

App.js, 263

Counter.js, 265

index.css file, 265266

index.html, 260

index.js, 260261

reducer.js, 261262

sliding menu

index.css, 203

index.html, 201202

index.js, 203

MenuButton.css, 206207

MenuButton.js, 206, 221

MenuContainer.js, 203

Menu.css file, 209210

Menu.js, 208

SPA (single-page app)

Contact.js, 229230

Home.js, 228

index.css, 233234

index.html file, 226

index.js file, 226, 234

Main.js, 227

Stuff.js, 229

Todo List app

index.css, 180

index.html, 179180

index.js, 180, 181182

TodoItems.js, 187

TodoList.css, 189190

TodoList.js, 181

filter method, 192

filteredItems array, 193

first React app

blank HTML page, creating, 1617

destination, changing, 1920

name, displaying, 1719

styles, 2022

Flip Move library, 194

folders

node_modules, 194

react_spa, 226

formatDistance function, 25

Fragment component, 8283

fragments, 8283

frames (app), 227228

functions. See also methods

addColor, 244

addEventListener, 118119

arrow functions, 143, 191

calling, 25

connect, 264

createElement, 8081

createTasks, 187188

decreaseCount, 264

delete, 191

deleteItem, 192193

explained, 2426

favoriteColors, 245246

filter, 192

formatDistance, 25

getDistance, 25

increase, 111112, 116

increaseCount, 264

mapDispatchToProps, 264

mapStateToProps, 263264

preventDefault, 185186

printStuff, 74

removeColor, 244

removeEventListener, 119

timerTick, 9294

G

generated HTML

color palette card, 6364

Letter component, 4041

getDefaultProps method, 128

getDistance function, 25, 32

getState method, 247

greetTarget attribute (HelloWorld component), 3334

H

handleMouseDown property, 209, 219220

HashRouter component, 230233

heading variable, 146

HelloWorld app

HelloWorld.css file, 160

HelloWorld.js file, 158159

index.css file, 159160

index.js file, 158161

production build, 161162

HelloWorld component

creating, 2932

properties, 3234

component call, 3334

component definition, 33

HelloWorld.css file, 160

HelloWorld.js file, 158159

hiding sliding menu, 205206

hierarchy, component, 50, 5354, 6566, 249255

highlighting active links, 235236

HOCs (Higher Order Components), 259

Home component (SPA), 228

HTML elements, capitalization in JSX, 85

HTML templates, 56

HTTP protocol, 166

HTTP requests, 166167

I

identifying

components, 5154

visual elements, 4951

import statement

SPA (single-page app), 230, 234

Todo List app, 187, 194

importing libraries, 156

increase function, 111112, 116

increaseCount function, 264

incrementing state value, 94

index.css file

HelloWorld app, 159160

IP Address app, 169

ReduxCounter app, 265266

sliding menu, 203

SPA (single-page app), 233234

Todo List app, 180

index.html file

IP Address app, 168

ReduxCounter app, 260

sliding menu, 201202

SPA (single-page app), 226

Todo List app, 179180

index.js file

HelloWorld app, 158161

IP Address app, 168169

ReduxCounter app, 260261

sliding menu, 203

SPA (single-page app), 226, 234

Todo List app, 180, 181182

initial rendering phase (lifecycle methods), 128

initial state value, 9192

inline styles

applying, 4344

Circle component, 102

customizable background color, 4546

overview, 42

style object, creating, 4243

input element, 141142

_input property, 142

installing

Node, 152

React Router, 226

Redux library, 259260

Introduction to CSS Transitions, 200

IP addresses

fetching from web services, 169172

formatting output of, 172175

ip_address state variable, 175

IPAddress component, 172175

IPAddressContainer component, 169172

IPAddress.css file, 173174

IPAddress.js file, 174

items (Todo list)

adding, 183186

displaying, 186189

removing, 191193

J

JavaScript. See also components; functions; React Router

JSX-to-JavaScript transformation, 7981

visuals defined in, 1012

XMLHttpRequest object, 167

JSX

arrays, 103105

capitalization, 85

comments, 8485

CSS (Cascading Style Sheets) and, 8384

explained, 1112, 1415

expressions, evaluating, 81

first React app

blank HTML page, creating, 1617

destination, changing, 1920

name, displaying, 1719

styles, 2022

JSX-to-JavaScript transformation, 7981

location in code, 86

multiple elements, returning, 8283

style attribute, 8384

K

key attribute, 82

KeyboardEvent type, 112

keywords. See commands; methods; statements

L

Label component, 5961, 73

Letter component

generated HTML, 4041

overview, 3739

styling with CSS, 4142

styling with React

customizable background color, 4546

letterStyle object, creating, 4243

overview, 42

styles, applying, 4344

letterStyle object

creating, 4243

customizable background color, 4546

overview, 84

style attribute, 4344

libraries. See also React Router

Flip Move, 194

importing, 156

Redux library installation, 259260

lifecycle methods

button counter example, 124127

componentDidMount, 129

button counter, 118119, 129

IP Address app, 170

LightningCounterDisplay, 90, 9293, 96

componentDidUpdate, 131

componentWillMount, 129

componentWillReceiveProps, 132

componentWillUnmount, 119, 132

componentWillUpdate, 131

default state, 129

defined, 123

getDefaultProps, 128

initial rendering phase, 128

overview, 123124

render

button counter, 129, 131

Buttonify component, 34

Card component, 57

Circle component, 102, 104

Colorizer component, 140142

ColorLabel component, 145146

first React app, 1719

HashRouter component, 230231

HelloWorld app, 156

HelloWorld component, 2932

initial rendering phase, 129

IPAddress component, 173, 174

IPAddressContainer component, 171172

Label component, 5960

LightningCounterDisplay component, 90

optimizing, 213221

overview, 2627

renderData evaluated in, 105106

seeing, 216218

SPA (single-page app) example, 228

Square component, 58

Todo List app, 183184, 194

updating phase, 131

when to call, 211213

shouldComponentUpdate, 131

unmounting phase, 132

updating phase

prop changes, 132

state changes, 130131

LightningCounterDisplay component

componentDidMount method, 90

full code listing, 9597

initial code, 8890

initial state value, setting, 9192

overview, 8788

setInterval function, 90

setState method, 90

state change, rendering, 95

strikes variable, 9192

timerTick function, 9294, 95

links

active links, highlighting, 235236

deep links, 224

listening to events

indirect nature of, 116117

regular DOM events, 118119

listItems variable, 188

lists. See TodoList component

log method, 247

M

Main component (SPA), 227

mapDispatchToProps function, 264

mapStateToProps function, 263264

Matryoshka dolls analogy, 910

Menu component, 207210

MenuButton.css file, 206207

MenuButton.js file, 206, 221

MenuContainer component, 201202, 215

MenuContainer.js file, 203

render method, 207208, 216218

shouldComponentUpdate method, 218220

MenuContainer.js file, 203

Menu.css file, 209210

Menu.js file, 208

menus, sliding. See sliding menu

messages, console warnings, 105

methods

addItem, 183185

bind, 119

button counter example, 124127

componentDidMount

button counter, 118119, 129

IP Address app, 170

LightningCounterDisplay, 90, 9293, 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

overview, 123124

processRequest, 171

render

button counter, 129

Buttonify component, 34

Card component, 57

Circle component, 102, 104

Colorizer component, 140142

ColorLabel component, 145146

first React app, 1719

HashRouter component, 230231

HelloWorld app, 156

HelloWorld component, 2932

initial rendering phase, 129

IPAddress component, 173, 174

IPAddressContainer component, 171172

Label component, 5960

LightningCounterDisplay component, 90

optimizing, 213221

overview, 2627

renderData evaluated in, 105106

seeing, 216218

SPA (single-page app) example, 228

Square component, 58

Todo List app, 183184, 194

updating phase, 131

when to call, 211213

setInterval, 90

setNewColor, 142

setState, 90, 9394

shouldComponentUpdate, 131, 218220

showCircle, 102103

subscribe, 248

timerTick, 95

toggleMenu, 205

translate3d, 200

unmountComponentAtNode, 131

unmounting phase, 132

updating phase, 130

MouseEvent type, 112

multi-page design, 23

multiple components, displaying, 103105

multiple elements, returning, 8283

MVC architecture, 12

N

names, displaying, 1719

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

O

objects. See also components

circleStyle, 101102

letterStyle

creating, 4243

customizable background color, 4546

overview, 84

style attribute, 4344

props, 7374, 75

XMLHttpRequest, 167

onClick event handler, 110112

online resources, Using Classes in JavaScript tutorial, 29

operators, spread (…)

explained, 74

limitations of, 76

transferring properties with, 7576

optimizing render method

component updates, overriding, 218220

console.log statements, 216218

PureComponent, 220221

sample program, 213215

overriding component updates, 218220

P

passing properties

color palette card example, 6163

component hierarchy and, 6569

problems with, 6974

spread operator (…)

example, 7576

explained, 74

limitations of, 76

performance, events and, 120121

PlusButton component, 116117

portals, 143147

predictability of application state, 242243

presentational components, 175

preventDefault function, 185186

printStuff function, 74

processRequest method, 171

production builds, creating, 161162

properties

accessing, 33

event properties, 112, 114115

handleMouseDown, 209, 219220

HelloWorld component, 3234

component call, 3334

component definition, 33

letterStyle object

backgroundColor, 45

bgcolor, 45

style, 4344

prop changes, 132

ref, 141142

specifying

component call, 3334

component definition, 33

style, 8384

SyntheticEvent type, 113114

transferring

color palette card example, 6163

component hierarchy and, 6569

problems with, 6973

spread operator (…), 7476

props object, 7374, 75

protocols, HTTP, 166

Provider component, 261

PureComponent, 220221

Q-R

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, 235236

app frame, 227228

Contact component, 229230

CSS (Cascading Style Sheets), 233236

example, 224225

HashRouter component, 230233

Home component, 228

Main component, 227

NavLink component, 231

overview, 223224

project setup, 225226

render method, 228

Route component, 231233

routing regions, 230231

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

FavoriteColors app, 245247

Redux console-driven app, 245247

ReduxCounter app, 261262

Redux, 237238

advantages of, 249255

building apps with, 243

actions, 244

HTML files, 243244

reducer, 245247

Store, 247248

components of, 238243

Counter app, 256

App.js file, 263

connect function, 264

Counter.js file, 265

creating, 259

decreaseCount function, 264

increaseCount function, 264

index.css file, 265266

index.html file, 260

index.js file, 260261

mapDispatchToProps function, 264

mapStateToProps function, 263264

overlay of Redux and React, 257259

Provider component, 261

reducer.js file, 261262

Redux library installation, 259260

FavoriteColors app, 243

actions, 244

favoriteColors.html file, 243244

reducer, 245247

Store, 247248

library, installing, 259260

overlay of Redux and React, 257259

predictability of application state in, 242243

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.css file, 265266

index.html file, 260

index.js file, 260261

mapDispatchToProps function, 264

mapStateToProps function, 263264

overlay of Redux and React, 257259

Provider component, 261

reducer.js file, 261262

Redux library installation, 259260

ref attribute, 141142

references, 137141

referencing

Babel JavaScript compiler, 16

React library, 16

registerServiceWorker script, 156

regular DOM events, listening to, 118119

remote services, data from, 163166

React app

creating, 168

index.css file, 169

index.html file, 168

index.js file, 168169

IPAddress component, 172175

IPAddressContainer component, 169172

web request processing, 166167

removeColor function, 244

removeEventListener function, 119

removing items from Todo list, 191193

render method

Buttonify component, 34

Card component, 57

Circle component, 102, 104

Colorizer component, 140142

ColorLabel component, 145146

first React app, 1719

HashRouter component, 230231

HelloWorld app, 156

HelloWorld component, 2932

initial rendering phase, 129

IPAddress component, 173, 174

IPAddressContainer component, 171172

Label component, 5960

LightningCounterDisplay component, 90

MenuContainer component, 207208

optimizing, 213215

component updates, overriding, 218220

console.log statements, 216218

PureComponent, 220221

sample program, 213215

overview, 2627

renderData evaluated in, 105106

seeing, 216218

SPA (single-page app) example, 228

Square component, 58

Todo List app, 183184, 194

updating phase, 131

when to call, 211213

renderData array, 104

rendering state change, 95

requestAnimationFrame, 194

requests (HTTP), 166167

resources, Using Classes in JavaScript tutorial, 29

return statement, 33

ColorLabel component, 145

sliding menu, 208

Todo List app, 191

returning multiple elements, 8283

Route component, 231233

routing, 224

routing regions, defining, 230231

Russian Matryoshka dolls analogy, 910

S

script element, 244

seeing render method calls, 216218

setInterval function, 90

setNewColor method, 142

setState method, 90, 9394

shiftKey property (SyntheticEvent), 114115

Shirt component, 6973

shouldComponentUpdate method, 131, 218220

showCircle function, 102103

showing sliding menu, 205206

simple catalog browser app

multi-page design, 1, 23

SPA (single-page app) model, 36

sliding menu

button, creating, 206207

CSS (Cascading Style Sheets), 199201

example of, 197

how it works, 197201

index.css file, 203

index.html file, 201202

index.js file, 203

initial setup, 201202

Menu component, 207210

MenuButton.js, 221

MenuContainer.js file, 203

online tutorial, 197

showing/hiding, 205206

SPA (single-page app)

creating with React Router

active links, highlighting, 235236

app frame, 227228

Contact component, 229230

CSS (Cascading Style Sheets), 233236

example, 224225

HashRouter component, 230233

Home component, 228

Main component, 227

NavLink component, 231

overview, 223224

project setup, 225226

render method, 228

Route component, 231233

routing regions, 230231

Stuff component, 229

model, 36

specifying properties

component call, 3334

component definition, 33

spread operator (…)

explained, 74

limitations of, 76

transferring properties with, 7576

Square component, 5859

state change, rendering, 95

state management

application state

predictability of, 242243

storing, 239

lifecycle methods, 130131

LightningCounterDisplay

componentDidMount method, 90, 9293, 96

initial code, 8890

initial state value, setting, 9192

overview, 8788

setInterval function, 90

setState method, 90, 9394

strikes variable, 9192

LightningCounterDisplay component

full code listing, 9597

initial code, 8890

overview, 8788

setInterval function, 90

state change, rendering, 95

timerTick function, 9294, 95

Redux, 237238

advantages of, 249255

components of, 238243

Counter app, 259266

FavoriteColors app, 243248

managing React state with, 256

overlay of Redux and React, 257259

predictability of application state in, 242243

state value, incrementing, 94

UI (user interface), 7

state object (Todo List app), 184

state value, incrementing, 94

statements

console.log, 216218

import

SPA (single-page app), 230, 234

Todo List app, 187, 194

return, 33

ColorLabel component, 145

sliding menu, 208

Todo List app, 191

this, 119120

Store (Redux)

creating, 247

defined, 239

FavoriteColors app, 247248

Redux console-driven app, 247248

storing application state, 239

strikes variable, 9192

Stuff component (SPA), 229

style attribute, 4344, 8384

styles

CSS (Cascading Style Sheets)

first React app, 2022

HelloWorld app, 159160

HTML versus JSX, 8384

IP Address app, 169

ReduxCounter app, 265266

sliding menu, 199210

SPA (single-page app), 233236

styling React content with, 4042

TodoList component, 180, 189190

first React app, 2022

inline approach

Circle component, 102

customizable background color, 4546

overview, 42

style object, creating, 4243

styles, applying, 4344

overview, 37

subscribe method, 248

swatchComponent variable, 86

SyntheticEvent type, 113114

T

templates

EmberJS templates, 10

HTML templates, 56

theCircle variable, 102103

this keyword, 119120

this.props property, 33

timerTick function, 9294, 95

TodoItems.js file, 187

TodoList component

adding items to, 183186

animations, 194

CSS (Cascading Style Sheets), 189190

displaying items in, 186189

index.css file, 180

index.html file, 179180

overview, 177179

removing items from, 191193

render method, 183184, 186187, 194

TodoItems.js file, 187

TodoList.css file, 189190

TodoList.js file, 181

UI (user interface), 180182

TodoList.css file, 189190

TodoList.js file, 181

toggleMenu method, 205

transferring properties

color palette card example, 6163

component hierarchy and, 6569

problems with, 6974

spread operator (…)

example, 7576

explained, 74

limitations of, 76

transitions (CSS), 199201

translate3d method, 200

transpilation from JSX to JavaScript, 7981

U

UI (user interface)

Circle component example

array of, 103105

initial code listing, 99102

render method, 102

showCircle function, 102103

theCircle variable, 102103

inefficiencies with, 2628

sliding menu

button, creating, 206207

CSS (Cascading Style Sheets), 199201

example of, 197

how it works, 197201

index.css file, 203

index.html file, 201202

index.js file, 203

initial setup, 201202

Menu component, 207210

MenuContainer.js file, 203

online tutorial, 197

showing/hiding, 205206

state management, 7

Todo List app, 180182

uncontrolled components, 195

unmountComponentAtNode method, 131

unmounting phase (lifecycle methods), 132

unnecessary renders, avoiding

component updates, overriding, 218220

console.log statements, 216218

PureComponent, 220221

sample program, 213215

seeing renders, 216218

when to render, 211213

updates, overriding, 218220

updating phase (lifecycle methods)

prop changes, 132

state changes, 130131

Using Classes in JavaScript tutorial, 29

V

variables

destination, 20

heading, 146

ip_address, 175

listItems, 188

strikes, 9192

swatchComponent, 86

theCircle, 102103

visibility, 209

viewport height (vh), 200

viewport width (vw), 200

views, 223

virtual DOM, 78

visibility variable, 209

visuals

defining in JavaScript, 1012

identifying, 4951

visual hierarchy, 50

vw (viewport width), 200

W-X-Y-Z

warnings in console, 105

web requests

IP Address app

creating, 168

index.css file, 169

index.html file, 168

index.js file, 168169

IPAddress component, 172175

IPAddressContainer component, 169172

processing, 166167

webpack, 152, 162. See also Create React project

XMLHttpRequest object, 167

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
35.175.174.36