How to create a React project with typescript?

Normally, when we talk about frontend and TypeScript, we immediately think of Angular , whereas React is most frequently associated with JavaScript . When looking for solutions or tutorials about React, most examples are based on JS. To change this, I have prepared an example that works from an app using React-Redux with TypeScript.

How to create a React project with typescript?
How to create a React project with typescript?

If you are not a newbie with React, you will probably be familiar with create-react-app, a project starter in React developed directly by Facebook and that gives us the option to start an app almost instantaneously, since it hides a large part of the configuration of build . If you are not familiar with React, I recommend that you give it a chance by perhaps making a simple app.

How to create a React project with typescript?

But if you want to use React but with TypeScript instead of JavaScript , you should take a look at this project starter that does the same (in fact, it also uses create-react-app), but with TypeScript. You can follow the readme file that comes attached and take the opportunity to learn a lot about React, Redux and, of course, TypeScript.

Even so, all the necessary components to start a fully functioning project are not covered. This is why I have prepared a project that adds functionalities (as well as some common dependencies, such as the react-router-dom , for example) from which you can learn more about how React works:

React – TS demo

(You can clone the project and follow the readme file to execute it)

This simple app has the most common characteristics that a developer finds when creating a project from 0. So, you can use it as an example or as a starting point from which to make your own decisions or look for alternatives, being its parts Main:

1. Routed

We use react-router-sun
‘Routes.tsx’ shows how to use the routing and parameters of 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 styles from the mentioned file.

3. Make binding of the status and dispatch of the Store with the Props of the component

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

4. Loader flag

With a creator of actions in ‘item.actions.ts’, we mark a boolean in the state of our store as a flag in ‘item.reducer.ts’ to represent the state of the application’s load

-‘list.page.tsx ‘uses this value to render the UI differently depending on the flag value

5. Http Requests to the Backend

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

6. Testing

-We use jest  -You’ll find
different examples of testing in different layers under the folder ‘/ tests’

7. Typescript

-There is not even a .js file in the whole project

The purpose of this “repo” is to provide a project large enough to cover the main concepts of a frontend application and offer a “sandbox” to test and experiment with the technologies and libraries used, while adding new functionalities or those that already exist are changed and improved.

Hopefully, its complexity is simple enough to allow anyone to understand their concepts with minimal effort.

Leave a Reply

Your email address will not be published. Required fields are marked *