Set up minimal TypeScript/React application

arkid15r commented 2 weeks ago

This is going to be the first step towards the new frontend implementation.

Here’s a basic setup for a TypeScript + React project. This will include steps to initialize a project, install necessary dependencies, and create a simple React component in TypeScript.

1. Initialize the Project

Create a new directory and initialize a new project:
```
mkdir my-react-app
cd my-react-app
npm init -y
```

Install React, ReactDOM, and TypeScript:

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

Set up TypeScript configuration by creating a tsconfig.json:

npx tsc --init

In tsconfig.json, set "jsx": "react-jsx" for compatibility with JSX syntax. You might end up with something like:

{
 "compilerOptions": {
   "target": "es6",
   "module": "esnext",
   "jsx": "react-jsx",
   "strict": true,
   "esModuleInterop": true,
   "skipLibCheck": true,
   "forceConsistentCasingInFileNames": true
 }
}

2. Set Up Your Application Code

Create a basic folder structure. You can use:
```
src/
├── App.tsx
└── index.tsx
```

Add your index.tsx file as the entry point for the application:

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);

Create a simple App.tsx component:

// src/App.tsx
import React from 'react';

const App: React.FC = () => {
 return (
   <div>
     <h1>Hello, TypeScript + React!</h1>
   </div>
 );
};

export default App;

3. Create an HTML Template

In the root of your project, create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React TypeScript App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

4. Set Up a Development Server

You can use tools like Vite, Webpack, or Parcel for local development. Here’s an example with Vite for simplicity.

Install Vite:
```
npm install vite --save-dev
```

Add a vite.config.ts file in the root directory:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
 plugins: [react()],
 server: {
   open: true,
 },
});

Add Vite scripts in your package.json:

"scripts": {
 "dev": "vite",
 "build": "vite build"
}

5. Run the Application

Start the development server:

npm run dev

Now, navigate to http://localhost:3000 in your browser. You should see the "Hello, TypeScript + React!" message, confirming that the app is working.

harsh3dev commented 2 weeks ago

Hi, I am ready to implement this. However I had a thought that if we use vite command which is: npm create vite@latest then it will perform all the above tasks automatically

Also please assign this to me.

AbhayTopno commented 2 weeks ago

I have a Pull Request that I have already coded. If you could review my code or provide suggestions, that would be a great help

OWASP / Nest