This is the code repository for Learn React with TypeScript - Second Edition, published by Packt.
A beginner's guide to reactive web development with React 18 and TypeScript
- What is this book about?
- Documentation
- Getting Started
- Chapter Guide
- What You'll Learn
- Software and Hardware List
- Contributing
- Additional Resources
- Get to Know the Author
- Download a free PDF
Reading, navigating, and debugging a large frontend codebase is a major issue faced by frontend developers. This book is designed to help web developers like you learn about ReactJS and TypeScript, both of which power large-scale apps for many organizations.
This book covers the following exciting features:
- Gain first-hand experience of TypeScript and its productivity features
- Understand how to transpile your TypeScript code into JavaScript for running in a browser
- Build a React frontend codebase with hooks
- Interact with REST and GraphQL web APIs
- Design and develop strongly typed reusable components
- Create automated component tests
If you feel this book is for you, get your copy today!
This repository includes comprehensive documentation to help you learn and use the examples:
- ABOUT.md - Detailed information about this repository, learning paths, and contribution guidelines
- QUICK_START.md - Get started quickly with installation, running examples, and troubleshooting
- EXAMPLES.md - Complete guide to all examples in this repository
- Chapter READMEs - Detailed documentation for each chapter (see below)
New to the repository? Here's your path to success:
- Learn About This Project: Read the ABOUT.md for context and learning paths
- Quick Start: Follow the QUICK_START.md guide for immediate setup
- Browse Examples: Check out EXAMPLES.md for a complete overview
- Explore Chapters: Navigate to any chapter folder and read its README
- Join the Community: Star the repo and engage in discussions
- Node.js (v16.0.0 or later)
- npm or yarn
- Basic knowledge of JavaScript and HTML/CSS
# Navigate to any chapter example
cd Chapter4/Section1-Using-the-effect-hook
# Install dependencies
npm install
# Start the development server
npm startEach chapter has its own comprehensive README with detailed explanations, code examples, and best practices:
| Chapter | Topic | README |
|---|---|---|
| Chapter 1 | Introducing React | View README |
| Chapter 2 | Introducing TypeScript | View README |
| Chapter 3 | Setting Up React and TypeScript | View README |
| Chapter 4 | Using React Hooks | View README |
| Chapter 5 | Approaches to Styling React Components | View README |
| Chapter 6 | Routing with React Router | View README |
| Chapter 7 | Working with Forms | View README |
| Chapter 8 | State Management | View README |
| Chapter 9 | Interacting with RESTful APIs | View README |
| Chapter 10 | Interacting with GraphQL APIs | View README |
| Chapter 11 | Reusable Components | View README |
| Chapter 12 | Unit Testing with Jest and React Testing Library | View README |
All of the code is organized into folders. For example, Chapter02.
The code will look like the following:
class Product {
constructor(public name: string, public unitPrice:
number) {
this.name = name;
this.unitPrice = unitPrice;
}
}
By working through the examples in this repository, you'll learn:
- React Fundamentals: Components, JSX, props, state, and events
- TypeScript Basics: Types, interfaces, generics, and type safety
- React Hooks: useState, useEffect, useContext, and custom hooks
- Styling: CSS, CSS Modules, CSS-in-JS, and Tailwind CSS
- Routing: React Router for multi-page applications
- Forms: Controlled/uncontrolled components and validation
- State Management: Context API and Redux
- Data Fetching: REST APIs with fetch and React Query
- GraphQL: Apollo Client and GraphQL queries/mutations
- Reusable Components: Generic props, render props, and custom hooks
- Testing: Jest and React Testing Library
Following is what you need for this book: This book is for experienced frontend developers looking to build large scale web applications using React and TypeScript. Intermediate knowledge of JavaScript, HTML and CSS is a prerequisite.
With the following software and hardware list you can run all code files present in the book (Chapter 1-12).
| Chapter | Software/Hardware required | OS required |
|---|---|---|
| 1-12 | Google Chrome | Windows, Mac OS X, and Linux |
| 1-12 | Node.js and npm | Windows, Mac OS X, and Linux |
| 1-12 | Visual Studio Code | Windows, Mac OS X, and Linux |
| 1-12 | React 18.0 or later | Windows, Mac OS X, and Linux |
| 1-12 | TypeScript 4.7 or later | Windows, Mac OS X, and Linux |
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.
- Page 137: In Step 7, React.tsx should be Reset.tsx
- Page 302, In Step 5,
if '!('ti'le' in post)) {
throw new Err"r("post do'sn't contain ti"le");
}
if (typeof post.title !'= 'str'ng') {
throw new Err'r('title is not a str'ng');
}
if '!('descript'on' in post)) {
throw new Err"r("post do'sn't contain descript"on");
}
if (typeof post.description !'= 'str'ng') {
throw new Err'r('description is not a str'ng');
}
should be
if (!("title" in post)) {
throw new Error("post doesn't contain title");
}
if (typeof post.title !== "string") {
throw new Error("title is not a string");
}
if (!("description" in post)) {
throw new Error("post doesn't contain description");
}
if (typeof post.description !== "string") {
throw new Error("description is not a string");
}
Found an issue or have a suggestion? Contributions are welcome!
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -am 'Add new feature') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
- React Documentation: https://react.dev
- TypeScript Documentation: https://www.typescriptlang.org
- React Router: https://reactrouter.com
- Redux Toolkit: https://redux-toolkit.js.org
- TanStack Query (React Query): https://tanstack.com/query
- Testing Library: https://testing-library.com
This repository and the accompanying book would not be possible without:
- The React Team at Meta for creating and maintaining React
- The TypeScript Team at Microsoft for TypeScript
- The Open Source Community for the incredible ecosystem of tools and libraries
- All Contributors who have helped improve this repository
- Packt Publishing for supporting this project
- Readers and Learners who provide feedback and help make this resource better
Special thanks to everyone who has starred, forked, or contributed to this repository!
Carl Rippon has been in the software industry for over 20 years developing complex lines of business applications in various sectors. He has spent the last 8 years building single-page applications using a wide range of JavaScript technologies including Angular, ReactJS, and TypeScript. He has also written over 100 blog posts on various technologies.
If you have already purchased a print or Kindle version of this book, you can get a DRM-free PDF version at no cost.
Simply click on the link to claim your free PDF.
https://packt.link/free-ebook/9781804614204
- 📖 Documentation: Check ABOUT.md, QUICK_START.md, and EXAMPLES.md
- 🐛 Issues: Found a bug? Open an issue
- 💡 Discussions: Have questions? Start a discussion
- ⭐ Star this repo: Show your support by starring this repository
- 🔀 Fork and Contribute: Help improve the examples and documentation
If you find this repository helpful:
- ⭐ Star the repository to show your support
- 👁️ Watch for updates and new content
- 🍴 Fork to create your own version
- 📢 Share with others who might benefit
Made with ❤️ by the React and TypeScript community
Happy coding! 🚀