PabloRosales JavaScript Developer

React with TypeScript: Bare Bones


In this short tutorial we will create a Bare Bones React app with TypeScript.


Getting Started: Dependencies and Configuration Files

Let's start with a basic package.json, this is the one used in the first part of the code samples:

Now that we have our package.json lets install our development dependencies, I'll explain why we'll use them as we build up, running in the shell:

And our dependencies for the project:

Your package.json should now look something like this:

Going over our dependencies

Lets go over each dependency:

typescript Included as a peer dependency for tslint and other packages that use typescript.

tslint This will allow us to lint (check for errors without compilation) our TypeScript code.

webpack Our module bundler, will be used for TypeScript, CSS and HTML, plus hot module reloading and some more.

webpack-cli To run webpack from the command line with our configs.

ts-loader Our TypeScript loader for webpack.

html-webpack-plugin For the creation of our HTML file that will include our CSS and JS bundles.

css-loader and style-loader Used to load our CSS files from webpack, recommended together.

file-loader Used to load our assets from webpack, like images, fonts, etc.

webpack-dev-server Used to server our project on development mode without needing to rebuild.

@types/react and @types/react-dom All our React and ReactDom definitions for TypeScript.

You can read the documentation of each one if you want more specifics.

This packages will allow us to have a basic Webpack setup with React and TypeScript.

Check out the sample code for this part at GitHub.

Our TypeScript and TSLint Configs

This is still a work in progress, come back later tomorrow!

Made with by PR