CRA Template TypeScript

npx create-react-app my-app --template typescript

# or with yarn
yarn create react-app my-app --template typescript

# or with pnpm
pnpm create react-app my-app --template typescript

# Create a new React TypeScript project
npx create-react-app my-typescript-app --template typescript

# Navigate to the project
cd my-typescript-app

# Start development server
npm start

# Run tests
npm test

# Build for production
npm run build

my-app/
├── public/
│   ├── index.html          # HTML template
│   ├── favicon.ico         # App icon
│   ├── logo192.png         # PWA icon (192x192)
│   ├── logo512.png         # PWA icon (512x512)
│   ├── manifest.json       # PWA manifest
│   └── robots.txt          # Search engine instructions
├── src/
│   ├── App.css             # App component styles
│   ├── App.test.tsx        # App component tests
│   ├── App.tsx             # Main App component
│   ├── index.css           # Global styles
│   ├── index.tsx           # Application entry point
│   ├── logo.svg            # React logo
│   ├── reportWebVitals.ts  # Performance monitoring
│   └── setupTests.ts       # Test environment setup
├── .gitignore              # Git ignore rules
├── package.json            # Dependencies and scripts
├── README.md               # Project documentation
└── tsconfig.json           # TypeScript configuration

{
  "package": {
    "dependencies": {
      "@testing-library/dom": "^10.4.0",
      "@testing-library/jest-dom": "^6.6.3", 
      "@testing-library/react": "^16.1.0",
      "@testing-library/user-event": "^13.2.1",
      "@types/jest": "^27.0.1",
      "@types/node": "^16.7.13",
      "@types/react": "^19.0.0",
      "@types/react-dom": "^19.0.0",
      "typescript": "^4.4.2",
      "web-vitals": "^2.1.0"
    },
    "eslintConfig": {
      "extends": ["react-app", "react-app/jest"]
    }
  }
}

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

function App(): React.JSX.Element;
export default App;

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

// Creates root container using React 18+ createRoot API
const root: ReactDOM.Root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// Renders app with StrictMode wrapper
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Optional performance monitoring
reportWebVitals();

# Generated README.md content includes:
- Project overview and Create React App attribution
- Available Scripts section (start, test, build, eject)
- Detailed script descriptions and usage instructions  
- Learn More section with links to documentation

// Generated in src/setupTests.ts
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
import '@testing-library/jest-dom';

// Generated in src/App.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';

// Jest test function signature
test(name: string, fn: () => void): void;

// Provided test example:
test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

// Generated in src/reportWebVitals.ts
import { ReportHandler } from 'web-vitals';

// Main function for performance measurement
const reportWebVitals: (onPerfEntry?: ReportHandler) => void;

// Implementation uses dynamic import for better performance
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);  // Cumulative Layout Shift
      getFID(onPerfEntry);  // First Input Delay  
      getFCP(onPerfEntry);  // First Contentful Paint
      getLCP(onPerfEntry);  // Largest Contentful Paint
      getTTFB(onPerfEntry); // Time to First Byte
    });
  }
};

export default reportWebVitals;

// Auto-generated tsconfig.json includes:
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

// Generated in public/manifest.json
{
  "short_name": string;
  "name": string;
  "icons": Array<{
    "src": string;
    "sizes": string;
    "type": string;
  }>;
  "start_url": string;
  "display": string;
  "theme_color": string;
  "background_color": string;
}

{
  "scripts": {
    "start": "react-scripts start",     // Development server
    "build": "react-scripts build",     // Production build  
    "test": "react-scripts test",       // Test runner
    "eject": "react-scripts eject"      // Eject from CRA
  }
}