This project is a simple template project developed by Clemex Technologies for bootstrapping new React/Redux applications using TypeScript. We started from the TypeScript React Starter from Microsoft.
The project contains the source code for a simple counter application that demonstrates the usage of React, Redux, Redux-Form, Redux-Logger, Material-UI, and React-UI all written in TypeScript. This was inspired by the Counter project by Leyka a simple app which increments or decrements a counter using React/Redux which is based on the React/Redux counter example.
React is a very powerful UI creation framework for JavaScript applications, and Redux is a useful and simple state management system for JavaScript applications.
At Clemex we have found that React and Redux works very well with TypeScript, but it is not always obvious what the best practices are and what libraries work best with this stack for production code.
There are a couple of pre-existing React/Redux/TypeScript starters and template projects such as the TypeScript React Starter we started from, but we wanted to create a starter kit that more closely resembled a real production development stack, and that contained a template example for new programmers onboarding on our team.
After cloning the repository from GitHub use the command npm install to install all of the tools and dependencies.
The command npm run start will compile and launch the project in your browser at the location http://localhost:3000/ with a watcher which will rebuild the proje1ct whenever any source file is changed.
This project demonstrates the use of the following libraries in TypeScript:
- React - UI Front-end
- React Intl - Application internationalization support
- Redux - Centralized state management
- Redux Form - Form state management via Redux
- Redux Logger - Redux logger middleware
- Material UI - React components that implement Google's Material Design
At Clemex we are using the following development tools:
- NPM : Node Package Manager
- Node : JavaScript runtime built on Chrome's V8 JavaScript engine
- TypeScript : Statically typed Javascript that compiles to plain Javascript
- TS-Lint : Linter for the TypeScript language
- Webpack : Let you bundle JavaScript files for usage in a browser (needed for React)
- Jest : Test all JavaScript code including React applications
- React Developer Tools for Chrome
- Redux DevTools for Chrome
- Visual Studio Code : Source code editor by Microsoft for Windows, Linux and macOS