A step-by-step guide on how to create a React project from scratch with TypeScript and . Vite You can find the full source code here: https://github.com/alexadam/project-templates/tree/master/projects/react-app-vite Setup Prerequisites: node ( ) https://nodejs.org/en/download/ yarn ( ) https://yarnpkg.com/getting-started/install 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 Vite: yarn add react react-dom

yarn add --dev @types/react \
        @types/react-dom \
        sass \
        typescript \
        @vitejs/plugin-react \
        vite Add build, dev, & clean scripts in the file: package.json ....
  },
  "scripts": {
    "clean": "rm -rf dist/*",
    "build": "vite --config vite.config.js build",
    "dev": "vite --config vite.config.js serve",
    "preview": "vite --config vite.config.js preview"
  } Configure TypeScript by creating the file with: tsconfig.json {
  "compilerOptions": {
    "incremental": true,
    "target": "es6",
    "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": [
    "./src"
  ],
  "exclude": [
    "./node_modules",
    "./build",
    "./dist"
  ]
} To configure Vite, make a file containing: vite.config.js import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(
    {
      include: '**/*.{ts,js,tsx}',
    }
  )],
  base: '',
  root: 'src',
  build: {
    outDir: '../dist',
  },
  server: {
    port: 8080
  },
  preview: {
    port: 8080
  }
}) Example App Create a folder named (in the project's folder): src mkdir src
cd src Make a simple React component in the file : numbers.tsx import React, {useState} from 'react';

interface INumberProps {
  initValue: number
}

const Numbers = (props: INumberProps) => {
  const [value, setValue] = useState(props.initValue)

  const onIncrement = () => {
    setValue(value + 1)
  }

  const onDecrement = () => {
    setValue(value - 1)
  }

  return (
    <div>
      Number is {value}
        <div>
          <button onClick={onIncrement}>+</button>
          <button onClick={onDecrement}>-</button>
        </div>
    </div>
  )
}
export default Numbers Create the main React component (the entry point) in the file : app.tsx import * as React from 'react';
import ReactDOM from "react-dom/client";
import Numbers from './numbers';
import './app.scss'

const App = () => {

  return (
    <Numbers initValue={42} />
  )
}

const root = ReactDOM.createRoot(document.getElementById("app") as HTMLElement);
root.render(<App />); Next, add the : index.html <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>React TypeScript</title>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="./app.tsx"></script>
</body>

</html> Add some style in app.scss html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
} Then, run and open in a browser. yarn dev http://localhost:8080/ Use This Project as a Template You can save the steps as a shell script: Setup #!/bin/sh

rm -rf node_modules
rm -rf dist
rm -rf build
rm package.json
rm yarn.lock

yarn init --yes

yarn add react react-dom

yarn add --dev @types/react \
        @types/react-dom \
        sass \
        typescript \
        @vitejs/plugin-react \
        vite

# Remove the last line
sed -i.bak '$ d' package.json && rm package.json.bak

# append the scripts commads
cat <<EOT >> package.json
   ,"scripts": {
      "clean": "rm -rf dist/*",
      "build": "vite --config vite.config.js build",
      "dev": "vite --config vite.config.js serve",
      "preview": "vite --config vite.config.js preview"
   }
} 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 new-project
cd new-project

# copy the react-app folder content to the new project
rsync -rtv /path/to/../react-app/ .

./init.sh

2021 - HackerNoon Contributor of the Year - TYPESCRIPT

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Data Security

2022 - HackerNoon Contributor of the Year - Encryption

2022 - HackerNoon Contributor of the Year - Linux

2022 - HackerNoon Contributor of the Year - Mobile

2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Encryption

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Data Security

Nominated for 2022 - HackerNoon Contributor of the Year - Mobile

Nominated for 2022 - HackerNoon Contributor of the Year - Linux

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Create a React Project From Scratch With TypeScript and Vite

How to Create a React Project From Scratch With TypeScript and Vite

Too Long; Didn't Read

Alex Adam

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Create a React Project From Scratch With TypeScript and Vite

Too Long; Didn't Read

Alex Adam

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES