React (TypeScript)

You should create a functional component named App as the main entry point of your React application. Your React code should be linted using ESLint with the recommended configuration for React and TypeScript.

Entry file

The entry file for this template must be one of the following: main.tsx or index.tsx. The first one present is used as the entry point.

Version

Running on Node.js v20.0.0

Supported languages

TypeScript

Testing framework

Jest

Special reminders and implementation details

• React Testing Library, a library to assist with testing React components. It is built on top of DOM Testing Library by adding APIs for working with React components.

Example with React Testing Library:

import "@testing-library/jest-dom/jest-globals";
import * as React from "react";

import { describe, expect, it } from "@jest/globals";
import { render, screen } from "@testing-library/react";
import HelloWorld from "./App";

describe("HelloWorld", () => {
  it("renders Hello, World!", () => {
    render(React.createElement(HelloWorld));
    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
  });
});

Remember to always keep your components modular and make use of React's hooks and context API for state management and side effects. Use TypeScript types and interfaces for props and state.

Included libraries

• @babel/preset-env
• babel-jest
• @babel/preset-react
• @testing-library/react
• jest-environment-jsdom
• @testing-library/jest-dom
• @testing-library/user-event
• jest-transform-stub
• typescript

How to debug

Debugging React code with TypeScript is essential for identifying and fixing issues. Utilizing console.log() statements can aid in this process.

Steps to Debug Using Console Logs

1. Identify the Problem Area: Pinpoint the component or function in your React codebase where you suspect the problem resides.

2. Insert console.log() Statements: Strategically place console.log() statements before and after the suspected problematic code to log variable values and track the flow of execution.

3. Check the Results Output of your tests

4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.

5. Analyze the Output: Examine the output logged in the console to understand the flow of your React application's execution and identify potential issues.

Here's an example of how to use console.log() for debugging in React with TypeScript:

import React, { FC, useState } from "react";

const Counter: FC = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = (): void => {
    console.log("Button clicked!");
    setCount((prevCount: number) => prevCount + 1);
  };

  console.log("Current count:", count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;