React App Configuration with TypeScript and Webpack

A step-by-step guide on how to create a React project from scratch, with TypeScript and Webpack. You can find the full source code . here Setup Prerequisites: node yarn Create the project's folder: mkdir react-app cd react-app Generate a default file with yarn: package.json yarn init -y Install React, TypeScript and Webpack: yarn add react react-dom yarn add --dev @types/react \ @types/react-dom \ awesome-typescript-loader \ css-loader \ html-webpack-plugin \ node-sass \ sass-loader \ style-loader \ typescript \ webpack \ webpack-cli \ webpack-dev-server Add build, dev & clean scripts in the file: package.json .... }, : { : , : , : } "scripts" "clean" "rm -rf dist/*" "build" "webpack" "dev" "webpack serve" Configure TypeScript by creating the file with: tsconfig.json { : { : , : , : , : [ , , ], : , : , : , : , : , : , : , : , : , : , : }, : [ ], : [ , , ] } "compilerOptions" "incremental" true "target" "es5" "module" "commonjs" "lib" "dom" "dom.iterable" "es6" "allowJs" true "jsx" "react" "sourceMap" true "outDir" "./dist/" "rootDir" "." "removeComments" true "strict" true "moduleResolution" "node" "allowSyntheticDefaultImports" true "esModuleInterop" true "experimentalDecorators" true "include" "client" "exclude" "node_modules" "build" "dist" To configure Webpack, make a file containing: webpack.config.js path = ( ); app_dir = __dirname + ; HtmlWebpackPlugin = ( ); HTMLWebpackPluginConfig = HtmlWebpackPlugin({ : app_dir + , : , : }); config = { : , : app_dir + , : { : __dirname + , : , : }, : { : [{ : , : [ , , ] }, { : , : , : }, { : , : [ ], : }, { : , : [ ], : }, { : , : [ ], : , : { : , }, }, ] }, : [HTMLWebpackPluginConfig], : { : [ , , , ] }, : { : , : , : , }, : { : , hot: , : , : , }, }; .exports = config; const require "path" const '/client' const require 'html-webpack-plugin' const new template '/index.html' filename 'index.html' inject 'body' const mode 'development' entry '/app.tsx' output path '/dist' filename 'app.js' publicPath '/' module rules test /\.s?css$/ use 'style-loader' 'css-loader' 'sass-loader' test /\.tsx?$/ loader "awesome-typescript-loader" exclude /(node_modules|bower_components)/ test /\.(woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/ exclude /node_modules/ loader "file-loader" test /\.(jpe?g|png|gif|svg)$/i exclude /node_modules/ loader "file-loader" test /\.(pdf)$/i exclude /node_modules/ loader "file-loader" options name '[name].[ext]' plugins resolve extensions ".ts" ".tsx" ".js" ".jsx" optimization removeAvailableModules false removeEmptyChunks false splitChunks false devServer port 8080 // open: true, true inline true historyApiFallback true module Example App Create a folder named (in the project's folder): client mkdir client cd client Make a simple React component, in the file : numbers.tsx React, {useState} ; interface INumberProps { : number } Numbers = { [value, setValue] = useState(props.initValue) onIncrement = { setValue(value + ) } onDecrement = { setValue(value - ) } ( + - ) } Numbers import from 'react' initValue const ( ) => props: INumberProps const const => () 1 const => () 1 return Number is {value} div div export default Create the main React component (the entry point), in the file : app.tsx * React ; * ReactDOM ; Numbers ; ReactDOM.render( import as from 'react' import as from 'react-dom' import from './numbers' , document.getElementById('app') as HTMLElement ); Numbers initValue {42} Next, add the : index.html React TypeScript html Then, run yarn dev and open in a browser. http://localhost:8080/ Use this project as a template You can save the steps as a shell script Setup rm -rf node_modules rm package.json yarn init --yes yarn add react react-dom yarn add --dev @types/react \ @types/react-dom \ awesome-typescript-loader \ css-loader \ html-webpack-plugin \ node-sass \ sass-loader \ style-loader \ typescript \ webpack \ webpack-cli \ webpack-dev-server # Remove the last line sed -i.bak package.json && rm package.json.bak # append the scripts commads cat > package.json , : { : , : , : } } #!/bin/sh '$ d' "scripts" "clean" "rm -rf dist/*" "build" "webpack" "dev" "webpack serve" Delete the folder and, when you want to start a new project, you can copy the contents of to the new location: node-modules react-app mkdir -project cd -project # copy the react-app folder content to the project rsync -rtv /path/to/../react-app/ . ./init.sh new new new Previously published at https://alexadam.dev/blog/create-react-project.html