How to create a React project with TypeScript

In my last article we saw how can we begin to migrate a JavaScript project to TypeScript, in a incremental manner, without making great efforts or breaking changes. Now, I would like to talk about using TypeScript in a new frontend project. More specifically, I’d like to show you how to create a React project with TypeScript.

How to create a React project with TypeScript

Normally, when talking about frontend and TypeScript, one immediately thinks in Angular; while React is usually associated with JavaScript. So even, when looking for tutorials or any problem solving about React, most of the examples and solution come in JS. To change that, we prepared a working example of an app using React-Redux with TypeScript.

If you are not new to React, you most likely are familiar with create-react-app, a react project starter developed directly by Facebook, that gives us the chance to start an app in practically no-time, since it hides most of the build configuration. If not, it can be a good idea to give it a shot and try to make some simple app with it.

Yet, if you want to have the same, this time with TypeScript, you can check this great project starter that does the same (in fact, it also uses create-react-app), but with TypeScript. You can follow the readme provided with it, to learn a lot about React, Redux, and of course, TypeScript.

Nevertheless, it does not cover all of the components that are need to start a fully functional project. Because of this, we prepared a project that includes some more functionality (and adds some common dependencies, such as react-router-dom, per example), from which you can learn more about how React works:

React – TS demo 
(You can clone the project and follow the short readme file to run it)

This simple app has the most common features that a developer runs into when creating a project from scratch. Therefore, you can use it as an example or a start point from which make your own decisions or look for alternatives; main parts being:

1. Routing

– We use react-router-dom 
– ‘routes.tsx’ shows how to use routing and how to use parameters in the URL
– ‘item.page.tsx’ shows how to receive a parameter from the URL

2. SCSS support

-We use node-sass-chokidar 
-‘navbar.scss’ is an example of a sass file
-‘navbar.component.tsx’ is an example of how to import the styling from the file above

3. Bind store’s state and dispatch to the props of a component

-‘list.container.ts’ is an example of that binding

4. Loader flag

-With an action creator in ‘item.actions.ts’, we set a boolean in our store’s state as a flag in ‘item.reducer.ts’ to represent the application’s state of loading
-‘list.page.tsx’ uses this value to render the UI differently depending on flag value

5. Http requests to Backend

-‘item.service.ts’ contains all the requests to backend and returns item entities
-Inside our application, we use Item objects (see ‘item.ts’) instead of plain JS objects

6. Testing

-We use jest [link: https://www.npmjs.com/package/jest]
-You will find examples of testing different layers under the folder ‘/tests’

7. Typescript

-There is no single .js file in the project

The purpose of this repo is to provide a big enough of a project to cover the main concepts of a frontend application and provide a sandbox where to try and experiment with the technologies and libraries used, while adding new functionality or changing and improving the existing one. Hopefully, the complexity of it is simple enough to allow to anyone to understand the concepts with minimal effort and research.