Explore what React, Node, TypeScript, Webpack, and Docker have to offer individually, and how they all fit together in modern app development. React is one of the most popular web development tools available today, and Node.js is extremely popular for server-side development. The fact that both utilize JavaScript is a big selling point, but as developers use the language more, they begin to recognize the shortcomings, and that’s where TypeScript comes in and why it’s gaining in popularity quickly. Add Webpack and Docker to the mix, and you’ve got a potent full development stack on which to build applications. You’ll begin by building a solid foundation of knowledge and quickly expand it by constructing two different real-world apps. These aren’t just simple, contrived examples but real apps that you can choose to install on your servers and use for real. By the end, you will have a solid grasp of building apps with React, Node.js, and TypeScript and a good grasp on how Webpack can be used to optimize and organize your code for deployment. You’ll also understand how Docker can be used to run the apps you build in a clear and well-defined way, all of which will be able to springboard you into creating more advanced apps on your own. What You'll Learn Get a project started and logically structure it Construct a user interface with React and Material-UI Use WebSockets for real-time communication between client and server Build a REST API with Node and Express as another approach to client-server communication Package the app with Webpack for optimized delivery Take a completed app and wrap it up with Docker for easy distribution Review a host of other ancillary topics including NPM, Semantic versioning, Babel, NoSQL, and more Who This Book Is For Web developers with basic knowledge of HTML, JavaScript, CSS, and CLI tools who are interested in and in all aspects of application development, and using TypeScript instead of straight JavaScript.
Author(s): Frank Zammetti
Publisher: Apress
Year: 2020
Language: English
Pages: 373
Table of Contents
About the Author
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Server-Side Action: Node and NPM
Of JavaScript Runtimes and Building (Mostly) Servers
First Baby Steps with Node: Installation
More Useful: Executing JavaScript Source Files
Node’s Partner in Crime: NPM
A Few More NPM Commands
Initializing a New NPM/Node Project
Adding Dependencies
A Quick Aside: Semantic Versioning
Fisher Price’s “My First Node Web Server”
Bonus Example
Summary
Chapter 2: A Few More Words: Advanced Node and NPM
NPM: More on package.json
NPM: Other Commands
Auditing Package Security
Deduplication and Pruning
Finding/Searching for Packages sans Browser
Updating Packages
Publishing/Unpublishing Packages
Node: Standard Modules
File System (fs)
HTTP and HTTPS (http and https)
OS (os)
Path (path)
Process
Query Strings (querystring)
URL (url)
Utilities (util)
The Rest of the Cast
Summary
Chapter 3: Client-Side Adventures: React
A Brief History of React
Yeah, Okay, History Nerd, That’s All Great, but What IS React?!
The Real Star of the Show: Components
Components Need Info: Props
Components (Sometimes) Need Memory: State
Making Them Look Good: Style
In the End, Why React?
Summary
Chapter 4: A Few More Words: Advanced React
A Better Way to Write React Code: JSX
Yeah, Okay, So What Does It LOOK LIKE?!
A Slight Detour into Babel Land
Compile JSX
And Now, Put It All Together
Whither Props?
Default Props
Typing Props
Component Lifecycle
Summary
Chapter 5: Building a Strong Foundation: TypeScript
What Is TypeScript?
Jumping into the Deep End
Beyond the Playground
Configuring TypeScript Compilation
The Nitty Gritty: Types
String
Number
Boolean
Any
Arrays
Tuples
Enums
Function
Object
Null, Void, and Undefined
Custom Type Aliases
Union Types
TypeScript == ES6 Features for “Free”!
The let and const Keywords
Block Scope
Arrow Functions
Template Literals
Default Parameters
Spread and Rest (and as an Added Bonus: Optional Arguments)
Destructuring
Classes
Properties
Member Visibility
Inheritance
Getters and Setters
Static Members
Abstract Classes
Summary
Chapter 6: A Few More Words: Advanced TypeScript
Interfaces
Argument/Object Interfaces
Methods in Interfaces
Interfaces and Classes
Extending Interfaces
Namespaces and Modules
Namespaces
Modules
Decorators
Decorator Factories
Third-Party Libraries
Debugging TypeScript Apps
Source Maps
Summary
Chapter 7: Tying It Up in a Bow: Webpack
What’s a Bundle, and How Do I Make One?
What’s Webpack All About?
Dependency Graph
Entry
Output
Loaders
Plugins
Modes
Browser Compatibility
Getting Started with Webpack
Getting More Complex
Configuration
Using Modules
Wither TypeScript?
Summary
Chapter 8: Delivering the Goods: MailBag, the Server
What Are We Building?
Basic Requirements
Setting Up the Project
Source File Rundown
Adding Node Modules
Adding Types
A More Convenient Development Environment
The Starting Point: main.ts
A Quick Detour: Time to Take a REST
URLs for Fun and Profit
Giving Methods Meaning
Data Format Smackdown
A Bonus Pillar: Response Status Codes
Another Quick Detour: Express, for Fun and Profit
Back to the Code!
REST Endpoint: List Mailboxes
REST Endpoint: List Messages
REST Endpoint: Get a Message
REST Endpoint: Delete a Message
REST Endpoint: Send a Message
REST Endpoint: List Contacts
REST Endpoint: Add Contact
REST Endpoint: Delete Contact
Gotta Know What We’re Talking to: ServerInfo.ts
Time to Send the Mail: smtp.ts
A Quick Detour: Nodemailer
Another Quick Detour: Generics
Back to the Code!
Worker.sendMessage()
Time to Get the Mail (and Other Stuff): imap.ts
A Quick Detour: emailjs-imap-client and mailparser
Back to the Code!
Worker.listMailboxes()
Worker.listMessages()
Worker.getMessageBody()
Worker.deleteMessage()
Reach Out and Touch Someone: contacts.ts
A Quick Detour: NoSQL
Another Quick Detour: NeDB
Back to the Code!
Worker.listContacts()
Worker.addContat()
Worker.deleteContact()
Testing It All
Optional Tooling
Suggested Exercises
Summary
Chapter 9: Delivering the Goods: MailBag, the Client
What Are We Building?
Basic Requirements
Setting Up the Project
Source File Rundown
The Starting Point: index.html
The Starting Point, Redux: main.tsx
A Quick Detour: State’ing the Obvious
Back to the Code!
A Bit of Configuration: config.ts
A Worker for All Seasons
A Quick Detour: AJAX
Getting Some Help: Axios
Mirroring the Server Part 1: Contacts.ts
Listing Contacts
Adding a Contact
Deleting a Contact
Mirroring the Server Part 2: IMAP.ts
Listing Mailboxes
Listing Messages
Getting the Body of a Message
Deleting a Message
Mirroring the Server Part 3: SMTP.ts
A Cavalcade of Components
A Quick Detour: Material-UI
Another Quick Detour: CSS Grid
Yet Another Quick Detour: main.css
BaseLayout.tsx
A Quick Detour: Functional Components
Toolbar.tsx
MailboxList.tsx
ContactList.tsx
ContactView.tsx
MessageList.tsx
MessageView.tsx
WelcomeView.tsx
Suggested Exercises
Summary
Chapter 10: Time for Fun: BattleJong, the Server
What Are We Building?
Basic Requirements
Setting Up the Project
Some tsconfig.json Changes
Adding Node Modules
Adding Types
Source File Rundown
The Starting Point (the ONLY Point, in Fact!): server.ts
A Quick Detour: WebSockets
Back to the Code!
Serving the Client: The Express Server
Handling Messages: The WebSocket Server and Overall Game Design
Message: “match”
Message: “done”
Finishing Up the WebSocket Server
Of Tiles and Board Layouts
Shuffling the Board
Suggested Exercises
Summary
Chapter 11: Time for Fun: BattleJong, the Client
What Are We Building?
Basic Requirements
Setting Up the Project
Some tsconfig.json Changes
Some webpack.config.js Changes
Adding Libraries
Adding Types
Source File Rundown
The Starting Point: index.html
The REAL Starting Point: main.tsx
The Basic Layout: BaseLayout.tsx
Feedback and Status: ControlArea.tsx
Scores
Game State Messages
Where the Action Is: PlayerBoard.tsx
A Quick Detour: Custom-Type Definitions
Back to the Code!
The Render Process
Talking to the Server: socketComm.ts
Handling Server-Sent Messages
Sending Messages to the Server
The Main Code: state.ts
A Few Interface for Good Measure
The Beginning of the State Object
A Quick Detour: TypeScript-Type Assertions
Back to the Code!
Message Handler Methods
The Big Kahuna: tileClick()
Helper Function: canTileBeSelected()
Helper Function: anyMovesLeft()
Suggested Exercises
Summary
Chapter 12: Bringing the Dev Ship into Harbor: Docker
An Introduction to Containers and Containerization
The Star of the Show: Docker
Installing Docker
Your First Container: “Hello, World!” of Course!
A Quick Rundown of Key Docker Commands
Listing Images
Listing Containers
Starting (and Stopping) Containers
Remove Containers and Images
Pulling Images
Searching for Images
Attaching to a Container
Viewing Container Logs
Creating Your Own Image
Deploying to Docker Hub
Wrapping Up MailBag and BattleJong
Suggested Exercises
Summary
Index
