无法在HackerEarth运行ReactJS代码，如何在该平台编写React JSX代码？

平台运行逻辑 #

• 依赖预配置：Hacker Earth的React类运行环境已经预装了react、react-dom包，同时内置Babel工具支持JSX语法转译，不需要手动执行安装、配置操作
• 入口规则：默认以index.js作为代码打包执行的唯一入口，你所有的React代码都需要写在这个文件里，或者通过导入语法关联到这个文件
• 渲染模板：平台预置了包含id="root"DOM节点的HTML模板，所有React组件最终需要挂载到这个节点上才能正常在预览窗口渲染
• 运行流程：点击运行后，平台会先转译JSX为标准JS语法，再打包执行代码，运行报错会展示在终端窗口，渲染效果展示在预览窗口

React Hook + JSX 编写步骤 #

1. 导入依赖：在代码开头导入React、需要用到的Hook以及ReactDOM

import React, { useState, useEffect } from 'react';
// React 18 版本导入方式
import ReactDOM from 'react-dom/client';
// 旧版本React导入方式
// import ReactDOM from 'react-dom';

2. 编写函数组件：正常使用Hook语法编写业务逻辑，支持所有原生JSX写法

function App() {
  const [text, setText] = useState('测试内容');

  useEffect(() => {
    console.log('组件挂载完成');
  }, []);

  return (
    <div className="app">
      <h1>Hacker Earth React 测试</h1>
      <p>{text}</p>
      <input onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

3. 挂载组件到根节点

// React 18 挂载语法
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// 旧版本React挂载语法
// ReactDOM.render(<App />, document.getElementById('root'));

注意事项 #

• 不要自行编写完整HTML模板，也不要修改根节点的id属性，否则会出现组件挂载失败问题
• Hook只能在函数组件、自定义Hook内部调用，不要在普通函数、循环、条件判断语句中调用Hook，否则会触发Hook规则报错
• 所有自定义组件首字母必须大写，否则JSX会被识别为原生HTML标签，导致渲染异常

内容的提问来源于stack exchange，提问作者Vikas Mishra