Getting Started with ReactJS, Typescript, and Webpack

Willson Mock
8 min readMar 21, 2016

Recently at work, I’ve been working on transitioning our web application from Typescript, Angular, Bower and Gulp to Typescript, ReactJS, NPM, and Webpack. After scouring the internet, I found lots of articles documenting how to get started with React and Webpack, but very few integrating Typescript as well. In this tutorial, I want to briefly describe these technologies and how to get started using all 3 of them together. So let’s get started!

For those of you who want to dive in and see the final version of the code, check it out here!

Brief prelude about why ReactJS, why Typescript, and why Webpack

Before I get into meat of this tutorial, I want to briefly describe these technologies and why you might want to use them together.

ReactJS is a library released by Facebook and unlike other JavaScript frameworks out there (i.e. Angular, Backbone, Ember, etc), it’s goal is to simply represent the “View” layer in the traditional Model View Controller (MVC) paradigm. Having used other frameworks at my work place in the past, including Backbone / Marionette and Angular, I have to say that using React has been refreshingly simple and a joy to write code with. In particular, I’ve really enjoyed how I can describe how the UI should be and leave…

--

--

Willson Mock

I’m an avid learner, and I write about web technologies, personal fitness, and other fun stuff. http://willsonmock.com