In this article, let's create a React template project, it involves ReactJS, TypeScript, Webpack.
https://github.com/markliu2013/react-template-ts
Create a folder and initialize NPM
npm init -y
Install React
npm i react react-dom
Install Webpack
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin
Install TypeScript
npm i -D typescript ts-loader @types/node @types/react @types/react-dom
Create src folder and index.html, App.tsx, index.ts
Create file webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
path: path.join(__dirname, '/dist'), // the bundle output path
filename: 'main.js' // the name of the bundle
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html' // to import index.html file inside index.js
})
],
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.css']
},
devServer: {
port: 3035 // you can change the port
},
module: {
rules: [
{
test: /\.(ts|tsx)$/, // .js and .jsx files
exclude: /node_modules/,
use: {
loader: 'ts-loader'
}
}
]
}
};
Create file tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"target": "ES6",
"module": "ESNext",
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true,
"sourceMap": true,
"baseUrl": ".",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
"paths": {
"*": ["node_modules/*"],
"@assets/*": ["./assets/*"],
"@src/*": ["./src/*"]
}
},
"include": ["src/**/*", "tools/**/*"]
}
Add script in package.json
"build": "webpack --mode production"
"dev": "webpack serve --mode development",
Run Project
npm run dev
npm run build
We use ts-loader in the project now, it can be changed to babel-loader instead.
Install babel-loader
npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.ts',
output: {
path: path.join(__dirname, '/dist'), // the bundle output path
filename: 'main.js' // the name of the bundle
},
resolve: {
modules: [__dirname, 'src', 'node_modules'],
extensions: ['*', '.js', '.jsx', '.tsx', '.ts']
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html' // to import index.html file inside index.js
})
],
devServer: {
port: 3035 // you can change the port
},
module: {
rules: [
{
test: /\.(js|ts)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
tsconfig.js
{
"compilerOptions": {
// Emit Configuration
"noEmit": true,
// Type Checking Configuration
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"exactOptionalPropertyTypes": true,
"noFallthroughCasesInSwitch": true,
"noImplicitThis": true,
"noPropertyAccessFromIndexSignature": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitOverride": true,
"noImplicitAny": true,
"noImplicitReturns": true,
// Strict Rules - v4.8
"alwaysStrict": true,
"strictBindCallApply": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"useUnknownInCatchVariables": true,
// Modules Configuration
"baseUrl": "./",
"module": "ES2022",
"moduleResolution": "node",
// Language and Environment Configuration
"target": "ES2022",
"jsx": "react-jsx",
// JavaScript Support Configuration
"allowJs": true,
"checkJs": true,
// Interop Constraints Configuration
"esModuleInterop": true,
"isolatedModules": true
},
"include": ["src/**/**/*"],
"exclude": ["node_modules"]
}
Create file babel.config.json
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
"@babel/preset-typescript"
]
}
Next Step, Setup Eslint and Prettier
https://dev.to/markliu2013/setup-eslint-and-prettier-in-react-3h99
Top comments (0)