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
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:
js
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();
});
});
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
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
Identify the Problem Area: Pinpoint the component or function in your React codebase where you suspect the problem resides.
Insert
console.log()
Statements: Strategically placeconsole.log()
statements before and after the suspected problematic code to log variable values and track the flow of execution.Check the Results Output of your tests
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.
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:
jsx
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21