by
React and Typescript: Build a Portfolio Project
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 29.5 Hours | 10.7 GB
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 29.5 Hours | 10.7 GB
Perluas portofolio proyek Anda dengan membangun aplikasi yang kompleks dengan teknologi web terbaru.
Anda telah mempelajari React, tapi bagaimana sekarang? Saatnya membangun proyek luar biasa untuk portofolio Anda!
Buktikan pengetahuan React Anda kepada pemberi kerja.
Ada ratusan sumber daring untuk mengajari Anda dasar-dasar React, tetapi hanya sedikit yang melampaui dasar-dasar. Anda membutuhkan lebih banyak - sesuatu untuk mengajari Anda cara membuat aplikasi yang besar dan menarik. Sesuatu yang unik, sesuatu yang lebih dari daftar yang harus dilakukan.
Kursus ini adalah jawaban Anda.
Awali pengalaman belajar Anda dengan pengantar tentang cara menggunakan React dan Typecript secara bersamaan. Tidak paham dengan Typecript? Tidak masalah! Sebuah kilat cepat - tapi komprehensif - tutorial disertakan!
Setelah Anda siap dengan React dan Typecript, Anda akan menyelami proyek besar kami. Anda akan membangun lingkungan pengkodean berbasis browser interaktif. Ini seperti Notebook Jupyter, tetapi untuk Javascript, dengan banyak fitur tambahan ditambahkan. Ya, inilah yang akan Anda buat dalam kursus ini! Anda akan memecahkan tantangan luar biasa seputar memaketkan dan mentranspilasi kode langsung di browser. Ini adalah tugas yang biasanya dilakukan dengan menjalankan Webpack dan Babel di terminal Anda! Anda akan mengeksekusi kode pengguna dengan aman di browser seperti layanan terkenal seperti CodeSandBox dan CodePen. Terakhir, Anda akan menerapkan proyek ini menggunakan arsitektur multi-paket ke NPM, di mana teman dan perusahaan Anda dapat dengan mudah mengunduh dan menjalankan proyek Anda.
Selama keseluruhan proyek ini, saya akan menunjukkan kepada Anda berbagai solusi berbeda untuk sejumlah besar masalah. Saya akan menunjukkan kepada Anda langkah demi langkah cara menyelesaikan setiap masalah. Anda juga akan melihat banyak kekhawatiran seputar kinerja dan keamanan ditangani.
Di akhir kursus, Anda akan memiliki proyek portofolio yang luar biasa dengan penampilan dan fungsionalitas yang luar biasa. Anda akan memahami setiap baris kode, dan dapat menjelaskan setiap bagian kepada calon pemberi kerja.
Berikut adalah sebagian daftar topik yang akan dibahas dalam kursus ini:
Apa yang akan Anda pelajari
Anda telah mempelajari React, tapi bagaimana sekarang? Saatnya membangun proyek luar biasa untuk portofolio Anda!
Buktikan pengetahuan React Anda kepada pemberi kerja.
Ada ratusan sumber daring untuk mengajari Anda dasar-dasar React, tetapi hanya sedikit yang melampaui dasar-dasar. Anda membutuhkan lebih banyak - sesuatu untuk mengajari Anda cara membuat aplikasi yang besar dan menarik. Sesuatu yang unik, sesuatu yang lebih dari daftar yang harus dilakukan.
Kursus ini adalah jawaban Anda.
Awali pengalaman belajar Anda dengan pengantar tentang cara menggunakan React dan Typecript secara bersamaan. Tidak paham dengan Typecript? Tidak masalah! Sebuah kilat cepat - tapi komprehensif - tutorial disertakan!
Setelah Anda siap dengan React dan Typecript, Anda akan menyelami proyek besar kami. Anda akan membangun lingkungan pengkodean berbasis browser interaktif. Ini seperti Notebook Jupyter, tetapi untuk Javascript, dengan banyak fitur tambahan ditambahkan. Ya, inilah yang akan Anda buat dalam kursus ini! Anda akan memecahkan tantangan luar biasa seputar memaketkan dan mentranspilasi kode langsung di browser. Ini adalah tugas yang biasanya dilakukan dengan menjalankan Webpack dan Babel di terminal Anda! Anda akan mengeksekusi kode pengguna dengan aman di browser seperti layanan terkenal seperti CodeSandBox dan CodePen. Terakhir, Anda akan menerapkan proyek ini menggunakan arsitektur multi-paket ke NPM, di mana teman dan perusahaan Anda dapat dengan mudah mengunduh dan menjalankan proyek Anda.
Selama keseluruhan proyek ini, saya akan menunjukkan kepada Anda berbagai solusi berbeda untuk sejumlah besar masalah. Saya akan menunjukkan kepada Anda langkah demi langkah cara menyelesaikan setiap masalah. Anda juga akan melihat banyak kekhawatiran seputar kinerja dan keamanan ditangani.
Di akhir kursus, Anda akan memiliki proyek portofolio yang luar biasa dengan penampilan dan fungsionalitas yang luar biasa. Anda akan memahami setiap baris kode, dan dapat menjelaskan setiap bagian kepada calon pemberi kerja.
Berikut adalah sebagian daftar topik yang akan dibahas dalam kursus ini:
- Kuasai penggunaan React, Redux, dan Typecript bersama-sama
- Bangun aplikasi yang kompleks dan menarik menggunakan arsitektur berbasis paket
- Pahami tantangan transpiling dan pemrosesan kode dalam browser
- Amankan aplikasi Anda dari potensi eksploitasi keamanan
- Jalankan kode yang disediakan pengguna dengan aman langsung di browser
- Jalankan editor kode langsung di browser - editor yang sama yang digunakan oleh VSCode!
- Manfaatkan Perakitan Web untuk menjalankan bundler kode langsung di browser dengan kecepatan secepat kilat
- Gunakan bagian dalam Redux untuk menguji logika bisnis Anda secara manual
- Temukan lusinan trik untuk membuat UI yang ramping
- Terapkan aplikasi Anda ke registri NPM, tempat orang lain dapat menggunakannya dengan mudah
Apa yang akan Anda pelajari
- Bangun proyek siap portofolio dengan React dan Typecript
- Integrasikan React dan Redux bersama dengan Typecript
- Sederhanakan pembaruan status dengan perpustakaan Immer yang luar biasa
- Lihat proses langkah demi langkah dalam merancang dan merakit proyek tingkat lanjut
- Kelola proyek menggunakan arsitektur berbasis paket
- Otomatiskan penerapan Anda dengan Lerna CLI yang populer
- Bangun transpiler + bundler dalam browser
- Rakit komponen React yang sangat bisa digunakan kembali
- Gunakan middlewares Redux untuk menangani aliran logika bisnis yang rumit
- Gunakan Perakitan Web untuk meningkatkan kinerja aplikasi Anda
Daftar isi
React with Typescript
1 How to Get Help
2 Join Our Community!
3 Be Sure to Watch this Video!
4 Generating TypeScript-Enabled Projects
5 File Extensions and Starting Up React
Types Around Props and State
6 Changes with TypeScript
7 The Big Difference with Props
8 Explicit Component Type Annotations
9 Annotations with Children
10 State with TypeScript
11 Type Inference with State
12 Quick Finish to the Example
13 More on State
14 Type Unions in State
Types Around Events and Refs
15 Inline Event Handlers
16 Typing Standalone Event Handlers
17 Handling Drag Events Too!
18 TypeScript with Class Components
19 Applying Types to Refs
20 More on Refs
Typescript with Redux
21 App Overview
22 Project Setup
23 Redux Store Design
24 Reducer Setup
25 Annotating the Return Type
26 Typing an Action
27 Separate Interfaces for Actions
28 Applying Action Interfaces
29 Adding an Action Type Enum
30 A Better Way to Organize Code
31 Adding Action Creators
32 Adding Request Logic
33 Applying Typings to Dispatch
34 Setting Up Exports
35 Wiring Up to React
36 Oops… Initial State!
37 Reminder on Event Types
38 Calling an Action Creator
39 Binding Action Creators
40 Selecting State
41 Awkward Typings Around React-Redux
42 Creating a Typed Selector
43 Consuming Store State
44 Quick Wrapup
The Big App – Here’s What We’re Building!
45 App Overview
46 Three Big Challenges
Code Transpiling in the Browser
47 Transpiling Options
48 Remote Transpiling
49 Module Systems
50 Behind the Scenes with Webpack
51 Webpack with ES Modules
52 One Small Change
53 Options for Bundling
54 So Which Approach
55 A Webpack Replacement
Implementing In-Browser Bundling
56 A Demo App
57 Project Setup
58 Basic Form Elements
59 Understanding ESBuild
60 Initializing ESBuild
61 Using Refs for Arbitrary Values
62 Transpiling Works!
63 Troubles with Bundling in the Browser
64 Issues with NPM
65 Solution with Unpkg
66 Demo ESBuild Plugin
67 ESBuild Can Bundle!
68 Deep Dive on Bundling
69 Filters and Namespaces
70 Adding a Tiny Test Package
Dynamic Fetching and Loading of NPM Modules
71 Dynamically Fetching Modules
72 Generating the Unpkg URL
73 Issues with Multi-File Packages
74 Solving Relative Paths
75 Using the URL Constructor
76 Failing Nested Requires
77 Resolving Nested Paths
78 It Works!
79 Defines During Bundling
80 Bonus! Package Versioning
Caching For Big Performance Gains
81 Crazy Numbers of Requests
82 Implementing a Caching Layer
83 Caching with Key-Value Pairs
84 Fixing a TypeScript Error
85 Bundling User Input
86 Breaking Up Resolve Logic With Filters
87 Refactoring to Multiple Plugins
88 Loading CSS Files
89 Configuring the Correct Loader
90 Small Shortcoming with ESBuild
91 Tricking ESBuild’s CSS Handling
92 Escaping CSS Snippets
93 Separate Load Filters
94 Extracting Common Caching Logic
95 A Better Way of Loading WASM
Safely Handling Untrusted Code Execution
96 Executing User Code
97 Big Issues with Code Execution
98 How Do Others Solve This
99 Displaying IFrames
100 Different Execution Context
101 Crossing Context
102 Sandboxing an IFrame
103 Breaking Access with Different Domains
104 How Do IFrames Fix Anything
105 The Full Flow – How CodePen and CodeSandbox Work
106 Do We Need Separation
107 Middle Ground Approach
108 IFrames with SrcDocs
109 Execution Using SrcDoc
110 Running Unescaped Code
111 Indirect Communication Between Frames
112 Passing Code to the IFrame
113 It Works!
114 Highlighting Errors
115 Issues with Repeat Execution
116 Resetting the IFrame Contents
117 Warning Fixup
Displaying a Code Editor In a React App
118 Issues with Eager Bundling
119 Quick Revert
120 Open Source Editor Options
121 Displaying an Editor
122 Configuring the Editor
123 Crazy Monaco Editor Type Defs
124 A Few More Options
125 Setting the Initial Value
126 Handling Editor Change Events
127 Adding a Type Definition
128 Adding Prettier to Our Editor
129 Automatic Code Formatting
130 Adding a CSS Library
131 Floating the Format Button
132 Fixing Syntax Highlighting
133 CSS For Syntax Highlighting
How to Extract Reusable Components
134 Refactoring Out a Preview Component
135 Extracting Bundling Logic
136 Fixing a Few Warnings
137 Multiple Editors and Preview Windows
Draggable Resizing Components
138 Adding Resizable Panes
139 Setting Up React-Resizable
140 Setting a Resize Handle
141 Resizer CSS
142 Adding a Bunch of CSS
143 Expanding the Resizer Horizontally
144 Expanding the Code Editor
145 Fixing the Resize Issue
146 Constraining Vertical Resizes
147 Resizing Horizontally
148 Strategies for Prop Definitions
149 Applying Horizontal Resize Props
150 Getting Preview to Expand
151 A Small Workaround
152 Updating the After Selector
153 An Oddity Around the Resizer
154 On Resize Events
155 Updating Resizer Props
156 Improving Resize Performance
157 Why Width Jumps
158 Synchronizing Width State
159 Quick Dependency Array Fix
160 Adding Debouncing Logic
161 Clearing the Timeout
162 Adding an Execution Timeout
Techniques for Error Handling in React Apps
163 Error Handling
164 Extracting Reusable Error Handling Logic
165 Handling Async Errors
166 Capturing Bundling Errors
167 Printing the Captured Error
Creating a Markdown Editor in a React App
168 Plan for the Text Cell
169 A Few Issues with the Markdown Editor
170 Toggling the Markdown Editor Mode
171 Conditional Toggling
172 Why the Broken Cursor
173 Solving Class Name Conflicts
174 Fixing the Divider Height
175 Restyling the Resizer Bar
176 Additional Markdown Styling
177 Applying the Dark Theme
178 Adding State to the Editor
179 Last Touch of Styling
Design Patterns for Redux with Typescript
180 Redux Design
181 Initial Scaffolding
182 Action Interface Definitions
183 Defining What a Cell Is
184 Cells Reducer Setup
185 Adding a Few Reducer Cases
186 Creating and Exporting the Store
187 React to Redux Connection
188 Action Creator Return Type Annotations
189 Easy Action Creator Implementations
190 Handling Cyclical Imports
191 Defining Direction
192 Update Cell Logic
Simplify State Updates with Immer
193 Simple Updates with Immer
194 Removing a Cell
195 Swapping Cell Placement
196 Inserting New Cells
197 Small Gotcha with Immer
198 Manual Testing of a Redux Store
Binding React with Redux
199 Back to React
200 Creating a Typed Selector
201 Selecting an Ordered List
202 Rendering the List of Cells
203 Cell Type Rendering
204 Reminder on the Action Creator Helper
205 Extracting Local State
206 Extracting State from Text Cell
207 The Action Bar Component
208 Adding Icon Buttons
209 Applying Custom CSS
210 Last Touch of Styling
211 Adding New Cells
212 Displaying Add Cell
213 Resolving the Key Warning
214 Styling Add Cell
215 A Touch More Styling
216 Forcing Add Cell Visibility
217 Understanding CSS Transition Curves
218 Adding Vertical Spacing
219 Why is Add Cell Weird
220 Refactoring the Redux Side
221 Three Possible Solutions
222 Refactoring the React Side
Connecting Bundles in Redux
223 Should There Be a Bundles Reducer
224 Here’s the Plan
225 Defining Bundling Action Types
226 Initial Reducer Implementation
227 Finishing Up the Reducer
228 Adding the Action Creator
229 React Wire Up
230 Adjusting the Reducer State
231 Solving a Small Warning with useMemo
232 Adding Eager Bundling
233 Getting an Initial Bundle
234 Showing a Loading Message
235 Styling the Progress Bar
236 Can We Estimate Bundle Duration
237 Fading In the Progress Bar
238 Fixing the Background
Adding a ‘Cumulative Code Execution’ Feature
239 Referencing Code from Previous Cells
240 Method of Implementation
241 Calculating Cumulative Code
242 Executing the Cumulative Code
243 Adding a Show Function
244 Showing Complex Values
245 Showing a JSX Element
246 Import Name Collisions
247 Avoiding Naming Collisions
248 Showing a React Component
249 Selective Calls to Show
250 Implementing a Show Function No-Op
251 Extracting a Hook
252 A Touch of CSS
253 Fixing Edge Snaps
The Path – Lerna
254 The Path Moving Forward
255 Planning Local Architecture
256 An Easy Solution
257 What’s the App Look Like in the Future
258 Package Based Development
259 Introducing Lerna
260 Disclaimer on Lerna
261 Lerna Setup
262 Adding Modules with Lerna
263 Linking Packages
264 Adding TypeScript Support
265 Adding TypeScript to the CLI
266 Finishing TS Support
267 Parallel Start Scripts
CLI
268 Reading Command Line Arguments
269 Using Commander to Build a CLI
270 Specifying Command Line Options
271 Communication from the CLI to the API
272 What’s that Directory Argument
273 Calculating File Paths
Local API
274 The Local API
275 Adding Dependencies and Running Express
276 Error Handling Where
277 Wrapping Express Listen with a Promise
278 Error Handling Solution
279 Accessing the React App
280 Connecting the Proxy
281 Building a Production Bundle
282 Understanding Package Links
283 What’s the Path
284 Which Method Do We Use
285 Determining Our Execution Environment
286 A Quick Test
287 Creating the Cells Router
288 Writing Cells to a File
289 Reading File Contents
290 Default Cell Values
291 Adding a JSON Parser
Fetching Cells
292 Adding Fetch Cell Logic to Redux
293 The Fetch Cells Action Creator
294 Handling Fetch Cell Types
295 Saving a List of Cells
296 When to Call Fetch
297 Saving a List of Cells
298 Adding a Persist Middleware
299 Detecting When to Save
300 Debouncing Save Logic
Publishing
301 The Path to NPM Publishing
302 Bootstrapping the Project
303 A Touch More Setup
304 Getting Ready to Publish
305 Configuring the CLI
306 Publishing to NPM
307 NPM Organizations
308 Declaring Scoped Packages
309 Refactoring Package Names
310 Auditing Dev Dependencies
311 Adding Build Scripts
312 The Case for Bundling
313 Running ESBuild
314 Creating a Repository
315 Publishing with Lerna
316 Does it Work
317 Next Steps
Appendix TypeScript
318 Quick Note
319 TypeScript Overview
320 Environment Setup
321 A First App
322 Executing TypeScript Code
323 One Quick Change
324 Catching Errors with TypeScript
325 Catching More Errors!
326 Course Overview
327 Types
328 More on Types
329 Examples of Types
330 Where Do We Use Types
331 Type Annotations and Inference
332 Annotations with Variables
333 Object Literal Annotations
334 Annotations Around Functions
335 Understanding Inference
336 The Any Type
337 Fixing the Any Type
338 Delayed Initialization
339 When Inference Doesn’t Work
340 More on Annotations Around Functions
341 Inference Around Functions
342 Annotations for Anonymous Functions
343 Void and Never
344 Destructuring with Annotations
345 Annotations Around Objects
346 Arrays in TypeScript
347 Why Typed Arrays
348 Multiple Types in Arrays
349 When to Use Typed Arrays
350 Tuples in TypeScript
351 Tuples in Action
352 Why Tuples
353 Interfaces
354 Long Type Annotations
355 Fixing Annotations with Interfaces
356 Syntax Around Interfaces
357 Functions In Interfaces
358 Code Reuse with Interfaces
359 General Plan with Interfaces
360 Classes
361 Basic Inheritance
362 Class Method Modifiers
363 Fields in Classes
364 Fields with Inheritance
365 Where to Use Classes
366 App Overview
367 Parcel in Action
368 Project Structure
369 Generating Random Data
370 Type Definition Files
371 Using Type Definition Files
372 Export Statements in TypeScript
373 Defining a Company
374 Adding Google Maps Support
375 Google Maps Integration with TypeScript
376 Exploring Type Definition Files
377 Hiding Functionality
378 Why Use Private Modifiers Here’s Why
379 Adding Markers
380 Duplicate Code
381 One Possible Solution
382 Restricting Access with Interfaces
383 Implicit Type Checks
384 Showing Popup Windows
385 Updating Interface Definitions
386 Optional Implements Clauses
387 App Wrapup
1 How to Get Help
2 Join Our Community!
3 Be Sure to Watch this Video!
4 Generating TypeScript-Enabled Projects
5 File Extensions and Starting Up React
Types Around Props and State
6 Changes with TypeScript
7 The Big Difference with Props
8 Explicit Component Type Annotations
9 Annotations with Children
10 State with TypeScript
11 Type Inference with State
12 Quick Finish to the Example
13 More on State
14 Type Unions in State
Types Around Events and Refs
15 Inline Event Handlers
16 Typing Standalone Event Handlers
17 Handling Drag Events Too!
18 TypeScript with Class Components
19 Applying Types to Refs
20 More on Refs
Typescript with Redux
21 App Overview
22 Project Setup
23 Redux Store Design
24 Reducer Setup
25 Annotating the Return Type
26 Typing an Action
27 Separate Interfaces for Actions
28 Applying Action Interfaces
29 Adding an Action Type Enum
30 A Better Way to Organize Code
31 Adding Action Creators
32 Adding Request Logic
33 Applying Typings to Dispatch
34 Setting Up Exports
35 Wiring Up to React
36 Oops… Initial State!
37 Reminder on Event Types
38 Calling an Action Creator
39 Binding Action Creators
40 Selecting State
41 Awkward Typings Around React-Redux
42 Creating a Typed Selector
43 Consuming Store State
44 Quick Wrapup
The Big App – Here’s What We’re Building!
45 App Overview
46 Three Big Challenges
Code Transpiling in the Browser
47 Transpiling Options
48 Remote Transpiling
49 Module Systems
50 Behind the Scenes with Webpack
51 Webpack with ES Modules
52 One Small Change
53 Options for Bundling
54 So Which Approach
55 A Webpack Replacement
Implementing In-Browser Bundling
56 A Demo App
57 Project Setup
58 Basic Form Elements
59 Understanding ESBuild
60 Initializing ESBuild
61 Using Refs for Arbitrary Values
62 Transpiling Works!
63 Troubles with Bundling in the Browser
64 Issues with NPM
65 Solution with Unpkg
66 Demo ESBuild Plugin
67 ESBuild Can Bundle!
68 Deep Dive on Bundling
69 Filters and Namespaces
70 Adding a Tiny Test Package
Dynamic Fetching and Loading of NPM Modules
71 Dynamically Fetching Modules
72 Generating the Unpkg URL
73 Issues with Multi-File Packages
74 Solving Relative Paths
75 Using the URL Constructor
76 Failing Nested Requires
77 Resolving Nested Paths
78 It Works!
79 Defines During Bundling
80 Bonus! Package Versioning
Caching For Big Performance Gains
81 Crazy Numbers of Requests
82 Implementing a Caching Layer
83 Caching with Key-Value Pairs
84 Fixing a TypeScript Error
85 Bundling User Input
86 Breaking Up Resolve Logic With Filters
87 Refactoring to Multiple Plugins
88 Loading CSS Files
89 Configuring the Correct Loader
90 Small Shortcoming with ESBuild
91 Tricking ESBuild’s CSS Handling
92 Escaping CSS Snippets
93 Separate Load Filters
94 Extracting Common Caching Logic
95 A Better Way of Loading WASM
Safely Handling Untrusted Code Execution
96 Executing User Code
97 Big Issues with Code Execution
98 How Do Others Solve This
99 Displaying IFrames
100 Different Execution Context
101 Crossing Context
102 Sandboxing an IFrame
103 Breaking Access with Different Domains
104 How Do IFrames Fix Anything
105 The Full Flow – How CodePen and CodeSandbox Work
106 Do We Need Separation
107 Middle Ground Approach
108 IFrames with SrcDocs
109 Execution Using SrcDoc
110 Running Unescaped Code
111 Indirect Communication Between Frames
112 Passing Code to the IFrame
113 It Works!
114 Highlighting Errors
115 Issues with Repeat Execution
116 Resetting the IFrame Contents
117 Warning Fixup
Displaying a Code Editor In a React App
118 Issues with Eager Bundling
119 Quick Revert
120 Open Source Editor Options
121 Displaying an Editor
122 Configuring the Editor
123 Crazy Monaco Editor Type Defs
124 A Few More Options
125 Setting the Initial Value
126 Handling Editor Change Events
127 Adding a Type Definition
128 Adding Prettier to Our Editor
129 Automatic Code Formatting
130 Adding a CSS Library
131 Floating the Format Button
132 Fixing Syntax Highlighting
133 CSS For Syntax Highlighting
How to Extract Reusable Components
134 Refactoring Out a Preview Component
135 Extracting Bundling Logic
136 Fixing a Few Warnings
137 Multiple Editors and Preview Windows
Draggable Resizing Components
138 Adding Resizable Panes
139 Setting Up React-Resizable
140 Setting a Resize Handle
141 Resizer CSS
142 Adding a Bunch of CSS
143 Expanding the Resizer Horizontally
144 Expanding the Code Editor
145 Fixing the Resize Issue
146 Constraining Vertical Resizes
147 Resizing Horizontally
148 Strategies for Prop Definitions
149 Applying Horizontal Resize Props
150 Getting Preview to Expand
151 A Small Workaround
152 Updating the After Selector
153 An Oddity Around the Resizer
154 On Resize Events
155 Updating Resizer Props
156 Improving Resize Performance
157 Why Width Jumps
158 Synchronizing Width State
159 Quick Dependency Array Fix
160 Adding Debouncing Logic
161 Clearing the Timeout
162 Adding an Execution Timeout
Techniques for Error Handling in React Apps
163 Error Handling
164 Extracting Reusable Error Handling Logic
165 Handling Async Errors
166 Capturing Bundling Errors
167 Printing the Captured Error
Creating a Markdown Editor in a React App
168 Plan for the Text Cell
169 A Few Issues with the Markdown Editor
170 Toggling the Markdown Editor Mode
171 Conditional Toggling
172 Why the Broken Cursor
173 Solving Class Name Conflicts
174 Fixing the Divider Height
175 Restyling the Resizer Bar
176 Additional Markdown Styling
177 Applying the Dark Theme
178 Adding State to the Editor
179 Last Touch of Styling
Design Patterns for Redux with Typescript
180 Redux Design
181 Initial Scaffolding
182 Action Interface Definitions
183 Defining What a Cell Is
184 Cells Reducer Setup
185 Adding a Few Reducer Cases
186 Creating and Exporting the Store
187 React to Redux Connection
188 Action Creator Return Type Annotations
189 Easy Action Creator Implementations
190 Handling Cyclical Imports
191 Defining Direction
192 Update Cell Logic
Simplify State Updates with Immer
193 Simple Updates with Immer
194 Removing a Cell
195 Swapping Cell Placement
196 Inserting New Cells
197 Small Gotcha with Immer
198 Manual Testing of a Redux Store
Binding React with Redux
199 Back to React
200 Creating a Typed Selector
201 Selecting an Ordered List
202 Rendering the List of Cells
203 Cell Type Rendering
204 Reminder on the Action Creator Helper
205 Extracting Local State
206 Extracting State from Text Cell
207 The Action Bar Component
208 Adding Icon Buttons
209 Applying Custom CSS
210 Last Touch of Styling
211 Adding New Cells
212 Displaying Add Cell
213 Resolving the Key Warning
214 Styling Add Cell
215 A Touch More Styling
216 Forcing Add Cell Visibility
217 Understanding CSS Transition Curves
218 Adding Vertical Spacing
219 Why is Add Cell Weird
220 Refactoring the Redux Side
221 Three Possible Solutions
222 Refactoring the React Side
Connecting Bundles in Redux
223 Should There Be a Bundles Reducer
224 Here’s the Plan
225 Defining Bundling Action Types
226 Initial Reducer Implementation
227 Finishing Up the Reducer
228 Adding the Action Creator
229 React Wire Up
230 Adjusting the Reducer State
231 Solving a Small Warning with useMemo
232 Adding Eager Bundling
233 Getting an Initial Bundle
234 Showing a Loading Message
235 Styling the Progress Bar
236 Can We Estimate Bundle Duration
237 Fading In the Progress Bar
238 Fixing the Background
Adding a ‘Cumulative Code Execution’ Feature
239 Referencing Code from Previous Cells
240 Method of Implementation
241 Calculating Cumulative Code
242 Executing the Cumulative Code
243 Adding a Show Function
244 Showing Complex Values
245 Showing a JSX Element
246 Import Name Collisions
247 Avoiding Naming Collisions
248 Showing a React Component
249 Selective Calls to Show
250 Implementing a Show Function No-Op
251 Extracting a Hook
252 A Touch of CSS
253 Fixing Edge Snaps
The Path – Lerna
254 The Path Moving Forward
255 Planning Local Architecture
256 An Easy Solution
257 What’s the App Look Like in the Future
258 Package Based Development
259 Introducing Lerna
260 Disclaimer on Lerna
261 Lerna Setup
262 Adding Modules with Lerna
263 Linking Packages
264 Adding TypeScript Support
265 Adding TypeScript to the CLI
266 Finishing TS Support
267 Parallel Start Scripts
CLI
268 Reading Command Line Arguments
269 Using Commander to Build a CLI
270 Specifying Command Line Options
271 Communication from the CLI to the API
272 What’s that Directory Argument
273 Calculating File Paths
Local API
274 The Local API
275 Adding Dependencies and Running Express
276 Error Handling Where
277 Wrapping Express Listen with a Promise
278 Error Handling Solution
279 Accessing the React App
280 Connecting the Proxy
281 Building a Production Bundle
282 Understanding Package Links
283 What’s the Path
284 Which Method Do We Use
285 Determining Our Execution Environment
286 A Quick Test
287 Creating the Cells Router
288 Writing Cells to a File
289 Reading File Contents
290 Default Cell Values
291 Adding a JSON Parser
Fetching Cells
292 Adding Fetch Cell Logic to Redux
293 The Fetch Cells Action Creator
294 Handling Fetch Cell Types
295 Saving a List of Cells
296 When to Call Fetch
297 Saving a List of Cells
298 Adding a Persist Middleware
299 Detecting When to Save
300 Debouncing Save Logic
Publishing
301 The Path to NPM Publishing
302 Bootstrapping the Project
303 A Touch More Setup
304 Getting Ready to Publish
305 Configuring the CLI
306 Publishing to NPM
307 NPM Organizations
308 Declaring Scoped Packages
309 Refactoring Package Names
310 Auditing Dev Dependencies
311 Adding Build Scripts
312 The Case for Bundling
313 Running ESBuild
314 Creating a Repository
315 Publishing with Lerna
316 Does it Work
317 Next Steps
Appendix TypeScript
318 Quick Note
319 TypeScript Overview
320 Environment Setup
321 A First App
322 Executing TypeScript Code
323 One Quick Change
324 Catching Errors with TypeScript
325 Catching More Errors!
326 Course Overview
327 Types
328 More on Types
329 Examples of Types
330 Where Do We Use Types
331 Type Annotations and Inference
332 Annotations with Variables
333 Object Literal Annotations
334 Annotations Around Functions
335 Understanding Inference
336 The Any Type
337 Fixing the Any Type
338 Delayed Initialization
339 When Inference Doesn’t Work
340 More on Annotations Around Functions
341 Inference Around Functions
342 Annotations for Anonymous Functions
343 Void and Never
344 Destructuring with Annotations
345 Annotations Around Objects
346 Arrays in TypeScript
347 Why Typed Arrays
348 Multiple Types in Arrays
349 When to Use Typed Arrays
350 Tuples in TypeScript
351 Tuples in Action
352 Why Tuples
353 Interfaces
354 Long Type Annotations
355 Fixing Annotations with Interfaces
356 Syntax Around Interfaces
357 Functions In Interfaces
358 Code Reuse with Interfaces
359 General Plan with Interfaces
360 Classes
361 Basic Inheritance
362 Class Method Modifiers
363 Fields in Classes
364 Fields with Inheritance
365 Where to Use Classes
366 App Overview
367 Parcel in Action
368 Project Structure
369 Generating Random Data
370 Type Definition Files
371 Using Type Definition Files
372 Export Statements in TypeScript
373 Defining a Company
374 Adding Google Maps Support
375 Google Maps Integration with TypeScript
376 Exploring Type Definition Files
377 Hiding Functionality
378 Why Use Private Modifiers Here’s Why
379 Adding Markers
380 Duplicate Code
381 One Possible Solution
382 Restricting Access with Interfaces
383 Implicit Type Checks
384 Showing Popup Windows
385 Updating Interface Definitions
386 Optional Implements Clauses
387 App Wrapup
Up-load.io
1. react-typescript-build-portfolio-project.part01.rar
2. react-typescript-build-portfolio-project.part02.rar
3. react-typescript-build-portfolio-project.part03.rar
4. react-typescript-build-portfolio-project.part04.rar
5. react-typescript-build-portfolio-project.part05.rar
6. react-typescript-build-portfolio-project.part06.rar
7. react-typescript-build-portfolio-project.part07.rar
8. react-typescript-build-portfolio-project.part08.rar
Google Drive
1. react-typescript-build-portfolio-project.part01.rar
2. react-typescript-build-portfolio-project.part02.rar
3. react-typescript-build-portfolio-project.part03.rar
4. react-typescript-build-portfolio-project.part04.rar
5. react-typescript-build-portfolio-project.part05.rar
6. react-typescript-build-portfolio-project.part06.rar
7. react-typescript-build-portfolio-project.part07.rar
8. react-typescript-build-portfolio-project.part08.rar
![[C] Roadmap Pengembang Web Junior hingga Senior Lengkap (2021)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXLL7DMPlTQuCylK_1S7KdewO4w11Ok8VSJ_h7PV8U3AWiw7Iv3ejAQj-V7WPoewdUfGHKzvxnlGgKIjeKvLgsHzXy18MLE9uc1KuMXYraI9DYDVCuxBmhZ0z3d3ETVdoMtTsnQrAep0Y/w100-h80-c/web-developer-roadmap.jpg)
![[E] Medical Device Cybersecurity for Engineers and Manufacturers](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglCVepn3yA6Y883U7bu6boOFA2lmz9yc70_2TJ7CwZu6VtJCwfOot-eTvGtQ3qBY4n5hM7k2bWWCVFbUEfhFbm4DaS9a7cLn3rlV3Yvs6lMEyQLbXC3NMXGzxALx_X_OfCPOFgK60kj-Hr/w100-h80-c/medical-device-cybersecurity-engineers.jpg)
![[E] Agile Project Management For Dummies, 3rd Edition](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrTF6bmWfjSZNo73z63e1ASFxO0hDQdB2FesPQQ94zt0sHioUiSLTQNzb3U0vdh_EszY5iLRQA0N9jR0nSnNg3fu4OTr6aaJwg7iy4lW41lXZDVE93LMplQB2vYz_tk0PtPjw4vs9aENyv/w100-h80-c/agile-project-management-dummies-3rd.jpg)
![[C] Kursus Pengembang Android 11 Lengkap: Bangun aplikasi LUAR BIASA](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh130mDG1qdxWyHa28CyiJVynO4l53jYI4wVMVASxt-Rx06O2cWdNZV7tXujlDArFssbsTRevWuZzSX4G8vyr4837Lgd_U6xGn_riuu0Afax5GWs8K8d-BfA0ibJ8V_GfOdZT_c1_vntYFA/w100-h80-c/complete-android-11-developer-course.jpg)
![[E] Ubuntu Linux Bible, Edisi 10](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAoBAxdxjRBTCpkasAZf5re2CtEu_LxU1b2yRlsEyEGBXSxEJLxvJr1MiedOt8a6EkXb2a6MI05KsKRZatoET6IXCJ7rs8koFUB3JS6BrNvDJ5gLlH0CJYkF7p-nqo1EV6SyUsC6dnExG2/w100-h80-c/ubuntu-linux-bible-10th.jpg)
0 Please Share a Your Opinion.: