TypeScript is becoming an ever increasingly common choice of language to develop React and other types of apps. In this tutorial, we’ll build a simple Recipe search app using React and TypeScript. Code is available on GitHub: https://github.com/codebubb/react-recipe-typescript-tutorial React Project: Recipe Search App (using TypeScript) —————————————————————————— 00:00 Introduction 00:30 Project Overview 02:01 Setup, create react app TypeScript & proxy server 04:21 Overview of TypeScript React app 05:18 Creating the App Component 07:09 Typing the query argument 10:32 Connecting the search logic 16:51 Creating types 19:07 Creating a Recipe component 25:24 Styling 31:00 Review — Follow Me — Twitter: https://www.twitter.com/codebubb Facebook: https://www.facebook.com/juniordevelopercentral/ Blog: https://www.juniordevelopercentral.com/ — Thanks! — So in this React tutorial I’ll introduce you to how you can use TypeScript within your React apps. This isn’t a full-blown tutorial on TypeScript so I assume you have a bit of knowledge as to what TypeScript is and why you would want to use it. In the tutorial, we’ll be building a recipe search app with React but we’ll be using create-react-app to template our app with TypeScript. I’ll first show you a bit about the files and structure that create-react-app will scaffold for us and then we’ll dive in to getting data from a recipe API (recipepuppy.com) and adding types to the data in our functions that are making the calls. We’ll also look at how to cast types with TypeScript so that when we’re processing our form input from the user, we can make sure the TypeScript compiler knows about the types of form elements we’re working with. We’ll also take a look at how we can create our own types and interfaces in TypeScript so that we can specify how the data looks that is being returned from the API we are calling. You’ll see this is useful as the strongly typed data can be used throughout the rest of the app so that we can see exactly the structure of the data that is being used. Once we’ve got our components using our strongly typed data, we’ll then finish up the app by adding some basic styling. Hope you enjoy this React Redux tutorial focusing TypeScript! Let me know in the comments below what you think. Channel Handle @codebubb