React Code Editor Component

This challenge asks you to build a basic code editor component in React using TypeScript. A code editor is a fundamental tool for developers, allowing them to write and modify code directly within an application. This component will provide a simple, functional code editing experience, focusing on core features like text input, display, and basic syntax highlighting.

Problem Description

You are tasked with creating a CodeEditor component in React that allows users to input and view code. The component should:

1. Display a Text Area: Render a textarea element to allow users to input code.
2. Real-time Updates: As the user types in the textarea, the code should be displayed in real-time.
3. Basic Syntax Highlighting: Implement rudimentary syntax highlighting for JavaScript code. This can be achieved by applying a different color to keywords (e.g., function, let, const, if, else, return). You can use a simple regular expression or a basic keyword list for this. Don't worry about full-fledged syntax highlighting; a basic implementation is sufficient.
4. State Management: Use React's state to manage the code content within the editor.
5. Clear and Concise Code: Write clean, readable, and well-commented code.

Expected Behavior:

• The component should render a textarea where users can type JavaScript code.
• The code typed in the textarea should be displayed immediately below it, with basic syntax highlighting applied to JavaScript keywords.
• The component should handle changes in the textarea and update the displayed code accordingly.

Edge Cases to Consider:

• Empty input: The component should handle empty input gracefully, displaying an empty code area.
• Large input: The component should be able to handle a significant amount of code without performance issues (though extreme performance optimization is not required for this basic implementation).
• Special characters: The component should correctly display special characters in the code.

Examples

Example 1:

Input:  User types "let x = 10;" into the textarea.
Output:  The textarea displays "let x = 10;". Below the textarea, the code "let x = 10;" is displayed with "let", "x", and "10" styled differently (e.g., "let" in blue, "x" in green, "10" in orange).
Explanation: The component captures the user's input, updates its state, and renders the code with basic syntax highlighting.

Example 2:

Input: User types "function myFunction() { return 'Hello'; }" into the textarea.
Output: The textarea displays "function myFunction() { return 'Hello'; }". Below the textarea, the code is displayed with "function", "myFunction", "return", and "Hello" styled differently.
Explanation: The component handles multi-line input and applies syntax highlighting to multiple keywords.

Example 3: (Edge Case)

Input: User types nothing into the textarea.
Output: The textarea is empty. Below the textarea, an empty area is displayed.
Explanation: The component handles the case where the input is empty.

Constraints

• Language: TypeScript
• Framework: React
• Syntax Highlighting: Basic JavaScript keyword highlighting is required. Full syntax highlighting is not expected.
• Performance: The component should be responsive to user input. Extreme performance optimization is not required.
• Component Structure: The component should be a functional component.

Notes

• Consider using CSS classes to style the code and keywords.
• You can use regular expressions or a simple array of keywords for syntax highlighting.
• Focus on the core functionality of displaying and updating code with basic highlighting. Advanced features like line numbers, code folding, or advanced syntax highlighting are beyond the scope of this challenge.
• Think about how to efficiently update the displayed code when the textarea content changes. Avoid unnecessary re-renders.
• Remember to handle the onChange event of the textarea to capture user input.