The Road to learn React

The Road to learn React

Robin Wieruch

This book is for sale at This version was published on 2017-05-11

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. ? 2016 - 2017 Robin Wieruch

Tweet This Book!

Please help Robin Wieruch by spreading the word about this book on Twitter! The suggested tweet for this book is: I just bought The Road to learn React by @rwieruch #ReactJs #JavaScript The suggested hashtag for this book is #ReactJs #JavaScript. Find out what other people are saying about the book by clicking on this link to search for this hashtag on Twitter: #JavaScript

Contents

Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i

Testimonials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii

Education for Children . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii

FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv

Change Log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vi

How to read it? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

What you can expect (so far...) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viii

Introduction to React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Hi, my name is React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 node and npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Zero-Configuration Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Introduction to JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 ES6 const and let . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 ReactDOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Hot Module Reloading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Complex JavaScript in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 ES6 Arrow Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 ES6 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Basics in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Internal Component State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 ES6 Object Initializer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Unidirectional Data Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Interactions with Forms and Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 ES6 Destructuring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Controlled Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Split Up Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

CONTENTS

Composeable Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Reusable Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Component Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Styling Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Getting Real with an API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Lifecycle Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Fetching Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 ES6 Spread Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Conditional Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Client- or Server-side Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Paginated Fetch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Client Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Code Organization and Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 ES6 Modules: Import and Export . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Code Organization with ES6 Modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Component Interface with PropTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Snapshot Tests with Jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Unit Tests with Enzyme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Advanced React Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Ref a DOM Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Loading ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Higher Order Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Advanced Sorting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130

State Management in React and beyond . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Lifting State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Revisited: setState() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Taming the State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Final Steps to Production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Eject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Deploy your App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

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

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

Google Online Preview   Download