Register ·
Username: Password:  
· Password forgotten? ·
 

Ivanov Maksim, Bespoyasov Alex - Fullstack React with TypeScript (Revision r11) [2021, PDF/EPUB, ENG] + code

Reply to topic Home » Books and magazines » Computer literature » Web design and programming
DL-List and Torrent activity
Size:  79 MB   |    Registered:  3 years 1 month   |    Completed:  8 times
Seeders:  865  [  0 KB/s  ]   Leechers:  18  [  0 KB/s  ]   Show peers in full details
 
   
 
 
Author Message

Download WYSIWYG ®

Gender: Male

Longevity: 10 years

Posts: 1546

Post 17-May-2022 05:25

[Quote]

Fullstack React with TypeScript (Revision r11)
 Год издания: 2021
Автор: Ivanov Maksim, Bespoyasov Alex
Издательство: newline (Fullstack.io)
Язык: Английский
Формат: PDF/epub
Качество: Издательский макет или текст (eBook)
Интерактивное оглавление: Да
Количество страниц: 600
Описание: Revision r11 (26-03-2021)
  • Updated the react-dnd package in the first chapter
  • Introduced Immer for state management in the first chapter
  • Fixed typos and missing links
  • Replaced interfaces with types
  • Added a section about optimizing images in the fifth chapter
Welcome to Fullstack React with TypeScript! React and TypeScript are a powerful combination that can prevent bugs and help you (and your team) ship products faster. But understanding idiomatic React patterns and getting the typings setup isn’t always straightforward.
This practical, hands-on book is a guide that will have you (and your team) writing React apps with TypeScript (and hooks) in no time.
This book consists of several sections. Each section covers one practical case of using Typescript with React.
Your First React and Typescript Application: Building Trello with Drag and Drop: There you will learn how to bootstrap a React Typescript application and all the basics of using React with Typescript. We will build a kanban board application like Trello that will store it’s state on backend.
Testing React With TypeScript: Testing a Digital-Goods Store:. In this section you will set up your testing environment and learn how to test your application. We will take an online store application and cover it with tests.
Patterns in React Typescript Applications: Making Music with React: Making Music with React. Here we cover Higher Order Components (HOCs) and render props React patterns. We show when are they useful and how to use them with Typescript. In this section we will build a virtual piano that supports different sound sets.
Next.js and Static Site Generation: Building a Medium-like Blog Building Medium with SSG. React can be rendered server-side. It allows to create multi-page interactive websites. In this section we cover the basics of server-side generation with React and then we build an advanced application using NextJS framework. The example application will be blogging platform (like Medium).
State Management With Redux and Typescript. (coming soon – Summer 2020) Some React applications are so complex that they require using some external state management library. Redux is a solid choice in this case. It is worth learning how to use it with Typescript. In this section we will build a drawing application with undo/redo support. It will also let you save your drawings on backend.
VI GraphQL With React And Typescript. (coming soon – Summer 2020) GraphQL is a query language that allows to create flexible APIs. Facebook, Github, Twitter and a lot of other companies provide GraphQL APIs. Typescript works pretty well with GraphQL. In this section we will build a Github issue viewer.

Примеры страниц

Оглавление

Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Join Our Discord Channel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Be notified of updates via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
How To Get The Most Out Of This Book . . . . . . . . . . . . . . . . . . . . 2
What is TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Why Use TypeScript With React . . . . . . . . . . . . . . . . . . . . . . . . . 9
A Necessary Word Of Caution . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Your First React and TypeScript Application: Building Trello with Drag
and Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
What Are We Building? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Preview The Final Result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
How to Bootstrap React + TypeScript App Automatically . . . . . . . . . . 17
App Layout. React + TypeScript Basics . . . . . . . . . . . . . . . . . . . . . . 30
Create The Card Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Render Children Inside The Columns . . . . . . . . . . . . . . . . . . . . . . 50
Component For Adding New Items. State, Hooks, and Events . . . . . . . . 52
Render Everything Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Add Global State And Business Logic . . . . . . . . . . . . . . . . . . . . . . 69
Using the useReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Implement State Management . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Adding Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Moving Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Implement The Custom Dragging Preview . . . . . . . . . . . . . . . . . . . 114
Move The Dragged Item Preview . . . . . . . . . . . . . . . . . . . . . . . . . 120
Hide The Default Drag Preview . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Drag Cards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Update CustomDragLayer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Update The Reducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Drag the Card To an Empty Column . . . . . . . . . . . . . . . . . . . . . . . 133
Saving State On Backend. How To Make Network Requests . . . . . . . . . 135
Loading The Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
How to Test Your Applications: Testing a Digital Goods Store . . . . . . . . 157
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Initial Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Writing Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Testing React Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Congratulations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Patterns in React TypeScript Applications: Making Music with React . . . 237
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
What We’re Going to Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
What We’re Going to Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
First Steps and Basic Application Layout . . . . . . . . . . . . . . . . . . . . 239
A Bit of a Music Theory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Third Party API and Browser API . . . . . . . . . . . . . . . . . . . . . . . . . 257
Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Creating a Keyboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Playing a Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Mapping Real Keys to Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Instruments List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Render Props . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Higher Order Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
Using Redux and TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
What Are We Building? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Preview The Final Result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
What is Redux? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Why Can’t We Use useReducer Instead of Redux? . . . . . . . . . . . . . . . 337
Initial Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Prepare The Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Working With Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Handling Canvas Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Define The Store Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Add Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Add The Reducer Logic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Define The First Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Use The Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Dispatch Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Draw The Current Stroke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Implement Selecting Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
Implement Undo and Redo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Splitting Root Reducer And Using combineReducers . . . . . . . . . . . . . 366
Exporting An Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Using Redux Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379
Configuring The Store . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380
Using createAction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381
Using createReducer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
Using Slices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Remake The Imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Save And Load Data Using Thunks . . . . . . . . . . . . . . . . . . . . . . . . 394
Add Modal Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
Add The Modal Manager Component . . . . . . . . . . . . . . . . . . . . . . 397
Save The Project Using Thunks . . . . . . . . . . . . . . . . . . . . . . . . . . 401
Load The Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
Define The ProjectsList Module . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Static Site Generation and Server-Side Rendering Using Next.js . . . . . . . 413
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
What We’re Going to Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Pre-Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
Next.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Setting Up a Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Creating A First Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
Basic Application Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
Center Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
Footer Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424
Custom App Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Application Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Custom Document Component . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Site Front Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Page 404 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438
Post Page Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Backend API Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Frontend API Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444
Updating The Main Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
Pre-Render Post Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452
Category Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
Adding Breadcrumbs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463
Comments and Server-Side Rendering . . . . . . . . . . . . . . . . . . . . . . 464
Add Comments to Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
API for Adding Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Adding Comments on Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Converting Statically Generated Page to Rendered on Server . . . . . . . . 474
Connecting Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Optimizing Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Building Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 491
GraphQL, React, and TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 492
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492
Is GraphQL Better Than REST? . . . . . . . . . . . . . . . . . . . . . . . . . . 495
What Are We Building? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497
Preview The Final Result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 501
Setting Up The Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502
Running Typescript in The Console . . . . . . . . . . . . . . . . . . . . . . . . 502
Authenticating in GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Initializing The Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
Authentication Context . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
Authenticating The ApolloClient . . . . . . . . . . . . . . . . . . . . . . . . . 515
GraphQL Queries - Getting The User Data . . . . . . . . . . . . . . . . . . . 516
Add The Panel Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520
Define The WelcomeWindow Layout . . . . . . . . . . . . . . . . . . . . . . . 521
Getting GitHub GraphQL Schema . . . . . . . . . . . . . . . . . . . . . . . . 523
Generating The Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524
Adding Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525
Working With GitHub Repositories . . . . . . . . . . . . . . . . . . . . . . . . 528
Define The List Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
Getting The Repositories List . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533
Define Form Helper Components . . . . . . . . . . . . . . . . . . . . . . . . . 539
GraphQL Mutations - Creating The Repositories . . . . . . . . . . . . . . . . 543
Getting The Repository ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551
Working With GitHub Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
Getting The List Of Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
Creating An Issue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560
Working With Github Pull Requests . . . . . . . . . . . . . . . . . . . . . . . 568
Getting The Pull Requests List . . . . . . . . . . . . . . . . . . . . . . . . . . . 571
Creating A New Pull Request . . . . . . . . . . . . . . . . . . . . . . . . . . . 575
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587
Appendix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589
Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Revision r11 (26-03-2021) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Revision r10 (03-03-2021) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Revision r9 (26-02-2021) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Revision r8 (17-02-2021) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Revision r7 (01-12-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590
Revision r6 (01-12-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Revision r5 (10-11-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Revision r4 (26-08-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Revision 3p (07-30-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Revision 2p (06-08-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
Revision 1p (05-20-2020) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591
[only-soft.org].t165095.torrent
Torrent: Registered [ 2022-05-17 05:25 ] · 6148506A2F951E538A67C652D736C10316F4BAA3

187 KB
Status: √ checked
Completed: 8 times
Size: 79 MB
Rate: 
(Vote: 0)
Have thanked: 0  Thanks
Ivanov Maksim, Bespoyasov Alex - Fullstack React with TypeScript (Revision r11) [2021, PDF/EPUB, ENG] + code download torrent for free and without registration
[Profile] [PM]

Forum Topic Author Size
Web design and programming Ivanov Maksim, Bespoyasov Alex - Fullstack React with TypeScript (Revision r10) [2021, PDF/EPUB, ENG] + code Download WYSIWYG 78 MB
Display posts:    
Reply to topic Home » Books and magazines » Computer literature » Web design and programming

Current time is: 11-Jul 04:28

All times are UTC + 2



You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum