Project 89 of 100 - Spinning Up Your First Typescript Project with React

Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to today's deployed app: Link

Ok just a short post today. But I'm getting back into it. I promise. If it kills me, I'm going to finish the #100days100projects challenge by the end of the year.

In my job I use Typescript in a React web application with Redux. I didn't know TS until I started the job, but now I work in it every day.

It's pretty hard getting started when all you know is vanilla JS. After a while though you realize it's really useful for large applications because you're less likely to accidentally publish mistakes in your applications. And that means your users will experience fewer bugs. TS is also the industry standard nowadays so it pays to learn.

Here's your first step to learning Typescript- spinning up a Typescript React application. Head over to your terminal or console, and assuming you have npm and npx installed, the same way you would boot up a vanilla Create React App application, find a directory you like then do the following command in the terminal:

npx create-react-app my-ts-app --template typescript

That's it! You now have a working Typescript app and template. If you open it up and poke around, you'll see that you no longer have vanilla Javascript files in the src folder. Here's my directory:

When it comes time to build your application and get it ready for production, use npm build or yarn build to generate a production version of the application. At this juncture, your Typescript code will be compiled into simple Javascript. Here is the directory structure for the build folder:

If you like projects like this and want to stay up to date with more, check out my Twitter @jwhubert91, I follow back! See you tomorrow for another project.