Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
React 18 Design Patterns and Best Practices - Fourth Edition
React 18 Design Patterns and Best Practices - Fourth Edition

React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications with React by leveraging industry-best practices, Fourth Edition

By Carlos Santana Roldán
$35.99 $9.99
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5 (2 Ratings)
Book Jul 2023 524 pages 4th Edition
eBook
$35.99 $9.99
Print
$44.99
Subscription
$15.99 Monthly
eBook
$35.99 $9.99
Print
$44.99
Subscription
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon AI Assistant (beta) to help accelerate your learning
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Jul 31, 2023
Length 524 pages
Edition : 4th Edition
Language : English
ISBN-13 : 9781803233109
Vendor :
Facebook
Category :
Table of content icon View table of contents Preview book icon Preview Book

React 18 Design Patterns and Best Practices - Fourth Edition

Introducing TypeScript

This chapter assumes that you have prior experience with JavaScript and are interested in improving the quality of your code by learning TypeScript. TypeScript is a typed superset of JavaScript that compiles to JavaScript. In other words, TypeScript is essentially JavaScript with some additional features.

Designed by Anders Hejlsberg, the creator of C# at Microsoft, TypeScript is an open-source language that enhances the capabilities of JavaScript. By introducing static typing and other advanced features, TypeScript helps developers write more reliable and maintainable code.

In this chapter, we will explore the features of TypeScript and how to convert existing JavaScript code to TypeScript. By the end of this chapter, you will have a solid understanding of TypeScript’s benefits and how to leverage them to create more robust and scalable applications.

In this chapter, we will cover the following topics:

  • TypeScript’s features
  • Convert JavaScript code into TypeScript
  • Types
  • Interfaces
  • Extending interfaces and types
  • Implementing interfaces and types
  • Merging interfaces
  • Enums
  • Namespaces
  • Template literal types
  • TypeScript configuration file

Technical requirements

To work through the contents of this chapter, you will need the following:

  • Node.js 19+
  • Visual Studio Code

TypeScript’s features

TypeScript, a popular open-source programming language developed and maintained by Microsoft, is rapidly gaining popularity among developers worldwide. It was introduced as a superset of JavaScript, aiming to facilitate larger-scale applications while enhancing code quality and maintainability. TypeScript leverages static typing and compiles to clean, simple JavaScript code, ensuring compatibility with existing JavaScript environments.

This robust language brings a host of powerful features that set it apart and make it an appealing choice for many programmers. Notably, TypeScript infuses strong typing into JavaScript, providing better error checking and reducing runtime bugs. Moreover, it fully supports object-oriented programming with advanced features like classes, interfaces, and inheritance.

Since any valid JavaScript code is also TypeScript, transitioning from JavaScript to TypeScript can be done gradually, with developers introducing types to their codebase progressively. This makes TypeScript a flexible, scalable solution for both small and large-scale projects.

In this section, we will summarize the essential features of TypeScript that you should take advantage of:

  • TypeScript is JavaScript: TypeScript is a superset of JavaScript, which means that any JavaScript code you write will work with TypeScript. If you already know how to use JavaScript, you have all the knowledge you need to use TypeScript. You just need to learn how to add types to your code. All TypeScript code is transformed into JavaScript in the end.
  • JavaScript is TypeScript: This just means that you can rename any valid .js file with the .ts extension, and it will work.
  • Error checking: TypeScript compiles the code and checks for errors, which helps identify issues before running the code.
  • Strong typing: By default, JavaScript is not strongly typed. With TypeScript, you can add types to all your variables and functions, and even specify the return value types.
  • Object-oriented programming supported: TypeScript supports advanced concepts such as classes, interfaces, inheritance, and more. This allows for better organization of code and enhances its maintainability.

After having discussed the key features of TypeScript, let us delve into a practical demonstration of converting JavaScript code into TypeScript.

Converting JavaScript code into TypeScript

In this section, we will see how to transform some JavaScript code into TypeScript.

Let’s suppose we have to check whether a word is a palindrome. The JavaScript code for this algorithm will be as follows:

function isPalindrome(word) {
  const lowerCaseWord = word.toLowerCase()
  const reversedWord = lowerCaseWord.split('').reverse().join('')
  return lowerCaseWord === reversedWord
}

You can name this file palindrome.ts.

As you can see, we are receiving a string variable (word), and we are returning a boolean value. So, how will this be translated into TypeScript?

function isPalindrome(word: string): boolean {
  const lowerCaseWord = word.toLowerCase()
  const reversedWord = lowerCaseWord.split('').reverse().join('')
  return lowerCaseWord === reversedWord
}

You’re probably thinking, “Great, I just specified the string type as word and the boolean type to the function returned value, but now what?”

If you try to run the function with some value that is different from string, you will get a TypeScript error:

console.log(isPalindrome('Level')) // true
console.log(isPalindrome('Anna')) // true
console.log(isPalindrome('Carlos')) // false
console.log(isPalindrome(101)) // TS Error
console.log(isPalindrome(true)) // TS Error
console.log(isPalindrome(false)) // TS Error

So, if you try to pass a number to the function, you will get the following error:

Graphical user interface, text, application  Description automatically generated

Figure 2.1: Type number is not assignable to parameter of type string

That’s why TypeScript is very useful, because it will force you to be stricter and more explicit with your code.

Types

In the last example, we saw how to specify some primitive types for our function parameter and returned value, but you’re probably wondering how you can describe an object or array with more details. Types can help us to describe our objects or arrays in a better way. For example, let’s suppose you want to describe a User type to save the information into the database:

type User = {
  username: string
  email: string
  name: string
  age: number
  website: string
  active: boolean
}
const user: User = {
  username: 'czantany',
  email: 'carlos@milkzoft.com',
  name: 'Carlos Santana',
  age: 33,
  website: 'http://www.js.education',
  active: true
}
// Let's suppose you will insert this data using Sequelize...
models.User.create({ ...user }}

We get the following error if we forget to add one of the nodes or put an invalid value in one of them:

Text  Description automatically generated

Figure 2.2: Age is missing in type User but is required

If you need optional nodes, you can always put a ? next to the age of the node, as shown in the following code block:

type User = {
  username: string
  email: string
  name: string
  age?: number
  website: string
  active: boolean
}

You can name type as you want, but a good practice to follow is to add a prefix of T. For example, the User type will become TUser. In this way, you can quickly recognize that it is type and you don’t get confused thinking it is a class or a React component.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Discover and unpack the latest React 18 and Node 19 features in this updated fourth edition
  • Get up to speed with TypeScript, MonoRepo architecture, and several cutting-edge React tools
  • Learn from plenty of real-world examples and an improved chapter flow

Description

  • React helps you work smarter, not harder — but to reap the benefits of this popular JavaScript library and its components, you need a straightforward guide that will teach you how to make the most of it.
  • React 18 Design Patterns and Best Practices will help you use React effectively to make your applications more flexible, easier to maintain, and improve their performance, while giving your workflow a huge boost. With a better organization of topics and knowledge about best practices added to your developer toolbox, the updated fourth edition ensures an enhanced learning experience.
  • The book is split into three parts; the first will teach you the fundamentals of React patterns, the second will dive into how React works, and the third will focus on real-world applications. All the code samples are updated to the latest version of React and you’ll also find plenty of new additions that explore React 18 and Node 19’s newest features, alongside MonoRepo Architecture and a dedicated chapter on TypeScript.
  • By the end of this book, you'll be able to efficiently build and deploy real-world React web applications.

What you will learn

  • Get familiar with the new React 18 and Node 19 features
  • Explore TypeScript's basic and advanced capabilities
  • Make components communicate with each other by applying various patterns and techniques
  • Dive into MonoRepo architecture
  • Use server-side rendering to make applications load faster
  • Write a comprehensive set of tests to create robust and maintainable code
  • Build high-performing applications by styling and optimizing React components

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon AI Assistant (beta) to help accelerate your learning
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Jul 31, 2023
Length 524 pages
Edition : 4th Edition
Language : English
ISBN-13 : 9781803233109
Vendor :
Facebook
Category :

Table of Contents

20 Chapters
Preface Chevron down icon Chevron up icon
1. Taking Your First Steps with React Chevron down icon Chevron up icon
2. Introducing TypeScript Chevron down icon Chevron up icon
3. Cleaning Up Your Code Chevron down icon Chevron up icon
4. Exploring Popular Composition Patterns Chevron down icon Chevron up icon
5. Writing Code for the Browser Chevron down icon Chevron up icon
6. Making Your Components Look Beautiful Chevron down icon Chevron up icon
7. Anti-Patterns to Be Avoided Chevron down icon Chevron up icon
8. React Hooks Chevron down icon Chevron up icon
9. React Router Chevron down icon Chevron up icon
10. React 18 New Features Chevron down icon Chevron up icon
11. Managing Data Chevron down icon Chevron up icon
12. Server-Side Rendering Chevron down icon Chevron up icon
13. Understanding GraphQL with a Real Project Chevron down icon Chevron up icon
14. MonoRepo Architecture Chevron down icon Chevron up icon
15. Improving the Performance of Your Applications Chevron down icon Chevron up icon
16. Testing and Debugging Chevron down icon Chevron up icon
17. Deploying to Production Chevron down icon Chevron up icon
18. Other Books You May Enjoy Chevron down icon Chevron up icon
19. Index Chevron down icon Chevron up icon

Customer reviews

Filter icon Filter
Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Half star icon Empty star icon 3.5
(2 Ratings)
5 star 0%
4 star 50%
3 star 50%
2 star 0%
1 star 0%

Filter reviews by


N/A Jan 25, 2024
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
Feefo Verified review Feefo image
Bladimir Ventura Nov 30, 2023
Full star icon Full star icon Full star icon Empty star icon Empty star icon 3
I am still waiting for my physical books. It has passed almost a month since I bought them.
Feefo Verified review Feefo image
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.