Blueprint for building React web applications with TypeScript and Webpack
React for SharePoint developers
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.
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 including CSS files in the generated bundle
- 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 ito install all dependencies
- next, still in the command line, run
typings installto install all TypeScript typings required by TypeScript
- start the sample application by running in the command line
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