Contents

Contents

Book Revision . . . . . . . . . . . . . . .

Updated January 13th, 2020 . . . . . . .

Join our Official Community Discord

Bug Reports . . . . . . . . . . . . . . . .

Be notified of updates via Twitter . . .

We¡¯d love to hear from you! . . . . . .

.

.

.

.

.

.

1

1

1

1

1

1

Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

How to Get the Most Out of This Book

Overview . . . . . . . . . . . . . . . . .

Running Code Examples . . . . . . .

Project setups . . . . . . . . . . .

Code Blocks and Context . . . . . . .

Code Block Numbering . . . . .

Getting Help . . . . . . . . . . . . . . .

Emailing Us . . . . . . . . . . . . . . .

Get excited . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

1

1

2

3

3

4

5

5

6

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

Part I

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Your first React Web Application . . . . . . . .

Building Product Hunt . . . . . . . . . . . .

Setting up your development environment

Code editor . . . . . . . . . . . . . . . . .

Node.js and npm . . . . . . . . . . . . .

Install Git . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

8

8

9

9

10

10

CONTENTS

Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Special instruction for Windows users . . . . . . . . . . . . . . . . .

Ensure IIS is installed . . . . . . . . . . . . . . . . . . . . . . . .

JavaScript ES6/ES7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Sample Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Previewing the application . . . . . . . . . . . . . . . . . . . . .

Prepare the app . . . . . . . . . . . . . . . . . . . . . . . . . . . .

What¡¯s a component? . . . . . . . . . . . . . . . . . . . . . . . . . . .

Our first component . . . . . . . . . . . . . . . . . . . . . . . . .

JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The developer console . . . . . . . . . . . . . . . . . . . . . . . .

Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ReactDOM.render() . . . . . . . . . . . . . . . . . . . . . . . . . .

Building Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Making Product data-driven . . . . . . . . . . . . . . . . . . . . . . .

The data model . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Using props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rendering multiple products . . . . . . . . . . . . . . . . . . . .

React the vote (your app¡¯s first interaction) . . . . . . . . . . . . . .

Propagating the event . . . . . . . . . . . . . . . . . . . . . . . .

Binding custom component methods . . . . . . . . . . . . . . .

Using state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Setting state with this.setState() . . . . . . . . . . . . . . . .

Updating state and immutability . . . . . . . . . . . . . . . . . . . .

Refactoring with the Babel plugin transform-class-properties .

Babel plugins and presets . . . . . . . . . . . . . . . . . . . . . .

Property initializers . . . . . . . . . . . . . . . . . . . . . . . . .

Refactoring Product . . . . . . . . . . . . . . . . . . . . . . . . .

Refactoring ProductList . . . . . . . . . . . . . . . . . . . . . .

Congratulations! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Components . . . . . . . . .

A time-logging app . . .

Getting started . . . . .

Previewing the app

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

10

11

11

11

12

12

12

15

19

20

22

24

26

28

30

33

33

34

39

44

45

48

52

54

56

63

63

65

65

67

69

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

70

70

71

71

CONTENTS

Prepare the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Breaking the app into components . . . . . . . . . . . . . . . . . . . . . .

The steps for building React apps from scratch . . . . . . . . . . . . . . .

Step 2: Build a static version of the app . . . . . . . . . . . . . . . . . . .

TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . .

Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Render the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 3: Determine what should be stateful . . . . . . . . . . . . . . . . . .

State criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Applying the criteria . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Step 4: Determine in which component each piece of state should live

The list of timers and properties of each timer . . . . . . . . . . . .

Whether or not the edit form of a timer is open . . . . . . . . . . .

Visibility of the create form . . . . . . . . . . . . . . . . . . . . . . . .

Step 5: Hard-code initial states . . . . . . . . . . . . . . . . . . . . . . . . .

Adding state to TimersDashboard . . . . . . . . . . . . . . . . . . . .

Receiving props in EditableTimerList . . . . . . . . . . . . . . . . .

Props vs. state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Adding state to EditableTimer . . . . . . . . . . . . . . . . . . . . . .

Timer remains stateless . . . . . . . . . . . . . . . . . . . . . . . . . .

Adding state to ToggleableTimerForm . . . . . . . . . . . . . . . . .

Adding state to TimerForm . . . . . . . . . . . . . . . . . . . . . . . .

Step 6: Add inverse data flow . . . . . . . . . . . . . . . . . . . . . . . . .

TimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

ToggleableTimerForm . . . . . . . . . . . . . . . . . . . . . . . . . . .

TimersDashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Updating timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Adding editability to Timer . . . . . . . . . . . . . . . . . . . . . . . .

Updating EditableTimer . . . . . . . . . . . . . . . . . . . . . . . . .

Updating EditableTimerList . . . . . . . . . . . . . . . . . . . . . . .

Defining onEditFormSubmit() in TimersDashboard . . . . . . . . .

Deleting timers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

72

77

85

87

87

89

90

92

92

94

95

96

96

97

98

99

99

100

100

100

102

103

104

105

105

107

111

111

113

115

117

118

118

120

121

124

CONTENTS

Adding the event handler to Timer . . . . . . . . . . . . . . . . . .

Routing through EditableTimer . . . . . . . . . . . . . . . . . . . .

Routing through EditableTimerList . . . . . . . . . . . . . . . . .

Implementing the delete function in TimersDashboard . . . . . .

Adding timing functionality . . . . . . . . . . . . . . . . . . . . . . . . .

Adding a forceUpdate() interval to Timer . . . . . . . . . . . . . .

Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Add start and stop functionality . . . . . . . . . . . . . . . . . . . . . . .

Add timer action events to Timer . . . . . . . . . . . . . . . . . . .

Create TimerActionButton . . . . . . . . . . . . . . . . . . . . . . .

Run the events through EditableTimer and EditableTimerList

Try it out . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Methodology review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

124

125

126

127

128

129

131

131

131

133

134

137

138

Components & Servers . . . . . . . . . . . . . . . . . . .

Introduction . . . . . . . . . . . . . . . . . . . . . . . .

Preparation . . . . . . . . . . . . . . . . . . . . . .

server.js . . . . . . . . . . . . . . . . . . . . . . . . .

The Server API . . . . . . . . . . . . . . . . . . . . . .

text/html endpoint . . . . . . . . . . . . . . . .

JSON endpoints . . . . . . . . . . . . . . . . . . .

Playing with the API . . . . . . . . . . . . . . . . . . .

Loading state from the server . . . . . . . . . . . . .

Try it out . . . . . . . . . . . . . . . . . . . . . . .

client . . . . . . . . . . . . . . . . . . . . . . . . . . .

Fetch . . . . . . . . . . . . . . . . . . . . . . . . .

Sending starts and stops to the server . . . . . . . .

Sending creates, updates, and deletes to the server .

Give it a spin . . . . . . . . . . . . . . . . . . . . .

Next up . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

140

140

140

141

141

143

143

144

148

151

152

152

156

159

161

161

JSX and the Virtual DOM . . . . . . . . .

React Uses a Virtual DOM . . . . . .

Why Not Modify the Actual DOM? .

What is a Virtual DOM? . . . . . . .

Virtual DOM Pieces . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

162

162

162

163

163

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

CONTENTS

ReactElement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164

Experimenting with ReactElement . . . . . . . . . . . . . . . . . . . . . 165

Rendering Our ReactElement . . . . . . . . . . . . . . . . . . . . . . . . . 167

Adding Text (with children) . . . .

ReactDOM.render() . . . . . . . . . .

JSX . . . . . . . . . . . . . . . . . . . . . .

JSX Creates Elements . . . . . . . .

JSX Attribute Expressions . . . . . .

JSX Conditional Child Expressions

JSX Boolean Attributes . . . . . . .

JSX Comments . . . . . . . . . . . .

JSX Spread Syntax . . . . . . . . . .

JSX Gotchas . . . . . . . . . . . . . .

JSX Summary . . . . . . . . . . . . .

References . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

169

171

172

172

174

175

175

176

176

177

181

182

Advanced Component Configuration with props, state, and children

Intro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

How to use this chapter . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Creating Components - ES6 Classes or Functional Components .

render() Returns a ReactElement Tree . . . . . . . . . . . . . . . .

Getting Data into render() . . . . . . . . . . . . . . . . . . . . . . .

props are the parameters . . . . . . . . . . . . . . . . . . . . . . . . . . .

PropTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Default props with getDefaultProps() . . . . . . . . . . . . . . . . . .

Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Default value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Multiple contexts . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Using state: Building a Custom Radio Button . . . . . . . . . . .

Stateful components . . . . . . . . . . . . . . . . . . . . . . . . . . .

State updates that depend on the current state . . . . . . . . . . .

Thinking About State . . . . . . . . . . . . . . . . . . . . . . . . . .

Stateless Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Switching to Stateless . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

183

183

184

185

185

186

187

188

189

191

191

195

196

197

197

203

206

207

209

210

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download