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:
Create the project's folder:
mkdir react-app
cd react-app
Generate a default package.json file with yarn:
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 package.json file:
....
},
"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 tsconfig.json with:
{
"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 vite.config.js containing:
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 src (in the project's folder):
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 yarn dev and open http://localhost:8080/ in a browser.
Use this project as a template
You can save the Setup steps as a shell script:
#!/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 node-modules folder and, when you want to start a new project, you can copy the contents of react-app to the new location:
mkdir new-project
cd new-project
# copy the react-app folder content to the new project
rsync -rtv /path/to/../react-app/ .
./init.sh
Top comments (0)