Cuốn sách “React-Architect Full-Stack React App Development And Serverless Deployment” hướng dẫn một cách toàn diện cho bạn về cách giải quyết các vấn đề từ đầu đến cuối liên quan đến lập trình App Mobile. Bạn sẽ học cách viết mã của một ứng dụng đầy đủ. Và bạn sẽ học được những gì cần thiết để suy nghĩ và hành động như một nhà phát triển toàn diện.
MỤC LỤC
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1 Why Should I Even Bother With Full-Stack Development? . . . . . . . . . . 7
1.2 Who This Book Is For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.3 Book Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.4 Let’s Start Thinking Like a Full-Stack Developer . . . . . . . . . . . . . . . . . . 11
1.5 Programming Paradigm, Software Stack and Libraries . . . . . . . . . . . 15
2 Get Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1 Create the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2 Define the architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.3 Run your app locally and deploy it to AWS . . . . . . . . . . . . . . . . . . . . . . 23
2.4 Add a database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.5 Store the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.6 Display the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3 How Much Configuration Do You Need? . . . . . . . . . . . . . . . . 34
3.1 Is Create-React-App A Dead End? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2 Configuration Is Not a Developer’s Task . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.3 Why Don’t You Configure Your Infrastructure With React? . . . . . . . . . 42
3.4 The Common Language of Developers and System Engineers . . . 44
3.5 The Architecture-as-a-Function Paradigm . . . . . . . . . . . . . . . . . . . . . . 48
3.6 Which Architecture Is Right For My Project? . . . . . . . . . . . . . . . . . . . . . 50
4 Set Up An Infrastructure-Components-Based Project . . . 58
4.1 Set up your development environment . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.2 Create Project Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.2.1 Create Files Manually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.2.2 Use Template/ GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
4.2.3 The Infrastructure-Components-Configurator . . . . . . . . . . . . . . . . . . . . . . . . 64
4.3 Prepare Your AWS Account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4.3.1 Create A Technical User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4.3.2 Register A Custom Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.3.3 Verify An Email Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
4.4 Run The Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.4.1 Install . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.4.2 Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.4.3 Start Your App Offline In Hot-Development Mode . . . . . . . . . . . . . . . . . . . . 82
4.4.4 Start Your App Offline With Back-End Support . . . . . . . . . . . . . . . . . . . . . . . 82
4.4.5 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
4.4.6 Initialize Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
4.5 Remove An App From AWS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
4.6 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
5 Serverless Single-Page React App (SSPRA) . . . . . . . . . . . . . . 90
5.1 The Architecture Of An SSPRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
5.2 Create, Start, and Deploy An SSPRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
5.3 Serving Static Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
5.4 Styling the entries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
5.5 Advanced User Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
5.6 Local Component State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
5.7 Serving Different Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
5.8 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
6 Serverless Service-Oriented React App (SSORA) . . . . . . 120
6.1 The Architecture Of An SSORA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
6.2 Create, Start, And Deploy An SSORA . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
6.3 Advanced Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
6.4 File-Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
6.5 Working With Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
6.6 Using A Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
6.7 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
7 Serverless Isomorphic React App (SIRA) . . . . . . . . . . . . . . . . 165
7.1 The Architecture of an SIRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
7.2 Create, Start, and Deploy An SIRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
7.3 Server-Side Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
7.4 Request Preprocessing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
7.5 Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
7.6 Sending emails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
7.7 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
MỤC LỤC
1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.1 Why Should I Even Bother With Full-Stack Development? . . . . . . . . . . 7
1.2 Who This Book Is For . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.3 Book Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.4 Let’s Start Thinking Like a Full-Stack Developer . . . . . . . . . . . . . . . . . . 11
1.5 Programming Paradigm, Software Stack and Libraries . . . . . . . . . . . 15
2 Get Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1 Create the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2 Define the architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.3 Run your app locally and deploy it to AWS . . . . . . . . . . . . . . . . . . . . . . 23
2.4 Add a database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.5 Store the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.6 Display the data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3 How Much Configuration Do You Need? . . . . . . . . . . . . . . . . 34
3.1 Is Create-React-App A Dead End? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2 Configuration Is Not a Developer’s Task . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.3 Why Don’t You Configure Your Infrastructure With React? . . . . . . . . . 42
3.4 The Common Language of Developers and System Engineers . . . 44
3.5 The Architecture-as-a-Function Paradigm . . . . . . . . . . . . . . . . . . . . . . 48
3.6 Which Architecture Is Right For My Project? . . . . . . . . . . . . . . . . . . . . . 50
4 Set Up An Infrastructure-Components-Based Project . . . 58
4.1 Set up your development environment . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.2 Create Project Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.2.1 Create Files Manually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
4.2.2 Use Template/ GitHub . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
4.2.3 The Infrastructure-Components-Configurator . . . . . . . . . . . . . . . . . . . . . . . . 64
4.3 Prepare Your AWS Account . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4.3.1 Create A Technical User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
4.3.2 Register A Custom Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.3.3 Verify An Email Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
4.4 Run The Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.4.1 Install . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.4.2 Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.4.3 Start Your App Offline In Hot-Development Mode . . . . . . . . . . . . . . . . . . . . 82
4.4.4 Start Your App Offline With Back-End Support . . . . . . . . . . . . . . . . . . . . . . . 82
4.4.5 Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
4.4.6 Initialize Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
4.5 Remove An App From AWS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
4.6 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
5 Serverless Single-Page React App (SSPRA) . . . . . . . . . . . . . . 90
5.1 The Architecture Of An SSPRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
5.2 Create, Start, and Deploy An SSPRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
5.3 Serving Static Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
5.4 Styling the entries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
5.5 Advanced User Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
5.6 Local Component State . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
5.7 Serving Different Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
5.8 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
6 Serverless Service-Oriented React App (SSORA) . . . . . . 120
6.1 The Architecture Of An SSORA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
6.2 Create, Start, And Deploy An SSORA . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
6.3 Advanced Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
6.4 File-Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
6.5 Working With Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
6.6 Using A Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
6.7 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
7 Serverless Isomorphic React App (SIRA) . . . . . . . . . . . . . . . . 165
7.1 The Architecture of an SIRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
7.2 Create, Start, and Deploy An SIRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
7.3 Server-Side Rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
7.4 Request Preprocessing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
7.5 Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
7.6 Sending emails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
7.7 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
