React

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.

Version

Running on Node.js v20.0.0

Supported languages

Javascript

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 {cleanup, render, screen } from '@testing-library/react';

import App from './App.jsx';

afterEach(cleanup);

describe('App', () => {
  test('Should display "Hello World!"', () => {
    render(<App />);
    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.

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

How to debug

Debugging React code 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:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log('Button clicked!'); // Log button click
    setCount(count + 1);
  };

  console.log('Current count:', count); // Log current count

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

export default Counter;