misc: update reactjs.org URLs to react.dev (#490)

Author: xquisite0

contents/front-end-system-design-ui-components.md

@@ -78,8 +78,8 @@ The key idea behind components is for them to be reused and abstract complexitie
 - What are the configuration options you would allow for the component? (`props` in React). What would be reasonable defaults?
 - Follow the [Open-closed principle](https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle) - the component should be open for extension but closed for modification.
 - If your component is meant to be part of a UI library that doesn't bother about the appearance and leaves the styling to the user, extra care has to go into the design of the props and to allow users to customize the look and feel of the components. There are a few ways to go about this in React:
-  - [Composition](https://reactjs.org/docs/composition-vs-inheritance.html) - Props which accept React components which also promotes code reuse.
-  - [Render props](https://reactjs.org/docs/render-props.html) are function props that a component uses to know what to render. It also helps in reusing behavior without bothering about the appearance.
+  - [Composition](https://tkdodo.eu/blog/component-composition-is-great-btw) - Props which accept React components which also promotes code reuse.
+  - [Render props](https://www.patterns.dev/react/render-props-pattern/) are function props that a component uses to know what to render. It also helps in reusing behavior without bothering about the appearance.
   - `className` or `style` props - Allows users to inject class names and/or styling attributes to inner DOM elements. This could have negative consequences but is still a common way of allowing user to customize component appearance.
 - Possible configuration options:
   - Lifecycle/event hooks - `onClick`, `onChange`, `onBlur`, `onFocus`, etc.

packages/front-end-interview-guidebook/contents/resume/en-US.mdx

@@ -71,7 +71,7 @@ Listing all of React, Angular, and Vue (all front end view frameworks) is overki
 
 Try to list **at least one and at most two** technologies that belong to the following categories. Not all categories will apply to you, so only include the relevant ones. Popular examples are shown below.
 
-- **JavaScript libraries**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
+- **JavaScript libraries**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
 - **Metaframeworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
 - **State Management**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
 - **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)

packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx

@@ -68,7 +68,7 @@ Listar React, Angular e Vue (todos frameworks de visualização de front-end) é
 
 Tente listar **pelo menos uma e no máximo duas** tecnologias que pertençam às seguintes categorias. Nem todas as categorias se aplicarão a você, então inclua apenas as relevantes. Exemplos populares são mostrados abaixo.
 
-- **Visualizar**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
+- **Visualizar**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
 - **Renderização Frameworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
 - **Gerenciamento de Estado**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
 - **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)

packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx

@@ -71,7 +71,7 @@ social_title: 前端工程师简历指南 | 前端面试手册
 
 尝试列出**至少一个且最多两个**属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。
 
-* **JavaScript 库**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
+* **JavaScript 库**：[React](https://react.dev/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
 * **元框架**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
 * **状态管理**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
 * **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)

packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx

@@ -16,7 +16,7 @@ There are multiple ways to initialize a UI component:
 
 ### jQuery-style
 
-Before modern JavaScript UI libraries/frameworks like [React](https://reactjs.org/), [Angular](https://angular.io/), and [Vue](https://vuejs.org/) came into the picture, [jQuery](https://jquery.com/) (and [jQuery UI](https://jqueryui.com/)) was the most popular way to build UI. jQuery UI popularized the idea of initializing UI components via "constructors" which involved two arguments:
+Before modern JavaScript UI libraries/frameworks like [React](https://react.dev/), [Angular](https://angular.io/), and [Vue](https://vuejs.org/) came into the picture, [jQuery](https://jquery.com/) (and [jQuery UI](https://jqueryui.com/)) was the most popular way to build UI. jQuery UI popularized the idea of initializing UI components via "constructors" which involved two arguments:
 
 1. **Root element**: A root DOM element to render the contents
 1. **Customization options**: Optional, additional, customization options usually in the form of a plain JavaScript object

packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/pt-BR.mdx

@@ -11,7 +11,7 @@ Frequentemente, durante entrevistas de front-end, você será solicitado a const
 
 ### jQuery-style
 
-Antes das modernas bibliotecas de IU JavaScript como [React](https://reactjs.org/), [Angular](https://angular.io/), e [Vue](https://vuejs.org/) aparecerem, [jQuery](https://jquery.com) (e [jQuery UI](https://jqueryui.com/)) era a maneira mais popular de construir a interface do usuário. A jQuery UI popularizou a ideia de inicializar os componentes da UI através de "construtores" que envolvia dois argumentos:
+Antes das modernas bibliotecas de IU JavaScript como [React](https://react.dev/), [Angular](https://angular.io/), e [Vue](https://vuejs.org/) aparecerem, [jQuery](https://jquery.com) (e [jQuery UI](https://jqueryui.com/)) era a maneira mais popular de construir a interface do usuário. A jQuery UI popularizou a ideia de inicializar os componentes da UI através de "construtores" que envolvia dois argumentos:
 
 1.  **Elemento Raiz**: Um elemento raiz da DOM para renderizar o conteúdo.
 2.  **Opções de Customização**: Opcionais, opções adicionais de customização, geralmente na forma de um objeto JavaScript simples.

packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx

@@ -16,7 +16,7 @@ social_title: UI 组件的 API 设计原则 | 前端面试手册
 
 ### jQuery 风格
 
-在像 [React](https://reactjs.org/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，其中涉及两个参数：
+在像 [React](https://react.dev/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，其中涉及两个参数：
 
 1. **根元素**：用于渲染内容的根 DOM 元素
 2. **自定义选项**：可选的、额外的、自定义选项，通常以纯 JavaScript 对象的形式

packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx

@@ -34,9 +34,9 @@ Most UI questions in interviews will require state and designing the state well
 
 - **Determine the minimum state needed in your UI**: The smaller the state, the easier it is to read and understand the code -> lower likelihood for bugs. Identify essential state vs derived state. Derived state is state that can be calculated from essential state. By deriving the state on-the-fly you reduce the possibility of state values going out-of-sync.
 - **Separate rendering code vs data management code**: Make the UI a function of your data and separate your code into two parts (rendering code vs data management code) for better readability. If you use JavaScript frameworks such as React, you will more or less be forced to do so.
-- **Use the state-reducer pattern for complex state interactions**: If the question requires many state fields and certain actions require changing multiple fields at once, use a [reducer to consolidate state update logic](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). First popularized by Redux, the state-reducer pattern encourages you to determine the state of your UI, actions that can be taken, and how to combine actions with state to derive the next state. If you are using React, you can achieve this pattern via the [`useReducer` React hook](https://react.dev/reference/react/useReducer). Redux is usually overkill for interviews and `useReducer` should be sufficient.
+- **Use the state-reducer pattern for complex state interactions**: If the question requires many state fields and certain actions require changing multiple fields at once, use a [reducer to consolidate state update logic](https://react.dev/learn/extracting-state-logic-into-a-reducer). First popularized by Redux, the state-reducer pattern encourages you to determine the state of your UI, actions that can be taken, and how to combine actions with state to derive the next state. If you are using React, you can achieve this pattern via the [`useReducer` React hook](https://react.dev/reference/react/useReducer). Redux is usually overkill for interviews and `useReducer` should be sufficient.
 
-[React's](https://beta.reactjs.org) docs on ["Managing State"](https://beta.reactjs.org/learn/managing-state) is an excellent resource on how to design and use component state correctly. Some of the ideas mentioned aren't specific to React and can be applied to any UI frameworks.
+[React's](https://react.dev/) docs on ["Managing State"](https://react.dev/learn/managing-state) is an excellent resource on how to design and use component state correctly. Some of the ideas mentioned aren't specific to React and can be applied to any UI frameworks.
 
 ## JavaScript
 

packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx

@@ -32,9 +32,9 @@ A maioria das perguntas de entrevistas relacionadas à interface do usuário exi
 - **Determine o estado mínimo necessário em sua interface do usuário**: Quanto menor o estado, mais fácil é ler e entender o código -> menor probabilidade de erros.
   - Identificar o estado essencial versus o estado derivado. Estado derivado é um estado que pode ser calculado a partir do estado essencial.
 - **Separe o código de renderização do código de gerenciamento de dados**: Torne a interface do usuário uma função de seus dados e separe seu código em dois grupos (código de renderização e código de gerenciamento de dados) para uma melhor legibilidade. Se você estiver usando frameworks JavaScript como o React, mais ou menos será obrigado a fazer isso.
-- **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
+- **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://react.dev/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://react.dev/reference/react/useReducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
 
-A documentação do [React](https://beta.reactjs.org) sobre ["Gerenciamento de Estado"](https://beta.reactjs.org/learn/managing-state) é um excelente recurso sobre como projetar e usar o estado de componentes corretamente. Algumas das ideias mencionadas não são específicas do React e podem ser aplicadas a qualquer estrutura de interface do usuário (UI).
+A documentação do [React](https://react.dev/) sobre ["Gerenciamento de Estado"](https://react.dev/learn/managing-state) é um excelente recurso sobre como projetar e usar o estado de componentes corretamente. Algumas das ideias mencionadas não são específicas do React e podem ser aplicadas a qualquer estrutura de interface do usuário (UI).
 
 ## JavaScript
 

packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx

@@ -34,9 +34,9 @@ social_title: 用户界面问题备忘单 | 前端面试手册
 
 * **确定 UI 中所需的最少状态**: 状态越小，代码就越容易阅读和理解 -> 出现错误的概率越低。 确定基本状态与派生状态。 派生状态是可以从基本状态计算出来的状态。 通过即时派生状态，您可以减少状态值不同步的可能性。
 * **分离渲染代码与数据管理代码**: 使 UI 成为数据的函数，并将代码分成两部分（渲染代码与数据管理代码），以提高可读性。 如果您使用 JavaScript 框架（例如 React），您或多或少会被迫这样做。
-* **对复杂的状态交互使用状态-reducer 模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来合并状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以采取的操作以及如何将操作与状态结合起来以推导出下一个状态。 如果您使用 React，您可以通过 [`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer) 实现此模式。 Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。
+* **对复杂的状态交互使用状态-reducer 模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来合并状态更新逻辑](https://react.dev/learn/extracting-state-logic-into-a-reducer)。 状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以采取的操作以及如何将操作与状态结合起来以推导出下一个状态。 如果您使用 React，您可以通过 [`useReducer` React hook](https://react.dev/reference/react/useReducer) 实现此模式。 Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。
 
-[React 的](https://beta.reactjs.org) 关于 [“管理状态”](https://beta.reactjs.org/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的绝佳资源。提到的一些想法并非特定于 React，可以应用于任何 UI 框架。
+[React 的](https://react.dev/) 关于 [“管理状态”](https://react.dev/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的绝佳资源。提到的一些想法并非特定于 React，可以应用于任何 UI 框架。
 
 ## JavaScript
 

packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx

@@ -56,7 +56,7 @@ User interface coding interviews share a fair bit of similarity with non-front e
 1. **Core concepts**: Be familiar with the topics under the [Important concepts](#important-concepts) section below. The [Quiz section](/front-end-interview-playbook/quiz) can also be a good start since you might be asked on these concepts in the form of quiz questions during coding.
 1. **Practice writing UI**: It's best to learn how to build UIs in both Vanilla JavaScript and a UI framework of choice. Most companies will allow using JavaScript UI frameworks but some companies (e.g. Google) mandate that you can only use Vanilla JavaScript
    - **Vanilla JavaScript**: Learn the DOM manipulation APIs. At the very least you should know how to create new DOM elements, add classes/attributes to them, and add child elements. If you come from a [jQuery](https://jquery.com/) background, check out [You might not need jQuery](https://youmightnotneedjquery.com), a website showing you how to accomplish the common jQuery operations in Vanilla JavaScript. You will be pleasantly surprised to find out that with modern browser APIs there isn't really much need for jQuery anymore.
-   - **JavaScript UI framework**: Be familiar with a UI framework of choice. Stick with the framework that you are most familiar with. There's no need and also probably not enough time to learn a new framework. If you are new to JavaScript UI frameworks, [React](https://reactjs.org/) will be our recommendation as it is the most popular library/framework to build UI right now and what most companies look for when hiring front end engineers.
+   - **JavaScript UI framework**: Be familiar with a UI framework of choice. Stick with the framework that you are most familiar with. There's no need and also probably not enough time to learn a new framework. If you are new to JavaScript UI frameworks, [React](https://react.dev/) will be our recommendation as it is the most popular library/framework to build UI right now and what most companies look for when hiring front end engineers.
 1. **CSS**: Be familiar with writing CSS under interview conditions (small questions which won't require writing that much CSS):
    - **Write Vanilla CSS**: Learn to write CSS without reliance on preprocessors like Sass/Less. Not all coding environments will allow using processors and interview questions are likely small and do not really benefit from the features CSS preprocessors bring. The most useful feature of CSS processors is the use of variables, which is available natively via CSS custom properties (CSS variables).
    - **Adopt a CSS naming convention**: Consider adopting a CSS naming methodology like [Block Element Modifier](https://getbem.com) when writing your classes.