# Best way react-webpack2-typescript-hmr # Easy way [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript) ``` npm install -g create-react-app create-react-app my-app --scripts-version=react-scripts-ts cd my-app/ npm start ``` # Hard way ## references http://blog.tomduncalf.com/posts/setting-up-typescript-and-react/ https://javascriptplayground.com/blog/2017/04/react-typescript/ ## steps ### install typescript globally > npm install -g typescript ### setup new project ``` > mkdir project-name > cd project-name > git init > nano .gitignore node_modules dist npm-debug.log >npm init -y ``` ### init typescript ``` > npm i -D typescript > tsc --init ``` Edit `tsconfig.json`: ``` { "compilerOptions": { "module": "es6", "target": "es6", "moduleResolution": "node", "baseUrl": "src", "allowSyntheticDefaultImports": true, "noImplicitAny": false, "sourceMap": true, "outDir": "ts-build", "jsx": "preserve" }, "exclude": [ "node_modules" ] } ``` ### add react & react-dom ``` > npm i -S react > npm i -D @types/react > npm i -S react-dom > npm i -D @types/react-dom ``` ### setup up Webpack and Babel ``` > npm i -D webpack webpack-notifier > npm i -D ts-loader > npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 > nano .babelrc { "presets": ["es2015", "react"] } > mkdir config > nano `config/webpack.config.js` const webpack = require('webpack') const path = require('path') module.exports = { // put sourcemaps inline devtool: 'eval', // entry point of our application, within the `src` directory (which we add to resolve.modules below): entry: [ 'index.tsx' ], // configure the output directory and publicPath for the devServer output: { filename: 'app.js', publicPath: 'dist', path: path.resolve('dist') }, // configure the dev server to run devServer: { port: 3000, historyApiFallback: true, inline: true, }, // tell Webpack to load TypeScript files resolve: { // Look for modules in .ts(x) files first, then .js extensions: ['.ts', '.tsx', '.js'], // add 'src' to the modules, so that when you import files you can do so with 'src' as the relative route modules: ['src', 'node_modules'], }, module: { loaders: [ // .ts(x) files should first pass through the Typescript loader, and then through babel { test: /\.tsx?$/, loaders: ['babel-loader', 'ts-loader'], include: path.resolve('src') } ] }, } ``` add scripts to `package.json` ``` "scripts": { "build": "webpack --config config/webpack.config.js", "start": "webpack-dev-server" } ``` ### defining globabls https://blog.johnnyreilly.com/2016/07/using-webpacks-defineplugin-with-typescript.html