کتاب الکترونیکی Learning React

کتابی که مشاهده می کنید به زبان انگلیسی منتشر شده است.

کتاب الکترونیکی Learning React شامل 226 صفحه است که می توانید آن را با فرمت PDF دانلود نمایید.

سرفصل های کتاب:

Introducing React ………………………..1

Old School Multi-Page Design ………………………..2

New School Single-Page Apps……………………….. 3

Meet React ………………………..6

Automatic UI State Management ………………………..7

Lightning-fast DOM Manipulation ………………………..8

APIs to Create Truly Composable UIs ………………………..9

Visuals Defined Entirely in JavaScript ………………………..9

Just the V in an MVC Architecture……………………….. 11

Conclusion ………………………..11

 Building Your First React App ………………………..13

Dealing with JSX ………………………..14

Getting Your React On ………………………..15

Displaying Your Name ………………………..16

It’s All Still Familiar ………………………..18

Changing the Destination……………………….. 18

Styling It Up!……………………….. 19

Conclusion……………………….. 21

 Components in React ………………………..23

A Quick Review of Functions……………………….. 24

Changing How We Deal with the UI ………………………..26

Meet the React Component ………………………..29

Creating a Hello, World! Component ………………………..30

Specifying Properties……………………….. 32

Dealing with Children ………………………..34

Conclusion……………………….. 36

 Styling in React ………………………..37

Displaying Some Vowels……………………….. 37

Styling React Content Using CSS……………………….. 40

Understand the Generated HTML ………………………..40

Styling Content the React Way ………………………..42

Creating a Style Object ………………………..43

Actually Styling Our Content……………………….. 43

You Can Omit the “px” Suffix……………………….. 45

Making the Background Color Customizable……………………….. 45

Conclusion……………………….. 47

Creating Complex Components……………………….. 49

From Visuals to Components……………………….. 49

Identifying the Major Visual Elements……………………….. 51

Identifying the Components……………………….. 53

Creating the Components ………………………..56

The Card Component ………………………..58

The Square Component……………………….. 60

The Label Component ………………………..61

Passing Properties, Again!……………………….. 63

Why Component Composability Rocks……………………….. 66

Conclusion ………………………..66

 Transferring Properties (Props)……………………….. 69

Problem Overview……………………….. 69

Detailed Look at the Problem ………………………..74

Meet the Spread Operator ………………………..78

Properly Transferring Properties ………………………..78

Conclusion ………………………..80

 Meet JSX—Again! ………………………..81

What Happens with JSX?……………………….. 81

JSX Quirks to Remember ………………………..83

You Can Only Return A Single Root Node ………………………..83

You Can’t Specify CSS Inline……………………….. 84

Reserved Keywords and className ………………………..85

Comments……………………….. 86

Capitalization, HTML Elements, and Components……………………….. 87

Your JSX Can Be Anywhere……………………….. 88

Conclusion……………………….. 88vii

 Dealing with State……………………….. 89

Using State……………………….. 89

Our Starting Point ………………………..90

Getting Our Counter On……………………….. 93

Setting the Initial State Value ………………………..93

Starting Our Timer and Setting State……………………….. 94

Rendering the State Change……………………….. 96

Optional: The Full Code……………………….. 96

Conclusion ………………………..98

 Going from Data to UI……………………….. 99

The Example……………………….. 99

Your JSX Can Be Anywhere—Part II……………………….. 102

Dealing with Arrays in the Context of JSX ………………………..103

Conclusion ………………………..105

 Working with Events ………………………..107

Listening and Reacting to Events ………………………..107

Starting Point ………………………..108

Making the Button Click Do Something……………………….. 110

Event Properties ………………………..112

Doing Stuff With Event Properties ………………………..114

More Eventing Shenanigans……………………….. 115

Listening to Regular DOM Events……………………….. 117

The Meaning of this Inside the Event Handler……………………….. 119

React…Why? Why?! ………………………..120

Browser Compatibility ………………………..120

Improved Performance ………………………..120

Conclusion……………………….. 121

 The Component Lifecycle……………………….. 123

Meet the Lifecycle Methods……………………….. 123

See the Lifecycle Methods in Action……………………….. 124

The Initial Rendering Phase……………………….. 127

The Updating Phase ………………………..129

The Unmounting Phase ………………………..132

Conclusion ………………………..133viii

12……………………….. Accessing DOM Elements 135

Meet Refs ………………………..137

Conclusion……………………….. 142

 Creating a Single-Page App Using React Router……………………….. 143

The Example ………………………..144

Building the App ………………………..146

Displaying the Initial Frame……………………….. 147

Displaying the Home Page ………………………..149

Interim Cleanup Time……………………….. 151

Displaying the Home Page Correctly……………………….. 154

Creating the Navigation Links ………………………..155

Adding the Stuff and Contact Views ………………………..157

Creating Active Links……………………….. 159

Conclusion……………………….. 161

 Building a Todo List App……………………….. 163

Getting Started……………………….. 164

Creating the UI ………………………..165

Creating the Functionality……………………….. 168

Initializing our State Object ………………………..169

Handling the Form Submit……………………….. 169

Populating Our State……………………….. 171

Displaying the Tasks……………………….. 173

Adding the Finishing Touches……………………….. 176

Conclusion ………………………..178

 Setting Up Your React Development Environment……………………….. 179

Meet the Tools ………………………..182

Node.js ………………………..182

Babel ………………………..182

webpack ………………………..183

Your Code Editor ………………………..183ix

It Is Environment Setup Time! ………………………..184

Setting up our Initial Project Structure ………………………..184

Installing and Initializing Node.js ………………………..187

Installing the React Dependencies ………………………..190

Adding our JSX File ………………………..191

Going from JSX to JavaScript ………………………..193

Building and Testing Our App……………………….. 197

Conclusion ………………………..198