In this short tutorial we will create a Bare Bones React app with TypeScript.
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:
package.json should now look something like this:
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.
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-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.
This is still a work in progress, come back later tomorrow!
Made with by PR