Setting Up a React Project with TypeScript

Showcase the initial steps to create a React application using TypeScript, including configuration files and starting scripts.

npm create vite@latest --template react-ts

This command creates a new React project using Vite with a TypeScript template. It sets up the project structure and installs necessary dependencies.

cd your-project-name

Navigate into your newly created project directory.

npm install

Install all dependencies listed in package.json to ensure the project can run.

npm run dev

Starts the development server. Open your browser and go to the provided URL to see your new React app running.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();

This is the index.tsx file, the entry point of your React application where ReactDOM renders your App component inside the 'root' div of your public/index.html file.

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default App;

Example of a simple App.tsx file, a component that returns a 'Hello, World!' heading.