openeuler/react

快速参考

• 官方React Docker镜像。

• 维护者：https://gitee.com/openeuler/cloudnative%E3%80%82

• 获取帮助：https://gitee.com/openeuler/cloudnative%E3%80%81https://gitee.com/openeuler/community%E3%80%82

React | openEuler

当前React Docker镜像基于https://repo.openeuler.org/%E6%9E%84%E5%BB%BA%E3%80%82%E6%9C%AC%E4%BB%93%E5%BA%93%E5%85%8D%E8%B4%B9%E4%BD%BF%E7%94%A8%E4%B8%94%E6%97%A0%E6%AF%8F%E7%94%A8%E6%88%B7%E9%80%9F%E7%8E%87%E9%99%90%E5%88%B6%E3%80%82

React是用于创建用户界面的JavaScript库。

更多信息参见https://react.dev/%E3%80%82

支持的标签及对应的Dockerfile链接

每个react Docker镜像的标签由react版本和基础镜像版本组成，详情如下：

使用方法

在使用时，用户可根据需求选择相应的{Tag}。

• 从Docker拉取openeuler/react镜像

  bash
  docker pull docker.xuanyuan.run/openeuler/react:{Tag}
  

• 使用交互式shell运行

  您也可以使用交互式shell启动容器以使用React：

  bash
  docker run -it --rm docker.xuanyuan.run/openeuler/react:{Tag} bash
  

• 示例：简单的React计数器

  此代码演示了一个基本的React计数器组件，该组件：

  • 跟踪数字计数的值
  • 提供一个按钮用于增加计数
  • 显示当前计数值

  javascript
  import { useState } from 'react';
  import { createRoot } from 'react-dom/client';
  
  function Counter() {
    const [count, setCount] = useState(0);
    return (
      <>
        <h1>{count}</h1>
        <button onClick={() => setCount(count + 1)}>
          Increment
        </button>
      </>
    );
  }
  
  const root = createRoot(document.getElementById('root'));
  root.render(<Counter />);
  

问答

如有任何问题或需要使用某些特殊功能，请在https://gitee.com/openeuler/openeuler-docker-images%E4%B8%8A%E6%8F%90%E4%BA%A4issue%E6%88%96%E6%8B%89%E5%8F%96%E8%AF%B7%E6%B1%82%E3%80%82