Blueprint for building React web applications with TypeScript and Webpack

React is a powerful JavaScript library for building rich user interfaces. Here is a blueprint that you can use to easily build your first web application using React and TypeScript.

React for SharePoint developers

Recently Microsoft announced the SharePoint Framework - a new model for building SharePoint customizations. SharePoint Framework allows you to use any JavaScript framework you want to build client-side Web Parts and Applications. Microsoft is building the standard SharePoint functionality using the SharePoint Framework and they use React with TypeScript as the framework of their choice. This time around Microsoft committed to share the source code of the user experiences they build for us to benefit of. But before you do, you have to learn how to use React and TypeScript.

The good news is, that even though the SharePoint Framework isn’t available just yet, you can already start learning how to build web applications with React and TypeScript. Here is how.

Easily getting started with React, TypeScript and Webpack

Recently I published a blueprint for building React solutions using Webpack for bundling. Using the blueprint you can easily start building your first web application with React.

Even though using TypeScript with the SharePoint Framework isn’t required, Microsoft suggests you consider it. TypeScript extends JavaScript syntax and helps you discover any inconsistencies in your code while building your project rather than on runtime.

Over the last few months I’ve been working on another project, where we use Angular and TypeScript. More than once, thanks to TypeScript, we were able to easily spot inconsistencies in our code that would go unnoticed otherwise.

There are a few things that you need to take care of in order to use TypeScript with Regular. To save you the trouble I created a blueprint that allows you to directly start building your React TypeScript web application.

The blueprint is available on GitHub and contains:

• React and ReactDOM references for building React classes and adding them to the DOM
• Webpack configuration for transpiling React TypeScript to JavaScript and bundling the different React classes together
• Webpack configuration for including CSS files in the generated bundle
• all dependencies required by Webpack to transpile React TypeScript to JavaScript
• npm tasks for starting the Webpack dev server for running the web application on your dev machine and building an optimized version of the bundle
• TypeScript typings for React and ReactDOM

To start building your first web application using React and TypeScript all you need to do is:

• clone the repository
• in the command line run npm i to install all dependencies
• next, still in the command line, run typings install to install all TypeScript typings required by TypeScript
• start the sample application by running in the command line npm start

The main application file is located in app/index.tsx. This is the file that you would start editing and extending with additional components of your web application. All other components referenced in app/index.tsx and other React classes will be automatically picked up by webpack and included in the generated bundle.

The sample web application doesn’t contain any references to the Flux architecture. Instead it’s meant to quickly get you started with React, TypeScript and Webpack.

Get the blueprint from https://github.com/waldekmastykarz/react-webpack-typescript-blueprint