mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] misc: update reactjs.org URLs to react.dev (#1428)

This commit is contained in:
Zhou Yuhang 2025-04-29 13:46:26 +08:00 committed by GitHub
parent 2df4830ce8
commit 9b8453a88d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
contents/questions/system-design/dropdown-menu/solution/en-US.mdx
View File

@ -147,7 +147,7 @@ This approach is used by [Headless UI](https://headlessui.com/react/menu) and [B
In this approach, the menu is rendered as a direct child of the `<body>` and positioned `absolute`-ly to the **page** by getting the element's `offsetTop` and `offsetLeft` to get the coordinates of the `<button>` relative to the page and adding its height (`offsetHeight`) to get the final Y position to render the menu.
In React, this can be done using [React Portals](https://beta.reactjs.org/reference/react-dom/createPortal), which lets you render outside the DOM hierarchy of the parent component. A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. Common examples include dropdown menus, tooltips, modals.
In React, this can be done using [React Portals](https://react.dev/reference/react-dom/createPortal), which lets you render outside the DOM hierarchy of the parent component. A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. Common examples include dropdown menus, tooltips, modals.
<iframe
src="https://codesandbox.io/embed/dropdown-menu-relative-page-r4zoiu

2
contents/questions/system-design/image-carousel/solution/en-US.mdx
View File

@ -35,7 +35,7 @@ There's no need to separate the "Model" and the "ViewModel" in this component be
### Flux architecture
A [Flux](https://facebook.github.io/flux/)/[Redux](https://redux.js.org/)/[Reducer](https://beta.reactjs.org/learn/scaling-up-with-reducer-and-context)-like architecture is recommended to abstract away the action sources from the action logic/implementation. Some actions can be triggered by interacting with various UI elements, periodically by a timer, or keypresses.
A [Flux](https://facebook.github.io/flux/)/[Redux](https://redux.js.org/)/[Reducer](https://react.dev/learn/scaling-up-with-reducer-and-context)-like architecture is recommended to abstract away the action sources from the action logic/implementation. Some actions can be triggered by interacting with various UI elements, periodically by a timer, or keypresses.
---

4
contents/questions/system-design/modal-dialog/solution/en-US.mdx
View File

@ -110,7 +110,7 @@ Most of the modal's contents in the header/body/footer will be provided by the u
#### Breaking out of DOM hierarchy
Rendering the modal is more tricky than it seems due to the fact that modals are being displayed over the page and does not follow the normal flow of page elements. It's important to render the modal outside of the DOM hierarchy of the parents, because if the parents contain styling that clips its contents, the modal contents might not be fully visible. Here's an example from the [React docs](https://beta.reactjs.org/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal) demonstrating the issue.
Rendering the modal is more tricky than it seems due to the fact that modals are being displayed over the page and does not follow the normal flow of page elements. It's important to render the modal outside of the DOM hierarchy of the parents, because if the parents contain styling that clips its contents, the modal contents might not be fully visible. Here's an example from the [React docs](https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal) demonstrating the issue.
<iframe
src="https://codesandbox.io/embed/wnr51p?fontsize=14&hidenavigation=1&theme=dark&module=/App.js,/NoPortalExample.js,/PortalExample.js,/ModalContent.js,/styles.css&view=split"
@ -126,7 +126,7 @@ Rendering the modal is more tricky than it seems due to the fact that modals are
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>
In React, rendering outside the DOM hierarchy of the parent component can be achieved using [React Portals](https://beta.reactjs.org/reference/react-dom/createPortal). Common use cases of portals include tooltips, dropdown menus, popovers.
In React, rendering outside the DOM hierarchy of the parent component can be achieved using [React Portals](https://react.dev/reference/react-dom/createPortal). Common use cases of portals include tooltips, dropdown menus, popovers.
#### Overlay

2
contents/questions/user-interface/tabs/frameworks/react/solution/index.mdx
View File

@ -5,7 +5,7 @@ import Notes from '../../../notes.mdx';
Implementing a basic (not fully accessible) Tabs component in React is quite simple due to the fact that only one state value is needed, the currently active tab item. React also helps to keep the state and the UI in sync, which is more troublesome to do so in Vanilla JavaScript.
For simplicity sake, we'll create an [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html) Tabs component where the state is managed within the Tabs component. During interviews, do clarify with your interviewer if they want you to implement a controlled or uncontrolled component.
For simplicity sake, we'll create an [uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) Tabs component where the state is managed within the Tabs component. During interviews, do clarify with your interviewer if they want you to implement a controlled or uncontrolled component.
### Props (API Design)

2
contents/questions/user-interface/todo-list/frameworks/react/solution.mdx
View File

@ -6,7 +6,7 @@ We will need two state values: `tasks` and `newTask`.
`tasks`: Since there's a list of tasks that can be modified, we will need it to be part of the component's state. When rendering a list of elements in React, we need to specify a `key` for each item. We cannot use the text of the task as the `key` because they are not guaranteed to be unique. It is typically a bad practice to use array `index` as `key`s, but for this question, it is acceptable. The most foolproof method is to generate a unique ID for each task. Libraries like [`uuid`](https://github.com/uuidjs/uuid) come to mind, but in this case, a simple incrementing counter will do. Since we want `id`s to be globally unique, it is initialized in the module scope, outside of the component.
`newTask`: state to represent the new task input field, although that is not strictly necessary if we prefer [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html). However, it is generally more common to make `input` fields controlled, aka backed by component state. The initial value for this state should not be `null` as React will show a warning otherwise.
`newTask`: state to represent the new task input field, although that is not strictly necessary if we prefer [uncontrolled components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). However, it is generally more common to make `input` fields controlled, aka backed by component state. The initial value for this state should not be `null` as React will show a warning otherwise.
### Adding tasks