کتاب الکترونیکی Building UI Components with React

کتابی که مشاهده می کنید نوشته آقای فرهاد غیور است که در سال 2017 میلادی و به زبان انگلیسی منتشر شده است.

کتاب الکترونیکی U&I with React شامل 173 صفحه است که می توانید آن را با دو فرمت PDF و EPUB دانلود نمایید.

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

Profile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Contact Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Topics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Chapter 1: Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Chapter 2: What is U&I? . . . . . . . . . . . . . . . . . . . . . . . . . 2
Chapter 3: Getting Started . . . . . . . . . . . . . . . . . . . . . . . . 2
Chapter 4: Building our App . . . . . . . . . . . . . . . . . . . . . . . 3
Chapter 5: Using U&I Concepts . . . . . . . . . . . . . . . . . . . . . 3
Chapter 6: Exploring CSS Preprocessors . . . . . . . . . . . . . . . . . 3
Chapter 7: Exploring CSS Modules . . . . . . . . . . . . . . . . . . . 3
Chapter 8: Exploring Inline Styles . . . . . . . . . . . . . . . . . . . . 3
Chapter 9: Adding Real Time Capabilities . . . . . . . . . . . . . . . . 3
Chapter 10: Showcasing . . . . . . . . . . . . . . . . . . . . . . . . . 3
Chapter 11: Looking Ahead . . . . . . . . . . . . . . . . . . . . . . . 4

Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Audience . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Example Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Piracy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Contributions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Chapter 1: Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
A Brief History of Web Development . . . . . . . . . . . . . . . . . . . . 10
Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Internal CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
External CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
CSS Classifiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
A Necessary Change . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The Rise of Components . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Chapter 2: What is U&I? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
UI Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
U&I Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Sample U&I Contract . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
No global namespace . . . . . . . . . . . . . . . . . . . . . 19
Unidirectional styles . . . . . . . . . . . . . . . . . . . . . 20
Dead code elimination . . . . . . . . . . . . . . . . . . . . 21
Minification . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Shareable constants . . . . . . . . . . . . . . . . . . . . . . 21
Deterministic resolution . . . . . . . . . . . . . . . . . . . 21
Isolation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Extendable . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Documentable . . . . . . . . . . . . . . . . . . . . . . . . . 21
Presentable . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Chapter 3: Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Webpack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Modern JavaScript with Babel . . . . . . . . . . . . . . . . . . . . . . 25
JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
ESLint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Others . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Our Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Boilerplate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Overall Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
A Clean Slate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Chapter 4: Building our App . . . . . . . . . . . . . . . . . . . . . . . . . . 33
First pass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Styling our App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Chapter 5: Using U&I Concepts . . . . . . . . . . . . . . . . . . . . . . . . 46
Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Necessary Components . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
On <App /> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
On <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
On <TodosListItem /> . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Others? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Building <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Building <TodosListItem /> . . . . . . . . . . . . . . . . . . . . . . . . 57
Considering U&I Concepts . . . . . . . . . . . . . . . . . . . . . . . . . 62
Name Spacing Components . . . . . . . . . . . . . . . . . . . . . . . 62
Application Name Spacing . . . . . . . . . . . . . . . . . . 62
Component Name Spacing . . . . . . . . . . . . . . . . . . 62
Unidirectional styling . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Extendibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
In Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Implementing App Name Spacing . . . . . . . . . . . . . . 64
Implementing Component Name Spacing . . . . . . . . . . 65
Implementing Extendable & Unidirectional Styles . . . . . 71
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Chapter 6: Exploring CSS Preprocessors . . . . . . . . . . . . . . . . . . . 75
What is a CSS Preprocessor? . . . . . . . . . . . . . . . . . . . . . . . . 75
Why use a Preprocessor? . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Meet Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Sass in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Configuring our Styles . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Refactoring <App /> . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Refactoring <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . . 82
Refactoring <TodosListItem /> . . . . . . . . . . . . . . . . . . . . . . 83
Enhancements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
On <TodosListInfo /> . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Building <TodosListInfo /> . . . . . . . . . . . . . . . . . . . . . . . . 85
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Chapter 7: Exploring CSS Modules . . . . . . . . . . . . . . . . . . . . . . 91
What are CSS Modules? . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Why use CSS Modules? . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
CSS Modules in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Refactoring styles/*.scss . . . . . . . . . . . . . . . . . . . . . . . 94
Refactoring <App /> . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Refactoring <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . . 97
Refactoring <TodosListInfo /> . . . . . . . . . . . . . . . . . . . . . . 98
Refactoring <TodosListItem /> . . . . . . . . . . . . . . . . . . . . . . 100
Suggested Exercise . . . . . . . . . . . . . . . . . . . . . . 103
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Chapter 8: Exploring Inline Styles . . . . . . . . . . . . . . . . . . . . . . . 105
What are Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Inline Styles in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Configuring our Styles . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Refactoring <App /> . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Refactoring <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . . 109
Refactoring <TodosListInfo /> . . . . . . . . . . . . . . . . . . . . . . 111
Refactoring <TodosListItems /> . . . . . . . . . . . . . . . . . . . . . 112
Inline Styles Enhanced . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
What is Radium? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Radium in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Configuring our Styles . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Refactoring <App /> . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Refactoring <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . . 120
Refactoring <TodosListInfo /> . . . . . . . . . . . . . . . . . . . . . . 121
Refactoring <TodosListItems /> . . . . . . . . . . . . . . . . . . . . . 121
Suggested Exercise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Chapter 9: Adding Real Time Capabilities . . . . . . . . . . . . . . . . . . 126
What is Theme Wrap? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Theme Wrap in Action . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Refactoring <App /> . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Refactoring <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . . 128
Refactoring <TodosListInfo /> . . . . . . . . . . . . . . . . . . . . . . 130
Refactoring <TodosListItem /> . . . . . . . . . . . . . . . . . . . . . . 131
Dynamic Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Mixins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Chapter 10: Showcasing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
What is Storybook? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
React Storybook in Action . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Documenting <TodosList /> . . . . . . . . . . . . . . . . . . . . . . . 149
Documenting <TodosListInfo /> . . . . . . . . . . . . . . . . . . . . . 158
Documenting <TodosListItem /> . . . . . . . . . . . . . . . . . . . . . 159
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

Chapter 11: Looking Ahead . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Explorations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
CSS Next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
CSS in JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Hardware Accelerated UI . . . . . . . . . . . . . . . . . . . . . . . . 165
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165