Contents
Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . i
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii
FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii
Who is this book for? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v
Fundamentals of React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Hello React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Setting up a React Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Meet the React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
React JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Lists in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Meet another React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
React Component Instantiation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
React DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
React Component Definition (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Handler Function in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
React Props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
React State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Callback Handlers in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Lifting State in React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
React Controlled Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Props Handling (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
React Side-Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
React Custom Hooks (Advanced) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
React Fragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Reusable React Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
React Component Composition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Imperative React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Inline Handler in JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
React Asynchronous Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
React Conditional Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
React Advanced State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
React Impossible States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
评论0