book

Learn React with TypeScript - Second Edition

by Carl Rippon

March 2023

Intermediate to advanced

474 pages

8h 54m

English

Packt Publishing

Read now

Unlock full access

ContributorsAbout the authorAbout the reviewer
Who this book is forWhat this book coversTo get the most out of this bookDownload the example code filesDownload the color imagesConventions usedGet in touchShare Your ThoughtsDownload a free PDF copy of this book
Technical requirementsUnderstanding the benefits of ReactUnderstanding JSXCreating a componentCreating a CodeSandbox projectUnderstanding the React entry pointUnderstanding the React component treeCreating a basic alert componentUnderstanding imports and exportsUnderstanding the importance of modulesUsing export statementsUsing import statementsAdding Alert to the App componentUsing propsUnderstanding propsAdding props to the alert componentUsing stateUnderstanding stateImplementing a visible state in the alert componentAdding a close button to AlertUsing eventsUnderstanding eventsImplementing a close button click handler in the alertImplementing an alert close eventSummaryQuestionsAnswers
Technical requirementsUnderstanding the benefits of TypeScriptUnderstanding TypeScriptCatching type errors earlyImproving developer experience and productivity with IntelliSenseUnderstanding JavaScript typesUsing basic TypeScript typesUsing type annotationsUsing type inferenceUsing the Date typeUsing the any typeUsing the unknown typeUsing the void typeUsing the never typeUsing arraysCreating TypeScript typesUsing object typesCreating type aliasesCreating interfacesCreating classesCreating enumerationsCreating union typesUsing the TypeScript compilerSummaryQuestionsAnswers
Technical requirementsCreating a project with webpackIntroducing webpackCreating the folder structureCreating package.jsonAdding a web pageAdding TypeScriptAdding ReactAdding BabelAdding webpackCreating a project with Create React AppUsing Create React AppAdding linting to Visual Studio CodeAdding code formattingStarting the app in development modeProducing a production buildCreating a React and TypeScript componentAdding a props typeAdding a state typeUsing React DevToolsSummaryQuestionsAnswers
Technical requirementsUsing the effect HookUnderstanding the effect Hook parametersThe rules of HooksEffect cleanupCreating the projectFetching data using the effect HookUsing state HooksUsing useStateUnderstanding useReducerUsing useReducerUsing the ref HookUnderstanding the ref HookUsing the ref HookUsing the memo HookUnderstanding the memo HookUsing the memo HookUsing the callback HookUnderstanding the callback HookUnderstanding when a component is re-renderedUsing the callback HookSummaryQuestionsAnswers
Technical requirementsUsing plain CSSCreating the projectUnderstanding how to reference CSSUsing plain CSS in the alert componentExperiencing CSS clashesUsing CSS modulesUnderstanding CSS modulesUsing CSS modules in the alert componentUsing CSS-in-JSUnderstanding CSS-in-JSUsing Emotion in the alert componentUsing Tailwind CSSUnderstanding Tailwind CSSInstalling and configuring Tailwind CSSUsing Tailwind CSSUsing SVGsUnderstanding how to use SVGs in ReactAdding SVGs to the alert componentSummaryQuestionsAnswers
Technical requirementsIntroducing React RouterCreating the projectUnderstanding React RouterInstalling React RouterDeclaring routesCreating the products list pageUnderstanding React Router’s routerDeclaring the products routeCreating navigationUsing the Link componentUsing the NavLink componentUsing nested routesUnderstanding nested routesUsing nested routes in the appUsing route parametersUnderstanding route parametersUsing route parameters in the appCreating an error pageUnderstanding error pagesAdding an error pageUsing index routesUnderstanding index routesUsing an index route in the appUsing search parametersUnderstanding search parametersAdding search functionality to the appNavigating programmaticallyUsing form navigationImplementing lazy loadingUnderstanding React lazy loadingAdding a lazy admin page to the appSummaryQuestionsAnswers

Technical requirementsUsing controlled fieldsCreating the projectCreating a contact formUsing uncontrolled fieldsUsing React Router FormUsing native validationUsing React Hook FormUnderstanding React Hook FormUsing React Hook FormAdding validationSummaryQuestionsAnswers
Technical requirementsCreating the projectUsing prop drillingUsing React contextUnderstanding React contextUsing React contextUsing ReduxUnderstanding ReduxInstalling ReduxUsing ReduxSummaryQuestionsAnswers
Technical requirementsCreating the projectSetting up the projectUnderstanding the component structureCreating a REST APIUsing the effect hook with fetchGetting blog posts using fetchStrongly typing response dataCreating a blog posts list componentCreating a blog posts page componentPosting data with fetchCreating new blog posts using fetchCreating a blog post form componentUsing React RouterUnderstanding React Router data loadingUsing React Router for data loadingDeferred React Router data fetchingUsing React QueryInstalling React QueryAdding the React Query providerGetting data using React QueryUpdating data using React QueryUsing React Router with React QuerySummaryQuestionsAnswers
Technical requirementsUnderstanding the GraphQL syntaxReturning flat dataReturning hierarchical dataSpecifying query parametersGraphQL mutationsSetting up the projectCreating the projectCreating a PAT for the GitHub GraphQL APICreating environment variablesUsing React Query with fetchCreating the headerCreating the repository pageUsing Apollo ClientUnderstanding Apollo ClientInstalling Apollo ClientRefactoring the App componentRefactoring the Header componentRefactoring the repository pageSummaryQuestionsAnswers
Technical requirementsCreating the projectUsing generic propsUnderstanding genericsCreating a basic list componentUsing props spreadingUsing render propsUnderstanding the render props patternAdding a renderItem propAdding checked functionalityCreating custom hooksUnderstanding custom hooksExtracting checked logic into a custom hookAllowing the internal state to be controlledUnderstanding how the internal state can be controlledAllowing checkedIds to be controlledSummaryQuestionsAnswers
Technical requirementsTesting pure functionsUnderstanding a Jest testTesting isCheckedTesting exceptionsRunning testsTesting componentsUnderstanding React Testing LibraryImplementing checklist component testsUsing test IDsSimulating user interactionsUnderstanding fireEvent and user-eventImplementing checklist tests for checking itemsGetting code coverageRunning code coverageUnderstanding the code coverage reportGaining full coverage on the checklist componentIgnoring files in the coverage reportSummaryQuestionsAnswers
Other Books You May EnjoyPackt is searching for authors like youShare Your ThoughtsDownload a free PDF copy of this book

Overview

"Learn React with TypeScript" is your complete guide to mastering both React 18 and TypeScript for modern web development. In this book, you'll gain practical knowledge on building scalable and maintainable web applications with React and how to utilize TypeScript to ensure type safety and powerful features for catching bugs early. Perfect for developers aiming to elevate their skills.

What this Book will help me do

Master the integration of React 18 and TypeScript to create dynamic and scalable web applications.
Learn and apply React Hooks to manage state and effects in your applications effectively.
Explore and implement state management techniques using Redux to handle complex scenarios.
Interact confidently with REST and GraphQL APIs to integrate backends seamlessly into your applications.
Design and implement reusable, type-safe components for cleaner and more maintainable codebases.

Author(s)

Carl Rippon is a seasoned web developer with extensive experience in both React and TypeScript. Having worked in the industry for over a decade, he has contributed to numerous large-scale web applications and mentored developers in mastering these technologies. Carl brings a clear and practical approach to teaching, making complex concepts accessible to learners of all levels.

Who is it for?

This book is ideal for frontend developers who want to advance their skills in building scalable, robust web applications using React and TypeScript. It caters to developers who have a basic understanding of JavaScript, HTML, and CSS and are looking to expand their expertise into modern JavaScript frameworks and type-safe programming. A great fit for both self-learners and professionals enhancing their skillset for modern development challenges.