https://github.com/jmw5598/setup-react-with-typescript
Instructions for setting up a React project with Typescript without the help of create-react-app
https://github.com/jmw5598/setup-react-with-typescript
create-react-app create-react-app-typescript javascript react reactjs typescript
Last synced: 21 days ago
JSON representation
Instructions for setting up a React project with Typescript without the help of create-react-app
- Host: GitHub
- URL: https://github.com/jmw5598/setup-react-with-typescript
- Owner: jmw5598
- Created: 2022-08-20T11:48:00.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-20T15:56:53.000Z (about 3 years ago)
- Last Synced: 2025-02-26T12:17:36.656Z (9 months ago)
- Topics: create-react-app, create-react-app-typescript, javascript, react, reactjs, typescript
- Language: JavaScript
- Homepage:
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Setting Up React With Typescript From Scratch
1. Create project folder `mkdir && cd `.
2. Initial npm project, `npm init` and follow the prompts.
3. Install dev dependencies
```bash
npm install --save-dev \
@babel/core \
@babel/preset-env \
@babel/preset-react \
@babel/preset-typescript \
@types/node \
@types/react \
@types/react-dom \
babel-loader \
css-loader \
html-webpack-plugin \
react \
react-dom \
style-loader \
ts-loader \
typescript \
webpack \
webpack-cli \
webpack-dev-server
```
4. Update scripts block in your `package.json` file.
```json
"scripts": {
"start": "webpack serve --hot --open",
"build": "webpack --mode production"
},
```
5. Create `webpack.config.js` with `touch webpack.config.js`.
```javascript
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js'
},
mode: process.env.NODE_ENV || "development",
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
devServer: {
port: 8080
},
plugins: [
new HTMLWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html')
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: ["ts-loader"],
},
{
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
use: ["file-loader"],
},
]
},
}
```
6. Create your `.babelrc` file
```
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
```
7. Create your `tsconfig.json` file.
```
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
```
8. Create `src` directory for your source code, `mkdir src`
9. Create your `index.html`, `index.tsx`, and `App.tsx` files, `touch src/index.html src/index.ts src/App.tsx`.
**src/index.html**
```html
React Without Create React App
```
**src/index.tsx**
```typescript
import React from "react";
import ReactDOM from "react-dom";
//Import App
import App from "./App";
ReactDOM.render(, document.querySelector("#root"));
```
**src/App.tsx**
```typescript
import React from 'react';
interface Props {
}
const App: React.FC = () => {
return (
<>
Hello World
React Without create-react-app
>
);
};
export default App;
```
10. Start development server with `npm start`