A Template for TypeScript Projects using React and Redux
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 and added several libraries and a more complete example application.
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 in turn was based on the React/Redux counter example.
You can try out this sample project here.
Motivation
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 yet obvious what libraries work best with this stack for production code, and what the best practices are for producing scalable code. This project has served as a test bed for us when developing new features, and experimenting with different techniques.
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 our development stack and that would make it easier for new team members to onboard.
Building and Running the Project
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 project whenever any source file is changed.
You can use npm run build to create a production build. For more build options take a look at the package.json file.
Libraries
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
Development Tools
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
Contributing
If you find any issues or have ideas for improvements we would love to hear from you. You can either log an issue/improvement, or submit a pull request.
Additional Resources
Here are some useful links for learning specifically more about TypeScript, React, and Redux on the internet.
- TypeScript React Starter from Microsoft
- TypeScript React Conversion Guide from Microsoft
- Static Typing in React & Redux using TypeScript by Piotr Witek
- Typesafe Action Creation for Redux by Piotr Witek
- TypeScript Guide for Material UI Next from Material UI
- React JavaScript to TypeScript Transform from Lyft
- Getting Started with React and TypeScript by Jack Franklin
- TypeScript, React, and Redux by Matt Greer
- TypeScript at Slack by Felix Rieseberg
- TypeScript at Lyft by Mohsen Azimi