diff --git a/apps/web-cn/assets/Slack Clone 1.png b/apps/web-cn/assets/Slack Clone 1.png
deleted file mode 100644
index 6be537d..0000000
Binary files a/apps/web-cn/assets/Slack Clone 1.png and /dev/null differ
diff --git a/apps/web-cn/assets/react-interview-example.png b/apps/web-cn/assets/react-interview-example.png
new file mode 100644
index 0000000..78818c2
Binary files /dev/null and b/apps/web-cn/assets/react-interview-example.png differ
diff --git a/apps/web-cn/pages/careers/interviews/react.tsx b/apps/web-cn/pages/careers/interviews/react.tsx
index adca0c3..3c871f5 100644
--- a/apps/web-cn/pages/careers/interviews/react.tsx
+++ b/apps/web-cn/pages/careers/interviews/react.tsx
@@ -1,13 +1,14 @@
import Image from 'next/image'
import { useRouter } from 'next/router'
import { NextSeo } from 'next-seo'
+import { useMemo } from 'react'
import { ReactColorIcon } from 'ui'
import Benefits from '~/components/careers/Benefits'
import { EngineerHiringProcess } from '~/components/careers/HiringProcess'
import { useCareersLayoutConfig } from '~/components/layouts/CareersLayout'
-import SlackCloneImage from '~/assets/Slack Clone 1.png'
+import ExampleImage from '~/assets/react-interview-example.png'
export default function ReactInterviewPageInChina() {
const { query } = useRouter()
@@ -19,6 +20,14 @@ export default function ReactInterviewPageInChina() {
title,
})
+ const branchName = useMemo(
+ () =>
+ `interview/${new Date().getMonth() + 1}-${new Date().getDate()}${
+ candidate ? '_' + candidate : ''
+ }`,
+ [candidate]
+ )
+
return (
<>
首先你可以从以下两种方案中选择一条:
- 在线Replit IDE:
-
- 加入链接
-
+
+ git clone https://github.com/zolplay-cn/react-interview.git
+
+ ;
- 在本地建立一个Git仓库,并新建一个React项目(脚手架自选) -+ 基于
main
分支,创建一个新的分支名叫{' '}
+ {branchName}
,并切换到该分支;
+ pnpm/npm/yarn run dev
命令,启动项目
- 首先你需要在项目文件目录中开启一个新的Git分支,起名叫做{' '}
-
- interview/
- {`${new Date().getMonth() + 1}-${new Date().getDate()}${
- candidate ? '_' + candidate : ''
- }`}
-
-
{branchName}
+ ,并切换到该分支;
+ pnpm dev
命令,启动项目;
+ 现在有一个设计稿UI图如下:
++ 我们为你准备了一个类似Spotlight的搜索器界面,可以先查阅现有的项目代码并熟悉一下项目的结构。 +
请使用React Hooks形式的函数组件来实现界面布局,并最大程度上地还原UI
-(不限制任何框架、第三方库的使用)
+熟悉完之后我们就可以投入到测试题开发当中,你需要完成以下几个要求:
+ +/api/search?q=QUERY
;
+ <RepositoryOption />
+ 组件中,并对该组件进行封装能够动态渲染仓库信息;
+ 暂无 QUERY 的相关仓库信息
;
+ 下列加分项并非必须,但是可以为你的题目完成增加一些额外的分数:
+在时间允许的前提下,可以选择性完成任意一个/多个加分任务:
<div />
+ 当选中仓库信息的时候,应该在浏览器中打开仓库的链接,并且查看仓库的详细信息。
+ ======= 分割线 =======
+