Typescript + React Setup

Typescript and React setup steps:

1. npm init
2. npm install typescript -g (if it was not already installed globally)
3. npm install typescript (ts-loader needs a local version of typescript installed in the project)
4. tsc --init
5. Example tsconfig.json

{
  "compilerOptions": {
"target": "es5",                       
"jsx": "react", // Important                       
  }
}

6. npm install --save react react-dom @types/react @types/react-dom
7. npm install --save-dev ts-loader webpack webpack-cli
8. Sample webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  devtool: 'inline-source-map',
  module: {
rules: [
  {
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
  }
]
  },
  resolve: {
extensions: [ ".tsx", ".ts", ".js" ]
  },
  output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
  }
};

9. Add script to package.json:

"build": "webpack"

10. Sample index.tsx file:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Hello } from './components/Hello';

ReactDOM.render(<Hello name="Anand" age={34} />, document.getElementById('app'));

11. Sample Hello.tsx file:

import * as React from 'react';

interface HelloProps {
name: string;
age: number;
}

export class Hello extends React.Component<HelloProps, {}> {
render() {
return (
<div>Hello there! You are {this.props.name} and you are {this.props.age} years old!</div>
);
}
}

12. Sample index.html file:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ReactJS + TypeScript</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>

Comments

  1. Dawid123October 31, 2025 at 1:44 AM

    Great insights on setting up React efficiently! The step-by-step guide makes it easier for beginners to start building powerful web applications. For businesses aiming to create scalable and interactive interfaces, it’s wise to Hire ReactJS Developers who can deliver optimized and high-performing solutions.

    ReplyDelete

Post a Comment

Popular posts from this blog

Set Up Babel and Webpack

1. Create a project directory and cd in to that directory from the terminal 2. Initiate npm: npm init -y 3. Install webpack and webpack-cli npm i webpack --save-dev npm i webpack-cli --save-dev 4. Add webpack command under scripts in package.json "build": "webpack --mode production" 5. Install babel and babel loader npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev 6. Create .babelrc file and configure it { "presets": ["@babel/preset-env", "@babel/preset-react"] } To run / test async code .baelrc file should be: { "presets": [ [   "@babel/preset-env", { "targets": {   "node": "current" }   } ] ] } 7. Create webpack.config.js file and configure it const path = require('path'); module.exports = {   entry: path.resolve(__dirname, 'src'),   output: {         path: path.resolve(__dirnam...
Read more

Typescript Setup

Typescript: 1. Install typescript: npm install typescript 2. Command to convert a typescript file(*.ts) to a javascript file (*.js) tsc file_name.ts 3. Initialize npm npm init 4. Install lite-server npm install lite-server --save-dev 5. Add a script command to package.json to start the lite-server "start": "lite-server" 5. Initialize tsc tsc --init Add the following to the tsconfig.json if it doesn't exist already: "sourceMap": true, "exclude": [ "node_modules" ] 6. To compile all typescript files to javascript simply run: tsc 7. For Modules npm install --save-dev ts-loader webpack webpackconfig.js: const path = require('path'); module.exports = {   entry: './index.ts',   devtool: 'inline-source-map',   module: { rules: [   { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/   } ]   }, ...
Read more