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 the DOM re-rendering and browser idiosyncrasies to React’s Virtual DOM and diff’ing algorithm.

Typescript is developed and maintained by Microsoft and it’s best described as JavaScript with an optional Type system. It’s a complete superset of JavaScript, which means that every bit of JavaScript code you’ve written is already valid Typescript code. I was initially skeptical about using Typescript since it adds another layer into our technology stack, but having used it daily for the past year has convinced me of how awesome it is. The type system makes your code sturdier and more resilient because you’ll get to detect errors during compilation as opposed to runtime. Many popular 3rd party libraries have released Typescript definition files via Definitely Typed which means that you can download and use these definition files with Typescript. Many text editors and IDE’s (i.e. Atom, Eclipse, etc) can leverage these definition files to allow awesome features like…

--

--

Willson Mock

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