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:
– 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
-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
-‘list.container.ts’ is an example of that binding
-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
-‘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
-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.