+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js active
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+
+ );
+}
+
+```
+
+```js src/Icons.js hidden
+export function ChevronLeft() {
+ return (
+
+ );
+}
+
+export function PauseIcon() {
+ return (
+
+ );
+}
+
+export function PlayIcon() {
+ return (
+
+ );
+}
+export function Heart({liked, animate}) {
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export function IconSearch(props) {
+ return (
+
+ );
+}
+```
+
+```js src/Layout.js active
+import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";
+
+export default function Page({ heading, children }) {
+ const isPending = useIsNavPending();
+ return (
+
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js
+import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ {/* Custom classes based on transition type. */}
+
+ {heading}
+
+ {isPending && }
+
+
+ {/* Opt-out of ViewTransition for the content. */}
+ {/* Content can define it's own ViewTransition. */}
+
+
+
{children}
+
+
+
+ );
+}
+```
+
+```js src/LikeButton.js hidden
+import {useState} from 'react';
+import {Heart} from './Icons';
+
+// A hack since we don't actually have a backend.
+// Unlike local state, this survives videos being filtered.
+const likedVideos = new Set();
+
+export default function LikeButton({video}) {
+ const [isLiked, setIsLiked] = useState(() => likedVideos.has(video.id));
+ const [animate, setAnimate] = useState(false);
+ return (
+
+ );
+}
+```
+
+```js src/Videos.js hidden
+import { useState, unstable_ViewTransition as ViewTransition } from "react";
+import LikeButton from "./LikeButton";
+import { useRouter } from "./router";
+import { PauseIcon, PlayIcon } from "./Icons";
+import { startTransition } from "react";
+
+export function Thumbnail({ video, children }) {
+ // Add a name to animate with a shared element transition.
+ // This uses the default animation, no additional css needed.
+ return (
+
+
+ );
+}
+```
+
+
+```js src/data.js hidden
+const videos = [
+ {
+ id: '1',
+ title: 'First video',
+ description: 'Video description',
+ image: 'blue',
+ },
+ {
+ id: '2',
+ title: 'Second video',
+ description: 'Video description',
+ image: 'red',
+ },
+ {
+ id: '3',
+ title: 'Third video',
+ description: 'Video description',
+ image: 'green',
+ },
+ {
+ id: '4',
+ title: 'Fourth video',
+ description: 'Video description',
+ image: 'purple',
+ },
+ {
+ id: '5',
+ title: 'Fifth video',
+ description: 'Video description',
+ image: 'yellow',
+ },
+ {
+ id: '6',
+ title: 'Sixth video',
+ description: 'Video description',
+ image: 'gray',
+ },
+];
+
+let videosCache = new Map();
+let videoCache = new Map();
+let videoDetailsCache = new Map();
+const VIDEO_DELAY = 1;
+const VIDEO_DETAILS_DELAY = 1000;
+export function fetchVideos() {
+ if (videosCache.has(0)) {
+ return videosCache.get(0);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos);
+ }, VIDEO_DELAY);
+ });
+ videosCache.set(0, promise);
+ return promise;
+}
+
+export function fetchVideo(id) {
+ if (videoCache.has(id)) {
+ return videoCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DELAY);
+ });
+ videoCache.set(id, promise);
+ return promise;
+}
+
+export function fetchVideoDetails(id) {
+ if (videoDetailsCache.has(id)) {
+ return videoDetailsCache.get(id);
+ }
+ const promise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve(videos.find((video) => video.id === id));
+ }, VIDEO_DETAILS_DELAY);
+ });
+ videoDetailsCache.set(id, promise);
+ return promise;
+}
+```
+
+```js src/router.js hidden
+import {useState, createContext, use, useTransition, useLayoutEffect, useEffect, unstable_addTransitionType as addTransitionType} from "react";
+
+export function Router({ children }) {
+ const [isPending, startTransition] = useTransition();
+ const [routerState, setRouterState] = useState({pendingNav: () => {}, url: document.location.pathname});
+ function navigate(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav forward"
+ addTransitionType('nav-forward');
+ go(url);
+ });
+ }
+ function navigateBack(url) {
+ startTransition(() => {
+ // Transition type for the cause "nav backward"
+ addTransitionType('nav-back');
+ go(url);
+ });
+ }
+
+ function go(url) {
+ setRouterState({
+ url,
+ pendingNav() {
+ window.history.pushState({}, "", url);
+ },
+ });
+ }
+
+ useEffect(() => {
+ function handlePopState() {
+ // This should not animate because restoration has to be synchronous.
+ // Even though it's a transition.
+ startTransition(() => {
+ setRouterState({
+ url: document.location.pathname + document.location.search,
+ pendingNav() {
+ // Noop. URL has already updated.
+ },
+ });
+ });
+ }
+ window.addEventListener("popstate", handlePopState);
+ return () => {
+ window.removeEventListener("popstate", handlePopState);
+ };
+ }, []);
+ const pendingNav = routerState.pendingNav;
+ useLayoutEffect(() => {
+ pendingNav();
+ }, [pendingNav]);
+
+ return (
+
+ {children}
+
+ );
+}
+
+const RouterContext = createContext({ url: "/", params: {} });
+
+export function useRouter() {
+ return use(RouterContext);
+}
+
+export function useIsNavPending() {
+ return use(RouterContext).isPending;
+}
+
+```
+
+```css src/styles.css hidden
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Rg.woff2) format("woff2");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Md.woff2) format("woff2");
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 600;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: Optimistic Text;
+ src: url(https://react.dev/fonts/Optimistic_Text_W_Bd.woff2) format("woff2");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ background-image: url(https://react.dev/images/meta-gradient-dark.png);
+ background-size: 100%;
+ background-position: -100%;
+ background-color: rgb(64 71 86);
+ background-repeat: no-repeat;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: Optimistic Text, -apple-system, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+ padding: 10px 0 10px 0;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+}
+
+#root {
+ flex: 1 1;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ max-width: 450px;
+ min-height: 600px;
+ padding-bottom: 10px;
+}
+
+h1 {
+ margin-top: 0;
+ font-size: 22px;
+}
+
+h2 {
+ margin-top: 0;
+ font-size: 20px;
+}
+
+h3 {
+ margin-top: 0;
+ font-size: 18px;
+}
+
+h4 {
+ margin-top: 0;
+ font-size: 16px;
+}
+
+h5 {
+ margin-top: 0;
+ font-size: 14px;
+}
+
+h6 {
+ margin-top: 0;
+ font-size: 12px;
+}
+
+code {
+ font-size: 1.2em;
+}
+
+ul {
+ padding-inline-start: 20px;
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.overflow-visible {
+ overflow: visible;
+}
+
+.visible {
+ overflow: visible;
+}
+
+.fit {
+ width: fit-content;
+}
+
+
+/* Layout */
+.page {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.top-hero {
+ height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-image: conic-gradient(
+ from 90deg at -10% 100%,
+ #2b303b 0deg,
+ #2b303b 90deg,
+ #16181d 1turn
+ );
+}
+
+.bottom {
+ flex: 1;
+ overflow: auto;
+}
+
+.top-nav {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0;
+ padding: 0 12px;
+ top: 0;
+ width: 100%;
+ height: 44px;
+ color: #23272f;
+ font-weight: 700;
+ font-size: 20px;
+ z-index: 100;
+ cursor: default;
+}
+
+.content {
+ padding: 0 12px;
+ margin-top: 4px;
+}
+
+
+.loader {
+ color: #23272f;
+ font-size: 3px;
+ width: 1em;
+ margin-right: 18px;
+ height: 1em;
+ border-radius: 50%;
+ position: relative;
+ text-indent: -9999em;
+ animation: loading-spinner 1.3s infinite linear;
+ animation-delay: 200ms;
+ transform: translateZ(0);
+}
+
+@keyframes loading-spinner {
+ 0%,
+ 100% {
+ box-shadow: 0 -3em 0 0.2em,
+ 2em -2em 0 0em, 3em 0 0 -1em,
+ 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 0;
+ }
+ 12.5% {
+ box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em,
+ 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 25% {
+ box-shadow: 0 -3em 0 -0.5em,
+ 2em -2em 0 0, 3em 0 0 0.2em,
+ 2em 2em 0 0, 0 3em 0 -1em,
+ -2em 2em 0 -1em, -3em 0 0 -1em,
+ -2em -2em 0 -1em;
+ }
+ 37.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em,
+ -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 50% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em,
+ -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+ }
+ 62.5% {
+ box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0,
+ -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+ }
+ 75% {
+ box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em,
+ 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+ }
+ 87.5% {
+ box-shadow: 0em -3em 0 0, 2em -2em 0 -1em,
+ 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em,
+ -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+ }
+}
+
+/* LikeButton */
+.like-button {
+ outline-offset: 2px;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ border-radius: 9999px;
+ border: none;
+ outline: none 2px;
+ color: #5e687e;
+ background: none;
+}
+
+.like-button:focus {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+}
+
+.like-button:active {
+ color: #a6423a;
+ background-color: rgba(166, 66, 58, .05);
+ transform: scaleX(0.95) scaleY(0.95);
+}
+
+.like-button:hover {
+ background-color: #f6f7f9;
+}
+
+.like-button.liked {
+ color: #a6423a;
+}
+
+/* Icons */
+@keyframes circle {
+ 0% {
+ transform: scale(0);
+ stroke-width: 16px;
+ }
+
+ 50% {
+ transform: scale(.5);
+ stroke-width: 16px;
+ }
+
+ to {
+ transform: scale(1);
+ stroke-width: 0;
+ }
+}
+
+.circle {
+ color: rgba(166, 66, 58, .5);
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+.circle.liked.animate {
+ animation: circle .3s forwards;
+}
+
+.heart {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+
+.heart.liked {
+ transform-origin: center;
+ transition-property: all;
+ transition-duration: .15s;
+ transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.heart.liked.animate {
+ animation: scale .35s ease-in-out forwards;
+}
+
+.control-icon {
+ color: hsla(0, 0%, 100%, .5);
+ filter: drop-shadow(0 20px 13px rgba(0, 0, 0, .03)) drop-shadow(0 8px 5px rgba(0, 0, 0, .08));
+}
+
+.chevron-left {
+ margin-top: 2px;
+ rotate: 90deg;
+}
+
+
+/* Video */
+.thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 8rem;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.thumbnail.blue {
+ background-image: conic-gradient(at top right, #c76a15, #087ea4, #2b3491);
+}
+
+.thumbnail.red {
+ background-image: conic-gradient(at top right, #c76a15, #a6423a, #2b3491);
+}
+
+.thumbnail.green {
+ background-image: conic-gradient(at top right, #c76a15, #388f7f, #2b3491);
+}
+
+.thumbnail.purple {
+ background-image: conic-gradient(at top right, #c76a15, #575fb7, #2b3491);
+}
+
+.thumbnail.yellow {
+ background-image: conic-gradient(at top right, #c76a15, #FABD62, #2b3491);
+}
+
+.thumbnail.gray {
+ background-image: conic-gradient(at top right, #c76a15, #4E5769, #2b3491);
+}
+
+.video {
+ display: flex;
+ flex-direction: row;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.video .link {
+ display: flex;
+ flex-direction: row;
+ flex: 1 1 0;
+ gap: 0.125rem;
+ outline-offset: 4px;
+ cursor: pointer;
+}
+
+.video .info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: 8px;
+ gap: 0.125rem;
+}
+
+.video .info:hover {
+ text-decoration: underline;
+}
+
+.video-title {
+ font-size: 15px;
+ line-height: 1.25;
+ font-weight: 700;
+ color: #23272f;
+}
+
+.video-description {
+ color: #5e687e;
+ font-size: 13px;
+}
+
+/* Details */
+.details .thumbnail {
+ position: relative;
+ aspect-ratio: 16 / 9;
+ display: flex;
+ overflow: hidden;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border-radius: 0.5rem;
+ outline-offset: 2px;
+ width: 100%;
+ vertical-align: middle;
+ background-color: #ffffff;
+ background-size: cover;
+ user-select: none;
+}
+
+.video-details-title {
+ margin-top: 8px;
+}
+
+.video-details-speaker {
+ display: flex;
+ gap: 8px;
+ margin-top: 10px
+}
+
+.back {
+ display: flex;
+ align-items: center;
+ margin-left: -5px;
+ cursor: pointer;
+}
+
+.back:hover {
+ text-decoration: underline;
+}
+
+.info-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 8px 0 0 0 ;
+}
+
+.info-description {
+ margin: 8px 0 0 0;
+}
+
+.controls {
+ cursor: pointer;
+}
+
+.fallback {
+ background: #f6f7f8 linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%) no-repeat;
+ background-size: 800px 104px;
+ display: block;
+ line-height: 1.25;
+ margin: 8px 0 0 0;
+ border-radius: 5px;
+ overflow: hidden;
+
+ animation: 1s linear 1s infinite shimmer;
+ animation-delay: 300ms;
+ animation-duration: 1s;
+ animation-fill-mode: forwards;
+ animation-iteration-count: infinite;
+ animation-name: shimmer;
+ animation-timing-function: linear;
+}
+
+
+.fallback.title {
+ width: 130px;
+ height: 30px;
+
+}
+
+.fallback.description {
+ width: 150px;
+ height: 21px;
+}
+
+@keyframes shimmer {
+ 0% {
+ background-position: -468px 0;
+ }
+
+ 100% {
+ background-position: 468px 0;
+ }
+}
+
+.search {
+ margin-bottom: 10px;
+}
+.search-input {
+ width: 100%;
+ position: relative;
+}
+
+.search-icon {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ inset-inline-start: 0;
+ display: flex;
+ align-items: center;
+ padding-inline-start: 1rem;
+ pointer-events: none;
+ color: #99a1b3;
+}
+
+.search-input input {
+ display: flex;
+ padding-inline-start: 2.75rem;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ width: 100%;
+ text-align: start;
+ background-color: rgb(235 236 240);
+ outline: 2px solid transparent;
+ cursor: pointer;
+ border: none;
+ align-items: center;
+ color: rgb(35 39 47);
+ border-radius: 9999px;
+ vertical-align: middle;
+ font-size: 15px;
+}
+
+.search-input input:hover, .search-input input:active {
+ background-color: rgb(235 236 240/ 0.8);
+ color: rgb(35 39 47/ 0.8);
+}
+
+/* Home */
+.video-list {
+ position: relative;
+}
+
+.video-list .videos {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ overflow-y: auto;
+ height: 100%;
+}
+```
+
+
+```css src/animations.css
+/* No additional animations needed */
+
+
+
+
+
+
+
+
+
+/* Previously defined animations below */
+
+
+
+
+
+
+/* Slide animations for Suspense the fallback down */
+::view-transition-old(.slide-down) {
+ animation: 150ms ease-out both fade-out, 150ms ease-out both slide-down;
+}
+
+::view-transition-new(.slide-up) {
+ animation: 210ms ease-in 150ms both fade-in, 400ms ease-in both slide-up;
+}
+
+/* Animations for view transition classed added by transition type */
+::view-transition-old(.slide-forward) {
+ /* when sliding forward, the "old" page should slide out to left. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(.slide-forward) {
+ /* when sliding forward, the "new" page should slide in from right. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+
+::view-transition-old(.slide-back) {
+ /* when sliding back, the "old" page should slide out to right. */
+ animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
+}
+
+::view-transition-new(.slide-back) {
+ /* when sliding back, the "new" page should slide in from left. */
+ animation: 210ms cubic-bezier(0, 0, 0.2, 1) 150ms both fade-in,
+ 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+}
+
+/* Keyframes to support our animations above. */
+@keyframes slide-up {
+ from {
+ transform: translateY(10px);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(10px);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out {
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-to-right {
+ to {
+ transform: translateX(50px);
+ }
+}
+
+@keyframes slide-from-right {
+ from {
+ transform: translateX(50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-to-left {
+ to {
+ transform: translateX(-50px);
+ }
+}
+
+@keyframes slide-from-left {
+ from {
+ transform: translateX(-50px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+/* Default .slow-fade. */
+::view-transition-old(.slow-fade) {
+ animation-duration: 500ms;
+}
+
+::view-transition-new(.slow-fade) {
+ animation-duration: 500ms;
+}
+```
+
+```js src/index.js hidden
+import React, {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import './styles.css';
+import './animations.css';
+
+import App from './App';
+import {Router} from './router';
+
+const root = createRoot(document.getElementById('root'));
+root.render(
+
+
+
+
+
+);
+```
+
+```json package.json hidden
+{
+ "dependencies": {
+ "react": "experimental",
+ "react-dom": "experimental",
+ "react-scripts": "latest"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
+```
+
+
+
+### Server-Side Rendering with Activity {/*server-side-rendering-with-activity*/}
+
+When using Activity on a page that uses server-side rendering (SSR), there are additional optimizations.
+
+If part of the page is rendered with `mode="hidden"`, then it will not be included in the SSR response. Instead, React will schedule a client render for the content inside Activity while the rest of the page hydrates, prioritizing the visible content on screen.
+
+For parts of the UI rendered with `mode="visible"`, React will de-prioritize hydration of content within Activity, similar to how Suspense content is hydrated at a lower priority. If the user interacts with the page, we'll prioritize hydration within the boundary if needed.
+
+These are advanced use cases, but they show the additional benefits considered with Activity.
+
+### Future modes for Activity {/*future-modes-for-activity*/}
+
+In the future, we may add more modes to Activity.
+
+For example, a common use case is rendering a modal, where the previous "inactive" page is visible behind the "active" modal view. The "hidden" mode does not work for this use case because it's not visible and not included in SSR.
+
+Instead, we're considering a new mode that would keep the content visible—and included in SSR—but keep it unmounted and de-prioritize updates. This mode may also need to "pause" DOM updates, since it can be distracting to see backgrounded content updating while a modal is open.
+
+Another mode we're considering for Activity is the ability to automatically destroy state for hidden Activities if there is too much memory being used. Since the component is already unmounted, it may be preferable to destroy state for the least recently used hidden parts of the app rather than consume too many resources.
+
+These are areas we're still exploring, and we'll share more as we make progress. For more information on what Activity includes today, [check out the docs](/reference/react/Activity).
+
+---
+
+# Features in development {/*features-in-development*/}
+
+We're also developing features to help solve the common problems below.
+
+As we iterate on possible solutions, you may see some potential APIs we're testing being shared based on the PRs we are landing. Please keep in mind that as we try different ideas, we often change or remove different solutions after trying them out.
+
+When the solutions we're working on are shared too early, it can create churn and confusion in the community. To balance being transparent and limiting confusion, we're sharing the problems we're currently developing solutions for, without sharing a particular solution we have in mind.
+
+As these features progress, we'll announce them on the blog with docs included so you can try them out.
+
+## React Performance Tracks {/*react-performance-tracks*/}
+
+We're working on a new set of custom tracks to performance profilers using browser APIs that [allow adding custom tracks](https://developer.chrome.com/docs/devtools/performance/extension) to provide more information about the performance of your React app.
+
+This feature is still in progress, so we're not ready to publish docs to fully release it as an experimental feature yet. You can get a sneak preview when using an experimental version of React, which will automatically add the performance tracks to profiles:
+
+
+
+
+
+
+
+
+
+
+
+
+There are a few known issues we plan to address such as performance, and the scheduler track not always "connecting" work across Suspended trees, so it's not quite ready to try. We're also still collecting feedback from early adopters to improve the design and usability of the tracks.
+
+Once we solve those issues, we'll publish experimental docs and share that it's ready to try.
+
+---
+
+## Automatic Effect Dependencies {/*automatic-effect-dependencies*/}
+
+When we released hooks, we had three motivations:
+
+- **Sharing code between components**: hooks replaced patterns like render props and higher-order components to allow you to reuse stateful logic without changing your component hierarchy.
+- **Think in terms of function, not lifecycles**: hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data), rather than forcing a split based on lifecycle methods.
+- **Support ahead-of-time compilation**: hooks were designed to support ahead-of-time compilation with less pitfalls causing unintentional de-optimizations caused by lifecycle methods, and limitations of classes.
+
+Since their release, hooks have been successful at *sharing code between components*. Hooks are now the favored way to share logic between components, and there are less use cases for render props and higher order components. Hooks have also been successful at supporting features like Fast Refresh that were not possible with class components.
+
+### Effects can be hard {/*effects-can-be-hard*/}
+
+Unfortunately, some hooks are still hard to think in terms of function instead of lifecycles. Effects specifically are still hard to understand and are the most common pain point we hear from developers. Last year, we spent a significant amount of time researching how Effects were used, and how those use cases could be simplified and easier to understand.
+
+We found that often, the confusion is from using an Effect when you don't need to. The [You Might Not Need an Effect](/learn/you-might-not-need-an-effect) guide covers many cases for when Effects are not the right solution. However, even when an Effect is the right fit for a problem, Effects can still be harder to understand than class component lifecycles.
+
+We believe one of the reasons for confusion is that developers to think of Effects from the _component's_ perspective (like a lifecycle), instead of the _Effects_ point of view (what the Effect does).
+
+Let's look at an example [from the docs](/learn/lifecycle-of-reactive-effects#thinking-from-the-effects-perspective):
+
+```js
+useEffect(() => {
+ // Your Effect connected to the room specified with roomId...
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ // ...until it disconnected
+ connection.disconnect();
+ };
+}, [roomId]);
+```
+
+Many users would read this code as "on mount, connect to the roomId. whenever `roomId` changes, disconnect to the old room and re-create the connection". However, this is thinking from the component's lifecycle perspective, which means you will need to think of every component lifecycle state to write the Effect correctly. This can be difficult, so it's understandable that Effects seem harder than class lifecycles when using the component perspective.
+
+### Effects without dependencies {/*effects-without-dependencies*/}
+
+Instead, it's better to think from the Effect's perspective. The Effect doesn't know about the component lifecycles. It only describes how to start synchronization and how to stop it. When users think of Effects in this way, their Effects tend to be easier to write, and more resilient to being started and stopped as many times as is needed.
+
+We spent some time researching why Effects are thought of from the component perspective, and we think one of the reasons is the dependency array. Since you have to write it, it's right there and in your face reminding you of what you're "reacting" to and baiting you into the mental model of 'do this when these values change'.
+
+When we released hooks, we knew we could make them easier to use with ahead-of-time compilation. With the React Compiler, you're now able to avoid writing `useCallback` and `useMemo` yourself in most cases. For Effects, the compiler can insert the dependencies for you:
+
+```js
+useEffect(() => {
+ const connection = createConnection(serverUrl, roomId);
+ connection.connect();
+ return () => {
+ connection.disconnect();
+ };
+}); // compiler inserted dependencies.
+```
+
+With this code, the React Compiler can infer the dependencies for you and insert them automatically so you don't need to see or write them. With features like [the IDE extension](#compiler-ide-extension) and [`useEffectEvent`](/reference/react/experimental_useEffectEvent), we can provide a CodeLens to show you what the Compiler inserted for times you need to debug, or to optimize by removing a dependency. This helps reinforce the correct mental model for writing Effects, which can run at any time to synchronize your component or hook's state with something else.
+
+Our hope is that automatically inserting dependencies is not only easier to write, but that it also makes them easier to understand by forcing you to think in terms of what the Effect does, and not in component lifecycles.
+
+---
+
+## Compiler IDE Extension {/*compiler-ide-extension*/}
+
+Earlier this week [we shared](/blog/2025/04/21/react-compiler-rc) the React Compiler release candidate, and we're working towards shipping the first SemVer stable version of the compiler in the coming months.
+
+We've also begun exploring ways to use the React Compiler to provide information that can improve understanding and debugging your code. One idea we've started exploring is a new experimental LSP-based React IDE extension powered by React Compiler, similar to the extension used in [Lauren Tan's React Conf talk](https://conf2024.react.dev/talks/5).
+
+Our idea is that we can use the compiler's static analysis to provide more information, suggestions, and optimization opportunities directly in your IDE. For example, we can provide diagnostics for code breaking the Rules of React, hovers to show if components and hooks were optimized by the compiler, or a CodeLens to see [automatically inserted Effect dependencies](#automatic-effect-dependencies).
+
+The IDE extension is still an early exploration, but we'll share our progress in future updates.
+
+---
+
+## Fragment Refs {/*fragment-refs*/}
+
+Many DOM APIs like those for event management, positioning, and focus are difficult to compose when writing with React. This often leads developers to reach for Effects, managing multiple Refs, by using APIs like `findDOMNode` (removed in React 19).
+
+We are exploring adding refs to Fragments that would point to a group of DOM elements, rather than just a single element. Our hope is that this will simplify managing multiple children and make it easier to write composable React code when calling DOM APIs.
+
+Fragment refs are still being researched. We'll share more when we're closer to having the final API finished.
+
+---
+
+## Gesture Animations {/*gesture-animations*/}
+
+We're also researching ways to enhance View Transitions to support gesture animations such as swiping to open a menu, or scroll through a photo carousel.
+
+Gestures present new challenges for a few reasons:
+
+- **Gestures are continuous**: as you swipe the animation is tied to your finger placement time, rather than triggering and running to completion.
+- **Gestures don't complete**: when you release your finger gesture animations can run to completion, or revert to their original state (like when you only partially open a menu) depending on how far you go.
+- **Gestures invert old and new**: while you're animating, you want the page you are animating from to stay "alive" and interactive. This inverts the browser View Transition model where the "old" state is a snapshot and the "new" state is the live DOM.
+
+We believe we’ve found an approach that works well and may introduce a new API for triggering gesture transitions. For now, we're focused on shipping ``, and will revisit gestures afterward.
+
+---
+
+## Concurrent Stores {/*concurrent-stores*/}
+
+When we released React 18 with concurrent rendering, we also released `useSyncExternalStore` so external store libraries that did not use React state or context could [support concurrent rendering](https://github.com/reactwg/react-18/discussions/70) by forcing a synchronous render when the store is updated.
+
+Using `useSyncExternalStore` comes at a cost though, since it forces a bail out from concurrent features like transitions, and forces existing content to show Suspense fallbacks.
+
+Now that React 19 has shipped, we're revisiting this problem space to create a primitive to fully support concurrent external stores with the `use` API:
+
+```js
+const value = use(store);
+```
+
+Our goal is to allow external state to be read during render without tearing, and to work seamlessly with all of the concurrent features React offers.
+
+This research is still early. We'll share more, and what the new APIs will look like, when we're further along.
+
+---
+
+_Thanks to [Aurora Scharff](https://bsky.app/profile/aurorascharff.no), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Eli White](https://twitter.com/Eli_White), [Lauren Tan](https://bsky.app/profile/no.lol), [Luna Wei](https://github.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Jack Pope](https://jackpope.me), [Jason Bonta](https://threads.net/someextent), [Jordan Brown](https://github.com/jbrown215), [Jordan Eldredge](https://bsky.app/profile/capt.dev), [Mofei Zhang](https://threads.net/z_mofei), [Sebastien Lorber](https://bsky.app/profile/sebastienlorber.com), [Sebastian Markbåge](https://bsky.app/profile/sebmarkbage.calyptus.eu), and [Tim Yung](https://github.com/yungsters) for reviewing this post._
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index 165fac7ab..17a77842f 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -4,13 +4,47 @@ title: Blog React
+<<<<<<< HEAD
Ce blog est la source officielle des mises à jour par l'équipe React. Toute annonce importante, y compris les notes de versions et les avertissements de dépréciation, sera faite ici en premier. Vous pouvez aussi suivre le compte [@reactjs](https://twitter.com/reactjs) sur Twitter, mais vous êtes sûr·e de ne rien rater d'important si vous ne lisez que ce blog.
+=======
+This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first.
+
+You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
+<<<<<<< HEAD
+=======
+
+
+In React Labs posts, we write about projects in active research and development. In this post, we're sharing two new experimental features that are ready to try today, and sharing other areas we're working on now ...
+
+
+
+
+
+We are releasing the compiler's first Release Candidate (RC) today.
+
+
+
+
+
+Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch ...
+
+
+
+
+
+In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
+
+
+
+
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
Nous avions annoncé la sortie expérimentale de React Compiler lors de la React Conf 2024. Nous avons beaucoup avancé depuis, et dans cet article nous aimerions partager avec vous la suite de nos travaux sur ce compilateur…
@@ -27,6 +61,7 @@ Dans le guide de migration vers React 19 RC, nous vous donnions des instructions
+<<<<<<< HEAD
Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19…
@@ -34,6 +69,9 @@ Les améliorations apportées par React 19 RC nécessitent quelques ruptures de
+=======
+
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
Dans les billets React Labs, nous vous parlons de nos projets de recherche et développement actifs. Depuis notre dernier bulletin, nous avons fait des progrès significatifs sur le React Compiler et React 19, et nous aimerions partager ce que nous avons appris.
diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md
index 2e6dca4fb..207679e3f 100644
--- a/src/content/community/acknowledgements.md
+++ b/src/content/community/acknowledgements.md
@@ -36,6 +36,8 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
* [Joe Critchley](https://github.com/joecritch)
* [Jeff Morrison](https://github.com/jeffmo)
* [Luna Ruan](https://github.com/lunaruan)
+* [Luna Wei](https://github.com/lunaleaps)
+* [Noah Lemen](https://github.com/noahlemen)
* [Kathryn Middleton](https://github.com/kmiddleton14)
* [Keyan Zhang](https://github.com/keyz)
* [Marco Salazar](https://github.com/salazarm)
@@ -51,9 +53,10 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
* [Samuel Susla](https://github.com/sammy-SC)
* [Sander Spies](https://github.com/sanderspies)
* [Sasha Aickin](https://github.com/aickin)
-* [Sean Keegan](https://github.com/seanryankeegan)
+* [Sathya Gunasekaran](https://github.com/gsathya)
* [Sophia Shoemaker](https://github.com/mrscobbler)
* [Sunil Pai](https://github.com/threepointone)
+* [Tianyu Yao](https://github.com/)
* [Tim Yung](https://github.com/yungsters)
* [Xuan Huang](https://github.com/huxpro)
diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 27c1b7018..4d0ca5909 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,62 +10,179 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse
## Conférences à venir {/*upcoming-conferences*/}
-### React Universe Conf 2024 {/*react-universe-conf-2024*/}
-September 5-6, 2024. Wrocław, Poland.
+### React Universe Conf 2025 {/*react-universe-conf-2025*/}
+September 2-4, 2025. Wrocław, Poland.
[Site web](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
-### React Alicante 2024 {/*react-alicante-2024*/}
-September 19-21, 2024. Alicante, Spain.
+### React Alicante 2025 {/*react-alicante-2025*/}
+October 2-4, 2025. Alicante, Spain.
+<<<<<<< HEAD
[Site web](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+=======
+[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
-### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
-October 04 - 05, 2024. Nairobi, Kenya
+### RenderCon Kenya 2025 {/*rendercon-kenya-2025*/}
+October 04, 2025. Nairobi, Kenya
[Site web](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
-### React India 2024 {/*react-india-2024*/}
-October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+### React Conf 2025 {/*react-conf-2025*/}
+October 7-8, 2025. Henderson, Nevada, USA and free livestream
+
+[Website](https://conf.react.dev/) - [Twitter](https://x.com/reactjs) - [Bluesky](https://bsky.app/profile/react.dev)
+
+### React India 2025 {/*react-india-2025*/}
+October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day
[Site web](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
-### React Brussels 2024 {/*react-brussels-2024*/}
-October 18, 2024. In-person in Brussels, Belgium (hybrid event)
+<<<<<<< HEAD
[Site web](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)
+=======
+### CityJS New Delhi 2025 {/*cityjs-newdelhi*/}
+November 6-7, 2025. In-person in New Delhi, India
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
-### reactjsday 2024 {/*reactjsday-2024*/}
-October 25, 2024. In-person in Verona, Italy + online (hybrid event)
+[Website](https://india.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+<<<<<<< HEAD
[Site web](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+=======
+### React Summit US 2025 {/*react-summit-us-2025*/}
+November 18 - 21, 2025. In-person in New York, USA + remote (hybrid event)
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
-### React Advanced London 2024 {/*react-advanced-london-2024*/}
-October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit)
+
+### React Advanced London 2025 {/*react-advanced-london-2025*/}
+November 28 & December 1, 2025. In-person in London, UK + online (hybrid event)
[Site web](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
-### React Native London Conf 2024 {/*react-native-london-2024*/}
-November 14 & 15, 2024. In-person in London, UK
+### React Paris 2026 {/*react-paris-2026*/}
+March 26 - 27, 2026. In-person in Paris, France (hybrid event)
+<<<<<<< HEAD
[Site web](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+=======
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_)
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
-### React Summit US 2024 {/*react-summit-us-2024*/}
-November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+<<<<<<< HEAD
[Site web](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+=======
+## Past Conferences {/*past-conferences*/}
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
-### React Africa 2024 {/*react-africa-2024*/}
-November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
+<<<<<<< HEAD
[Site web](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+=======
+### React Nexus 2025 {/*react-nexus-2025*/}
+July 03 - 05, 2025. In-person in Bangalore, India
+
+[Website](https://reactnexus.com/) - [Twitter](https://x.com/ReactNexus) - [Bluesky](https://bsky.app/profile/reactnexus.com) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
+
+### React Summit 2025 {/*react-summit-2025*/}
+June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit)
+
+### React Norway 2025 {/*react-norway-2025*/}
+June 13, 2025. In-person in Oslo, Norway + remote (virtual event)
+
+[Website](https://reactnorway.com/) - [Twitter](https://x.com/ReactNorway)
+
+### CityJS Athens 2025 {/*cityjs-athens*/}
+May 27 - 31, 2025. In-person in Athens, Greece
+
+[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### App.js Conf 2025 {/*appjs-conf-2025*/}
+May 28 - 30, 2025. In-person in Kraków, Poland + remote
+
+[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
+
+### CityJS London 2025 {/*cityjs-london*/}
+April 23 - 25, 2025. In-person in London, UK
+
+[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social)
+
+### React Paris 2025 {/*react-paris-2025*/}
+March 20 - 21, 2025. In-person in Paris, France (hybrid event)
+
+[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj)
+
+### React Native Connection 2025 {/*react-native-connection-2025*/}
+April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France.
+
+[Website](https://reactnativeconnection.io/) - [X](https://x.com/reactnativeconn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social)
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
### React Day Berlin 2024 {/*react-day-berlin-2024*/}
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)
[Site web](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)
+<<<<<<< HEAD
## Conférences passées {/*past-conferences*/}
+=======
+### React Africa 2024 {/*react-africa-2024*/}
+November 29, 2024. In-person in Casablanca, Morocco (hybrid event)
+
+[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)
+
+### React Summit US 2024 {/*react-summit-us-2024*/}
+November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)
+
+[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)
+
+### React Native London Conf 2024 {/*react-native-london-2024*/}
+November 14 & 15, 2024. In-person in London, UK
+
+[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf)
+
+### React Advanced London 2024 {/*react-advanced-london-2024*/}
+October 25 & 28, 2024. In-person in London, UK + online (hybrid event)
+
+[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)
+
+### reactjsday 2024 {/*reactjsday-2024*/}
+October 25, 2024. In-person in Verona, Italy + online (hybrid event)
+
+[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
+
+### React Brussels 2024 {/*react-brussels-2024*/}
+October 18, 2024. In-person in Brussels, Belgium (hybrid event)
+
+[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWimQ0U75woee2zNUIFsiDC3)
+
+### React India 2024 {/*react-india-2024*/}
+October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
+
+[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w)
+
+### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
+October 04 - 05, 2024. Nairobi, Kenya
+
+[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
+
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA
diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md
index b04ac17ee..84e6f427c 100644
--- a/src/content/community/docs-contributors.md
+++ b/src/content/community/docs-contributors.md
@@ -10,6 +10,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
## Contenu {/*content*/}
+<<<<<<< HEAD
* [Rachel Nabors](https://twitter.com/RachelNabors) : révisions, rédaction, illustrations
* [Dan Abramov](https://twitter.com/dan_abramov) : rédaction, conception du curriculum
* [Sylwia Vargas](https://twitter.com/SylwiaVargas) : codes d'exemple
@@ -21,6 +22,19 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
* [Matt Carroll](https://twitter.com/mattcarrollcode) : révisions, rédaction
* [Natalia Tepluhina](https://twitter.com/n_tepluhina) : révisions, avis
* [Sebastian Markbåge](https://twitter.com/sebmarkbage) : retours
+=======
+* [Rachel Nabors](https://twitter.com/RachelNabors): editing, writing, illustrating
+* [Dan Abramov](https://bsky.app/profile/danabra.mov): writing, curriculum design
+* [Sylwia Vargas](https://twitter.com/SylwiaVargas): example code
+* [Rick Hanlon](https://twitter.com/rickhanlonii): writing
+* [David McCabe](https://twitter.com/mcc_abe): writing
+* [Sophie Alpert](https://twitter.com/sophiebits): writing
+* [Pete Hunt](https://twitter.com/floydophone): writing
+* [Andrew Clark](https://twitter.com/acdlite): writing
+* [Matt Carroll](https://twitter.com/mattcarrollcode): editing, writing
+* [Natalia Tepluhina](https://twitter.com/n_tepluhina): reviews, advice
+* [Sebastian Markbåge](https://twitter.com/sebmarkbage): feedback
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
## Design {/*design*/}
@@ -31,6 +45,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
## Développement {/*development*/}
+<<<<<<< HEAD
* [Jared Palmer](https://twitter.com/jaredpalmer) : développement du site
* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando) et [Dustin Goodman](https://twitter.com/dustinsgoodman)) : développement du site
* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor) et [Danilo Woznica](https://twitter.com/danilowoz)) : intégration des bacs à sable
@@ -38,5 +53,14 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
* [Rick Hanlon](https://twitter.com/rickhanlonii) : développement du site
* [Harish Kumar](https://www.strek.in/) : development et maintenance
* [Luna Ruan](https://twitter.com/lunaruan) : améliorations des bacs à sable
+=======
+* [Jared Palmer](https://twitter.com/jaredpalmer): site development
+* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): site development
+* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor), [Danilo Woznica](https://twitter.com/danilowoz)): sandbox integration
+* [Dan Abramov](https://bsky.app/profile/danabra.mov): site development
+* [Rick Hanlon](https://twitter.com/rickhanlonii): site development
+* [Harish Kumar](https://www.strek.in/): development and maintenance
+* [Luna Ruan](https://twitter.com/lunaruan): sandbox improvements
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
Nous aimerions aussi remercier les innombrables testeurs de la première heure et membres de la communautés qui nous ont fourni des retours tout au long de notre travail.
diff --git a/src/content/community/index.md b/src/content/community/index.md
index 68208a7ec..f37cd9021 100644
--- a/src/content/community/index.md
+++ b/src/content/community/index.md
@@ -29,4 +29,8 @@ Chaque communauté est composée de plusieurs milliers d'utilisateurs de React.
## Actualités {/*news*/}
+<<<<<<< HEAD
Pour les dernières nouvelles sur React, [suivez **@reactjs** sur Twitter](https://twitter.com/reactjs) et le [blog officiel de React](/blog/) sur ce site.
+=======
+For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index bed42f779..ff2ab5f1d 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -53,7 +53,7 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un
## Canada {/*canada*/}
* [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
+* [Montreal, QC](https://guild.host/react-montreal/)
* [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
* [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
* [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
@@ -62,17 +62,133 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un
## Colombie {/*colombia*/}
* [Medellin](https://www.meetup.com/React-Medellin/)
+<<<<<<< HEAD
## Danemark {/*denmark*/}
* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
## Écosse (R.-U.) {/*scotland-uk*/}
* [Edinburgh](https://www.meetup.com/React-Scotland/)
+=======
+## Czechia {/*czechia*/}
+* [Prague](https://guild.host/react-prague/)
+
+## Denmark {/*denmark*/}
+* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
+* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
+
+## England (UK) {/*england-uk*/}
+* [Manchester](https://www.meetup.com/Manchester-React-User-Group/)
+* [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/)
+* [React Advanced London](https://guild.host/react-advanced-london)
+* [React Native Liverpool](https://www.meetup.com/react-native-liverpool/)
+* [React Native London](https://guild.host/RNLDN)
+
+## Finland {/*finland*/}
+* [Helsinki](https://www.meetabit.com/communities/react-helsinki)
+
+## France {/*france*/}
+* [Lille](https://www.meetup.com/ReactBeerLille/)
+* [Paris](https://www.meetup.com/ReactJS-Paris/)
+
+## Germany {/*germany*/}
+* [Cologne](https://www.meetup.com/React-Cologne/)
+* [Düsseldorf](https://www.meetup.com/de-DE/ReactJS-Meetup-Dusseldorf/)
+* [Hamburg](https://www.meetup.com/Hamburg-React-js-Meetup/)
+* [Karlsruhe](https://www.meetup.com/react_ka/)
+* [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/)
+* [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/)
+* [React Berlin](https://guild.host/react-berlin)
+
+## Greece {/*greece*/}
+* [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/)
+* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
+
+## India {/*india*/}
+* [Ahmedabad](https://reactahmedabad.dev/)
+* [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/)
+* [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup)
+* [Chennai](https://www.linkedin.com/company/chennaireact)
+* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
+* [Mumbai](https://reactmumbai.dev)
+* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
+* [Rajasthan](https://reactrajasthan.com)
+
+## Indonesia {/*indonesia*/}
+* [Indonesia](https://www.meetup.com/reactindonesia/)
+
+## Ireland {/*ireland*/}
+* [Dublin](https://guild.host/reactjs-dublin)
+
+## Israel {/*israel*/}
+* [Tel Aviv](https://www.meetup.com/ReactJS-Israel/)
+
+## Italy {/*italy*/}
+* [Milan](https://www.meetup.com/React-JS-Milano/)
+
+## Japan {/*japan*/}
+* [Osaka](https://react-osaka.connpass.com/)
+
+## Kenya {/*kenya*/}
+* [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske)
+
+## Malaysia {/*malaysia*/}
+* [Kuala Lumpur](https://www.kl-react.com/)
+* [Penang](https://www.facebook.com/groups/reactpenang/)
+
+## Netherlands {/*netherlands*/}
+* [Amsterdam](https://guild.host/react-amsterdam)
+
+## New Zealand {/*new-zealand*/}
+* [Wellington](https://www.meetup.com/React-Wellington/)
+
+## Norway {/*norway*/}
+* [Norway](https://reactjs-norway.webflow.io/)
+* [Oslo](https://www.meetup.com/ReactJS-Oslo-Meetup/)
+
+## Pakistan {/*pakistan*/}
+* [Karachi](https://www.facebook.com/groups/902678696597634/)
+* [Lahore](https://www.facebook.com/groups/ReactjsLahore/)
+
+## Philippines {/*philippines*/}
+* [Manila](https://www.meetup.com/reactjs-developers-manila/)
+* [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/)
+
+## Poland {/*poland*/}
+* [Warsaw](https://www.meetup.com/React-js-Warsaw/)
+* [Wrocław](https://www.meetup.com/ReactJS-Wroclaw/)
+
+## Portugal {/*portugal*/}
+* [Lisbon](https://www.meetup.com/JavaScript-Lisbon/)
+
+## Scotland (UK) {/*scotland-uk*/}
+* [Edinburgh](https://www.meetup.com/react-edinburgh/)
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
## Espagne {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
+<<<<<<< HEAD
## États-Unis {/*us*/}
+=======
+## Sri Lanka {/*sri-lanka*/}
+* [Colombo](https://www.javascriptcolombo.com/)
+
+## Sweden {/*sweden*/}
+* [Goteborg](https://www.meetup.com/ReactJS-Goteborg/)
+* [Stockholm](https://www.meetup.com/Stockholm-ReactJS-Meetup/)
+
+## Switzerland {/*switzerland*/}
+* [Zurich](https://www.meetup.com/Zurich-ReactJS-Meetup/)
+
+## Turkey {/*turkey*/}
+* [Istanbul](https://kommunity.com/reactjs-istanbul)
+
+## Ukraine {/*ukraine*/}
+* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)
+
+## US {/*us*/}
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
* [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/)
* [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/)
* [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/)
@@ -83,6 +199,7 @@ Vous connaissez un meetup React.js local ? Ajoutez-le ! (Merci de conserver un
* [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/)
* [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/)
* [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/)
+* [Denver, CO - React Denver](https://reactdenver.com/)
* [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/)
* [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy)
* [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/)
diff --git a/src/content/community/team.md b/src/content/community/team.md
index 225d089ac..693a57239 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -22,12 +22,25 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Dan a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint. Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
+<<<<<<< HEAD
Eli a commencé la programmation après avoir été suspendu au collège pour piratage. Il travaille sur React et React Native depuis 2017. Il aime manger des sucreries, en particulier les crèmes glacées et la tarte aux pommes. Vous le trouverez généralement en train d'essayer des trucs un peu fous comme le parkour, les simulateurs de chute libre ou la danse aérienne sur rubans de soie.
Peut après avoir découvert AutoHotkey, Jack écrivait des scripts pour automatiser tout ce à quoi il pouvait penser. Lorsqu'il a atteint les limites de l'exercice, il s'est plongé dans le développement web et n'a jamais regardé en arrière. Dernièrement, Jack a travaillé sur la plateforme web d'Instagram, avant de migrer vers React. Son langage de programmation préféré est JSX.
+=======
+
+ Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks.
+
+
+
+ Hendrik’s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop.
+
+
+
+ Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -38,6 +51,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Joe pensait axer ses études sur les maths et la philosophie, mais s'est retrouvé en informatique après avoir écrit des simulations de physique dans Matlab. Avant React, il travaillait sur Relay, RSocket.js et le langage de programmation Skip. Lorsqu'il n'est pas en train de pondre un système réactif il aime courir, apprendre le japonais, et passer du temps en famille.
+<<<<<<< HEAD
Josh a étudié les Mathématiques et découvert la programmation pendant ses études. Son premier boulot de développeur professionnel consistait à calculer des taux d'assurance dans Microsoft Excel, ce parangon de Programmation Réactive, ce qui explique probablement pourquoi il bosse désormais sur React. Entre les deux Josh a été contributeur, manager voire directeur dans quelques startups. Hors du boulot, il aime se lancer des défis de cuisine.
@@ -48,18 +62,43 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Luna a appris les bases de Python à 6 ans grâce à son père. Depuis plus rien ne l'arrête. Luna a bien l'intention d'être une Génération Z, et le chemin du succès passe par la défense de l'environnement, du jardinage urbain et beaucoup de temps précieux passé avec Voo-Doo (voir photo).
+=======
+
+ Jordan started coding by building iPhone apps, where he was pushing and popping view controllers before he knew that for-loops were a thing. He enjoys working on technology that developers love, which naturally drew him to React. Outside of work he enjoys reading, kiteboarding, and playing guitar.
+
+
+
+ Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking.
+
+
+
+ Lauren's programming career peaked when she first discovered the `
Matt est tombé par hasard dans le code, et depuis il adore créer grâce à des communautés des trucs qu'on ne peut pas créer tout seuls. Avant React, il a travaillé sur YouTube, l'Assistant Google, Fuchsia, Google Cloud AI et Evernote. Lorsqu'il n'est pas en train d'améliorer l'outillage des développeurs il aime la montagne, le jazz, et passer du temps en famille.
+<<<<<<< HEAD
Mofei a commencé à programmer dès qu'elle a réalisé que ça pouvait l'aider à tricher aux jeux vidéos. Ses études se sont concentrées sur les systèmes d'exploitation (OS), mais elle aime aujourd'hui triturer React. Hors du boulot, elle aime déboguer des problèmes d'escalade de bloc et planifier ses prochaines randonnées.
Noah a commencé à s'intéresser à la programmation d'UI lors de ses études en technologies musicales à NYU. Chez Meta, il a travaillé sur des outils internes, des navigateurs, la performance web, et se concentre actuellement sur React. Quand il n'est pas au boulot, Noah est généralement en train de triturer des synthétiseurs ou de passer du temps avec son chat.
+=======
+
+ Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest.
+
+
+
+ Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
+
+
+
+ Pieter studied building science but after failing to get a job he made himself a website and things escalated from there. At Meta, he enjoys working on performance, languages and now React. When he's not programming you can find him off-road in the mountains.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -70,12 +109,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Ruslan a commencé enfant à programmer des UI en modifiant des gabarits HTML pour ses forums personnalisés de jeux. Sans trop savoir comment, il a fini par spécialiser ses études en informatique. Il aime la musique, les jeux, et les mèmes. Surtout les mèmes.
+<<<<<<< HEAD
Sathya a détesté le *Dragon Book* durant ses études, et pourtant a fini par consacrer sa carrière aux compilateurs. Lorsqu'il n'est pas en train de compiler des composants React, soit il boit du café soit il mange encore un Dosa.
Sébastien a étudié la psychologie. Il est généralement silencieux. Même lorsqu'il dit quelque chose, ça ne finit par avoir du sens pour le reste d'entre nous que quelques mois plus tard. La véritable pronconciation de son nom de famille est « marc-bau-jai », mais il a fini par tolérer « marc-beige » par pur pragmatisme — une approche qu'il applique aussi à React.
+=======
+
+ Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -90,12 +134,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Quatre jours après la sortie de React, Sophie réécrivait l'intégralité de son projet d'alors pour s'en servir, ce qui avec le recul lui semble un brin téméraire. Après être devenue la principale contributrice au projet, elle s'est demandée pourquoi elle n'était pas payée par Facebook comme tous les autres et a officiellement rejoint l'équipe pour guider React à travers sa phase adolescente. Même si elle a quitté le poste il y a plusieurs années, on la trouve encore dans les forums de discussion de l'équipe où elle « ajoute de la valeur ».
+<<<<<<< HEAD
Tianyu s'est intéressé aux ordinateurs dès l'enfance par amour des jeux vidéos. Il a donc étudié l'informatique et joue encore à des jeux pour enfants comme *League of Legends*. Lorsqu'il n'est pas devant son ordinateur, il aime jouer avec ses deux chatons, randonner et faire du kayak.
Yuzhi a étudié l'informatique à l'école. Elle aimait cette gratification instantanée ressentie en voyant son code prendre vie sans avoir à être physiquement dans un laboratoire. Elle gère aujourd'hui l'organisation React. Avant cela, elle travaillait sur le framework de chargement de données Relay. Dans son temps libre, Yuzhi aime optimiser sa vie au travers du jardinage et de projets d'amélioration de sa maison.
+=======
+
+ Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
## Contributeurs historiques {/*past-contributors*/}
diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md
index a13f39e22..15e6c18de 100644
--- a/src/content/community/versioning-policy.md
+++ b/src/content/community/versioning-policy.md
@@ -8,7 +8,11 @@ Toutes les versions stables de React sont soumises à un niveau élevé de tests
+<<<<<<< HEAD
Pour une liste des versions antérieures, consultez la page [Versions](/versions).
+=======
+This versioning policy describes our approach to version numbers for packages such as `react` and `react-dom`. For a list of previous releases, see the [Versions](/versions) page.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
## Versions stables {/*stable-releases*/}
@@ -24,7 +28,13 @@ Les livraisons majeures peuvent également intégrer de nouvelles fonctionnalit
Les livraisons mineures sont les plus fréquentes.
+<<<<<<< HEAD
### Ruptures de compatibilité ascendante {/*breaking-changes*/}
+=======
+We know our users continue to use old versions of React in production. If we learn of a security vulnerability in React, we release a backported fix for all major versions that are affected by the vulnerability.
+
+### Breaking changes {/*breaking-changes*/}
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
Les ruptures de compatibilité ascendante sont gênantes pour tout le monde, aussi nous essayons de limiter le nombre de livraisons majeures — par exemple, React 15 a été publié en avril 2016, React 16 en septembre 2017 et React 17 en octobre 2020.
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index 8afc2e747..375f6b320 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -20,11 +20,19 @@ Supposons que vous ayez une application web existante sur `example.com` dévelop
Voici comment nous vous recommandons de procéder :
+<<<<<<< HEAD
1. **Construisez la partie React de votre appli** en utilisant l'un des [frameworks basés sur React](/learn/start-a-new-react-project).
2. **Indiquez `/some-app` comme *chemin de base*** dans la configuration de votre framework (voici comment faire avec [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath) ou [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
3. **Configurez votre serveur ou un proxy** de manière à ce que toutes les requêtes sous `/some-app/` soient traitées par votre application React.
Ça garantit que la partie React de votre application peut [bénéficier de tout un tas de bonnes pratiques](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) intégrées à ces frameworks.
+=======
+1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
+2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
+3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
+
+This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
De nombreux frameworks basés sur React sont des frameworks full-stack qui permettent à votre application React de tirer parti du serveur. Cependant, vous pouvez utiliser la même approche même si vous ne pouvez pas ou ne souhaitez pas exécuter JavaScript côté serveur. Dans ce cas, servez plutôt l'export HTML/CSS/JS ([`next export`](https://nextjs.org/docs/advanced-features/static-html-export) pour Next.js, résultat par défaut pour Gatsby) à l'emplacement `/some-app/`.
@@ -45,7 +53,11 @@ Un environnement JavaScript modulaire vous permet d'écrire vos composants React
* **Si votre application est déjà divisée en fichiers qui utilisent des déclarations `import`**, essayez d'utiliser la configuration que vous avez déjà. Vérifiez si l'écriture de `` dans votre code JS provoque une erreur de syntaxe. Si tel est le cas, vous devrez peut-être [transformer votre code JavaScript avec Babel](https://babeljs.io/setup), et activer le [préréglage Babel React](https://babeljs.io/docs/babel-preset-react) pour utiliser JSX.
+<<<<<<< HEAD
* **Si votre application n'a pas de configuration existante pour la compilation des modules JavaScript**, mettez-en une en place avec [Vite](https://vitejs.dev/). La communauté Vite propose de [nombreuses intégrations avec des frameworks backend](https://github.com/vitejs/awesome-vite#integrations-with-backends), notament Rails, Django et Laravel. Si votre framework backend ne figure pas dans leur liste, [suivez ce guide](https://vitejs.dev/guide/backend-integration.html) pour intégrer manuellement les builds Vite à votre backend.
+=======
+* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
Pour vérifier si votre configuration fonctionne, exécutez cette commande dans le dossier de votre projet :
@@ -57,12 +69,17 @@ Ensuite, ajoutez ces lignes de code en haut de votre fichier JavaScript principa
-```html index.html hidden
+```html public/index.html hidden
Mon appli
+<<<<<<< HEAD
+=======
+
+
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
```
@@ -84,7 +101,11 @@ Si tout le contenu de votre page a été remplacé par un « Bonjour tout le mo
+<<<<<<< HEAD
Intégrer pour la première fois un environnement JavaScript modulaire dans un projet existant pour la première fois peut sembler intimidant, mais ça en vaut la peine ! Si vous êtes bloqué, essayez nos [ressources communautaires](/community) ou discutez sur [le forum Vite](https://chat.vitejs.dev/).
+=======
+Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/).
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -119,7 +140,7 @@ Vous souhaitez probablement plutôt afficher vos composants React à des emplace
-```html index.html
+```html public/index.html
Mon appli
diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md
new file mode 100644
index 000000000..185b693b1
--- /dev/null
+++ b/src/content/learn/build-a-react-app-from-scratch.md
@@ -0,0 +1,143 @@
+---
+title: Build a React app from Scratch
+---
+
+
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a React app from scratch.
+
+
+
+
+
+#### Consider using a framework {/*consider-using-a-framework*/}
+
+Starting from scratch is an easy way to get started using React, but a major tradeoff to be aware of is that going this route is often the same as building your own adhoc framework. As your requirements evolve, you may need to solve more framework-like problems that our recommended frameworks already have well developed and supported solutions for.
+
+For example, if in the future your app needs support for server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC), you will have to implement those on your own. Similarly, future React features that require integrating at the framework level will have to be implemented on your own if you want to use them.
+
+Our recommended frameworks also help you build better performing apps. For example, reducing or eliminating waterfalls from network requests makes for a better user experience. This might not be a high priority when you are building a toy project, but if your app gains users you may want to improve its performance.
+
+Going this route also makes it more difficult to get support, since the way you develop routing, data-fetching, and other features will be unique to your situation. You should only choose this option if you are comfortable tackling these problems on your own, or if you’re confident that you will never need these features.
+
+For a list of recommended frameworks, check out [Creating a React App](/learn/creating-a-react-app).
+
+
+
+
+## Step 1: Install a build tool {/*step-1-install-a-build-tool*/}
+
+The first step is to install a build tool like `vite`, `parcel`, or `rsbuild`. These build tools provide features to package and run source code, provide a development server for local development and a build command to deploy your app to a production server.
+
+### Vite {/*vite*/}
+
+[Vite](https://vite.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+
+{`npm create vite@latest my-app -- --template react`}
+
+
+Vite is opinionated and comes with sensible defaults out of the box. Vite has a rich ecosystem of plugins to support fast refresh, JSX, Babel/SWC, and other common features. See Vite's [React plugin](https://vite.dev/plugins/#vitejs-plugin-react) or [React SWC plugin](https://vite.dev/plugins/#vitejs-plugin-react-swc) and [React SSR example project](https://vite.dev/guide/ssr.html#example-projects) to get started.
+
+Vite is already being used as a build tool in one of our [recommended frameworks](/learn/creating-a-react-app): [React Router](https://reactrouter.com/start/framework/installation).
+
+### Parcel {/*parcel*/}
+
+[Parcel](https://parceljs.org/) combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production applications.
+
+
+{`npm install --save-dev parcel`}
+
+
+Parcel supports fast refresh, JSX, TypeScript, Flow, and styling out of the box. See [Parcel's React recipe](https://parceljs.org/recipes/react/#getting-started) to get started.
+
+### Rsbuild {/*rsbuild*/}
+
+[Rsbuild](https://rsbuild.dev/) is an Rspack-powered build tool that provides a seamless development experience for React applications. It comes with carefully tuned defaults and performance optimizations ready to use.
+
+
+{`npx create-rsbuild --template react`}
+
+
+Rsbuild includes built-in support for React features like fast refresh, JSX, TypeScript, and styling. See [Rsbuild's React guide](https://rsbuild.dev/guide/framework/react) to get started.
+
+
+
+#### Metro for React Native {/*react-native*/}
+
+If you're starting from scratch with React Native you'll need to use [Metro](https://metrobundler.dev/), the JavaScript bundler for React Native. Metro supports bundling for platforms like iOS and Android, but lacks many features when compared to the tools here. We recommend starting with Vite, Parcel, or Rsbuild unless your project requires React Native support.
+
+
+
+## Step 2: Build Common Application Patterns {/*step-2-build-common-application-patterns*/}
+
+The build tools listed above start off with a client-only, single-page app (SPA), but don't include any further solutions for common functionality like routing, data fetching, or styling.
+
+The React ecosystem includes many tools for these problems. We've listed a few that are widely used as a starting point, but feel free to choose other tools if those work better for you.
+
+### Routing {/*routing*/}
+
+Routing determines what content or pages to display when a user visits a particular URL. You need to set up a router to map URLs to different parts of your app. You'll also need to handle nested routes, route parameters, and query parameters. Routers can be configured within your code, or defined based on your component folder and file structures.
+
+Routers are a core part of modern applications, and are usually integrated with data fetching (including prefetching data for a whole page for faster loading), code splitting (to minimize client bundle sizes), and page rendering approaches (to decide how each page gets generated).
+
+We suggest using:
+
+- [React Router](https://reactrouter.com/start/data/custom)
+- [Tanstack Router](https://tanstack.com/router/latest)
+
+
+### Data Fetching {/*data-fetching*/}
+
+Fetching data from a server or other data source is a key part of most applications. Doing this properly requires handling loading states, error states, and caching the fetched data, which can be complex.
+
+Purpose-built data fetching libraries do the hard work of fetching and caching the data for you, letting you focus on what data your app needs and how to display it. These libraries are typically used directly in your components, but can also be integrated into routing loaders for faster pre-fetching and better performance, and in server rendering as well.
+
+Note that fetching data directly in components can lead to slower loading times due to network request waterfalls, so we recommend prefetching data in router loaders or on the server as much as possible! This allows a page's data to be fetched all at once as the page is being displayed.
+
+If you're fetching data from most backends or REST-style APIs, we suggest using:
+
+- [React Query](https://react-query.tanstack.com/)
+- [SWR](https://swr.vercel.app/)
+- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
+
+If you're fetching data from a GraphQL API, we suggest using:
+
+- [Apollo](https://www.apollographql.com/docs/react)
+- [Relay](https://relay.dev/)
+
+
+### Code-splitting {/*code-splitting*/}
+
+Code-splitting is the process of breaking your app into smaller bundles that can be loaded on demand. An app's code size increases with every new feature and additional dependency. Apps can become slow to load because all of the code for the entire app needs to be sent before it can be used. Caching, reducing features/dependencies, and moving some code to run on the server can help mitigate slow loading but are incomplete solutions that can sacrifice functionality if overused.
+
+Similarly, if you rely on the apps using your framework to split the code, you might encounter situations where loading becomes slower than if no code splitting were happening at all. For example, [lazily loading](/reference/react/lazy) a chart delays sending the code needed to render the chart, splitting the chart code from the rest of the app. [Parcel supports code splitting with React.lazy](https://parceljs.org/recipes/react/#code-splitting). However, if the chart loads its data *after* it has been initially rendered you are now waiting twice. This is a waterfall: rather than fetching the data for the chart and sending the code to render it simultaneously, you must wait for each step to complete one after the other.
+
+Splitting code by route, when integrated with bundling and data fetching, can reduce the initial load time of your app and the time it takes for the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)).
+
+For code-splitting instructions, see your build tool docs:
+- [Vite build optimizations](https://vite.dev/guide/features.html#build-optimizations)
+- [Parcel code splitting](https://parceljs.org/features/code-splitting/)
+- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting)
+
+### Improving Application Performance {/*improving-application-performance*/}
+
+Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC.
+
+* **Single-page apps (SPA)** load a single HTML page and dynamically updates the page as the user interacts with the app. SPAs are easier to get started with, but they can have slower initial load times. SPAs are the default architecture for most build tools.
+
+* **Streaming Server-side rendering (SSR)** renders a page on the server and sends the fully rendered page to the client. SSR can improve performance, but it can be more complex to set up and maintain than a single-page app. With the addition of streaming, SSR can be very complex to set up and maintain. See [Vite's SSR guide]( https://vite.dev/guide/ssr).
+
+* **Static site generation (SSG)** generates static HTML files for your app at build time. SSG can improve performance, but it can be more complex to set up and maintain than server-side rendering. See [Vite's SSG guide](https://vite.dev/guide/ssr.html#pre-rendering-ssg).
+
+* **React Server Components (RSC)** lets you mix build-time, server-only, and interactive components in a single React tree. RSC can improve performance, but it currently requires deep expertise to set up and maintain. See [Parcel's RSC examples](https://github.com/parcel-bundler/rsc-examples).
+
+Your rendering strategies need to integrate with your router so apps built with your framework can choose the rendering strategy on a per-route level. This will enable different rendering strategies without having to rewrite your whole app. For example, the landing page for your app might benefit from being statically generated (SSG), while a page with a content feed might perform best with server-side rendering.
+
+Using the right rendering strategy for the right routes can decrease the time it takes for the first byte of content to be loaded ([Time to First Byte](https://web.dev/articles/ttfb)), the first piece of content to render ([First Contentful Paint](https://web.dev/articles/fcp)), and the largest visible content of the app to render ([Largest Contentful Paint](https://web.dev/articles/lcp)).
+
+### And more... {/*and-more*/}
+
+These are just a few examples of the features a new app will need to consider when building from scratch. Many limitations you'll hit can be difficult to solve as each problem is interconnected with the others and can require deep expertise in problem areas you may not be familiar with.
+
+If you don't want to solve these problems on your own, you can [get started with a framework](/learn/creating-a-react-app) that provides these features out of the box.
diff --git a/src/content/learn/creating-a-react-app.md b/src/content/learn/creating-a-react-app.md
new file mode 100644
index 000000000..df512cca8
--- /dev/null
+++ b/src/content/learn/creating-a-react-app.md
@@ -0,0 +1,113 @@
+---
+title: Creating a React App
+---
+
+
+
+If you want to build a new app or website with React, we recommend starting with a framework.
+
+
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
+
+## Full-stack frameworks {/*full-stack-frameworks*/}
+
+These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
+
+
+
+#### Full-stack frameworks do not require a server. {/*react-frameworks-do-not-require-a-server*/}
+
+All the frameworks on this page support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). These apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.
+
+This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework's documentation for configuring the rendering strategy.
+
+
+
+### Next.js (App Router) {/*nextjs-app-router*/}
+
+**[Next.js's App Router](https://nextjs.org/docs) is a React framework that takes full advantage of React's architecture to enable full-stack React apps.**
+
+
+npx create-next-app@latest
+
+
+Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn't require a server.
+
+### React Router (v7) {/*react-router-v7*/}
+
+**[React Router](https://reactrouter.com/start/framework/installation) is the most popular routing library for React and can be paired with Vite to create a full-stack React framework**. It emphasizes standard Web APIs and has several [ready to deploy templates](https://github.com/remix-run/react-router-templates) for various JavaScript runtimes and platforms.
+
+To create a new React Router framework project, run:
+
+
+npx create-react-router@latest
+
+
+React Router is maintained by [Shopify](https://www.shopify.com).
+
+### Expo (for native apps) {/*expo*/}
+
+**[Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run:
+
+
+npx create-expo-app@latest
+
+
+If you're new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/).
+
+Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
+
+
+## Other frameworks {/*other-frameworks*/}
+
+There are other up-and-coming frameworks that are working towards our full stack React vision:
+
+- [TanStack Start (Beta)](https://tanstack.com/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.
+- [RedwoodJS](https://redwoodjs.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.
+
+
+
+#### Which features make up the React team’s full-stack architecture vision? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
+
+Next.js's App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.
+
+For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components:
+
+```js
+// This component runs *only* on the server (or during the build).
+async function Talks({ confId }) {
+ // 1. You're on the server, so you can talk to your data layer. API endpoint not required.
+ const talks = await db.Talks.findAll({ confId });
+
+ // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
+ const videos = talks.map(talk => talk.video);
+
+ // 3. Pass the data down to the components that will run in the browser.
+ return ;
+}
+```
+
+Next.js's App Router also integrates [data fetching with Suspense](/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:
+
+```js
+}>
+
+
+```
+
+Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.
+
+
+
+## Start From Scratch {/*start-from-scratch*/}
+
+If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.
+
+Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It's a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](#full-stack-frameworks) have built-in solutions for these problems.
+
+If you want to build your own solutions, see our guide to [build a React app from Scratch](/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/).
+
+-----
+
+_If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+)._
diff --git a/src/content/learn/index.md b/src/content/learn/index.md
index ac71de39c..5bac52530 100644
--- a/src/content/learn/index.md
+++ b/src/content/learn/index.md
@@ -4,7 +4,11 @@ title: Démarrage rapide
+<<<<<<< HEAD
Bienvenue dans la documentation React ! Dans cette page, vous allez découvrir les 80% de concepts React que vous utiliserez sans doute au quotidien.
+=======
+Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
diff --git a/src/content/learn/installation.md b/src/content/learn/installation.md
index 6b1f8cf53..c8f57ec79 100644
--- a/src/content/learn/installation.md
+++ b/src/content/learn/installation.md
@@ -8,6 +8,7 @@ React a été conçu dès le départ pour une adoption progressive. Vous pouvez
+<<<<<<< HEAD
* [Comment commencer un nouveau projet React](/learn/start-a-new-react-project)
@@ -18,6 +19,9 @@ React a été conçu dès le départ pour une adoption progressive. Vous pouvez
## Essayer React {/*try-react*/}
+=======
+## Try React {/*try-react*/}
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
Vous n'avez pas besoin d'installer quoi que ce soit pour jouer avec React. Essayez de modifier ce bac à sable !
@@ -39,6 +43,7 @@ Vous pouvez le modifier directement ou l'ouvrir dans un nouvel onglet en appuyan
La plupart des pages de la documentation de React contiennent des bacs à sable comme celui-ci. Hors de la documentation de React, il existe de nombreux bacs à sable qui prennent en charge React, par exemple [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react) ou encore [CodePen](https://codepen.io/pen?template=QWYVwWN).
+<<<<<<< HEAD
### Essayer React sur votre machine {/*try-react-locally*/}
Pour essayer React localement sur votre ordinateur, [téléchargez cette page HTML](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html). Ouvrez-la dans votre éditeur et dans votre navigateur !
@@ -46,10 +51,34 @@ Pour essayer React localement sur votre ordinateur, [téléchargez cette page HT
## Démarrer un nouveau projet React {/*start-a-new-react-project*/}
Si vous souhaitez construire une appli ou un site entièrement avec React, [créez un nouveau projet React](/learn/start-a-new-react-project).
+=======
+To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser!
+
+## Creating a React App {/*creating-a-react-app*/}
+
+If you want to start a new React app, you can [create a React app](/learn/creating-a-react-app) using a recommended framework.
+
+## Build a React App from Scratch {/*build-a-react-app-from-scratch*/}
+
+If a framework is not a good fit for your project, you prefer to build your own framework, or you just want to learn the basics of a React app you can [build a React app from scratch](/learn/build-a-react-app-from-scratch).
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
## Ajouter React à un projet existant {/*add-react-to-an-existing-project*/}
+<<<<<<< HEAD
Si vous souhaitez essayer d'utiliser React dans une appli ou un site existants, [ajoutez React à un projet existant](/learn/add-react-to-an-existing-project).
+=======
+If want to try using React in your existing app or a website, you can [add React to an existing project.](/learn/add-react-to-an-existing-project)
+
+
+
+
+#### Should I use Create React App? {/*should-i-use-create-react-app*/}
+
+No. Create React App has been deprecated. For more information, see [Sunsetting Create React App](/blog/2025/02/14/sunsetting-create-react-app).
+
+
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
## Et maintenant ? {/*next-steps*/}
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 6f5c4f1b3..d70b644ca 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -175,7 +175,7 @@ function Cup({ guest }) {
}
export default function TeaGathering() {
- let cups = [];
+ const cups = [];
for (let i = 1; i <= 12; i++) {
cups.push();
}
@@ -243,7 +243,7 @@ Le rendu est un *calcul*, il ne devrait pas essayer de « faire » des choses.
```js src/Clock.js active
export default function Clock({ time }) {
- let hours = time.getHours();
+ const hours = time.getHours();
if (hours >= 0 && hours <= 6) {
document.getElementById('time').className = 'night';
} else {
@@ -305,7 +305,7 @@ Vous pouvez corriger ce composant en calculant le `className` puis en l'incluant
```js src/Clock.js active
export default function Clock({ time }) {
- let hours = time.getHours();
+ const hours = time.getHours();
let className;
if (hours >= 0 && hours <= 6) {
className = 'night';
@@ -604,14 +604,20 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
+<<<<<<< HEAD
let initialStories = [
{id: 0, label: "L’histoire d’Ankit" },
{id: 1, label: "L’histoire de Clara" },
+=======
+const initialStories = [
+ {id: 0, label: "Ankit's Story" },
+ {id: 1, label: "Taylor's Story" },
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
];
export default function App() {
- let [stories, setStories] = useState([...initialStories])
- let time = useTime();
+ const [stories, setStories] = useState([...initialStories])
+ const time = useTime();
// HACK: évite à la mémoire d'être trop phagocytée pendant
// que vous lisez les docs. On enfreint ici nos propres
@@ -701,14 +707,20 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
+<<<<<<< HEAD
let initialStories = [
{id: 0, label: "L’histoire d’Ankit" },
{id: 1, label: "L’histoire de Clara" },
+=======
+const initialStories = [
+ {id: 0, label: "Ankit's Story" },
+ {id: 1, label: "Taylor's Story" },
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
];
export default function App() {
- let [stories, setStories] = useState([...initialStories])
- let time = useTime();
+ const [stories, setStories] = useState([...initialStories])
+ const time = useTime();
// HACK: évite à la mémoire d'être trop phagocytée pendant
// que vous lisez les docs. On enfreint ici nos propres
@@ -769,8 +781,13 @@ Une autre approche consisterait à créer un *nouveau* tableau (en partant de ce
```js src/StoryTray.js active
export default function StoryTray({ stories }) {
+<<<<<<< HEAD
// Copier le tableau !
let storiesToDisplay = stories.slice();
+=======
+ // Copy the array!
+ const storiesToDisplay = stories.slice();
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
// N'affecte plus le tableau d'origine :
storiesToDisplay.push({
@@ -794,14 +811,20 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
+<<<<<<< HEAD
let initialStories = [
{id: 0, label: "L’histoire d’Ankit" },
{id: 1, label: "L’histoire de Clara" },
+=======
+const initialStories = [
+ {id: 0, label: "Ankit's Story" },
+ {id: 1, label: "Taylor's Story" },
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
];
export default function App() {
- let [stories, setStories] = useState([...initialStories])
- let time = useTime();
+ const [stories, setStories] = useState([...initialStories])
+ const time = useTime();
// HACK: évite à la mémoire d'être trop phagocytée pendant
// que vous lisez les docs. On enfreint ici nos propres
diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md
index 0712ef6a5..f0301d4fb 100644
--- a/src/content/learn/managing-state.md
+++ b/src/content/learn/managing-state.md
@@ -744,9 +744,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
-
+
{children}
-
+
);
}
@@ -839,13 +839,11 @@ export function TasksProvider({ children }) {
);
return (
-
-
+
+
{children}
-
-
+
+
);
}
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index d24f89f77..996c5ac37 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -211,7 +211,11 @@ C'est parce que **les Hooks ne doivent être appelés qu'à la racine de votre c
Un premier contournement possible consisterait à n'obtenir une ref que vers leur élément parent, puis à utiliser des méthodes de manipulation du DOM du genre [`querySelectorAll`](https://developer.mozilla.org/fr/docs/Web/API/Document/querySelectorAll) pour « retrouver » les nœuds enfants individuels à partir de là. C'est toutefois une approche fragile, qui peut dérailler si la structure de votre DOM change.
+<<<<<<< HEAD
Une autre solution serait de **passer une fonction à la prop `ref`**. On parle alors de [fonction de rappel `ref`](/reference/react-dom/components/common#ref-callback) *(ref callback, NdT)*. React appellera votre fonction de rappel ref en lui passant le nœud DOM lorsqu'il sera temps de définir la ref, et avec `null` quand il sera temps de la nettoyer. Ça vous permettra de tenir à jour votre propre tableau ou [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) et d'accéder aux refs par leur position ou par une sorte de clé de correspondance.
+=======
+Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
L'exemple qui suit utilise cette approche pour défiler vers un nœud quelconque dans une longue liste :
@@ -247,26 +251,30 @@ export default function CatFriends() {
@@ -276,11 +284,22 @@ export default function CatFriends() {
}
function setupCatList() {
- const catList = [];
- for (let i = 0; i < 10; i++) {
- catList.push("https://loremflickr.com/320/240/cat?lock=" + i);
+ const catCount = 10;
+ const catList = new Array(catCount)
+ for (let i = 0; i < catCount; i++) {
+ let imageUrl = '';
+ if (i < 5) {
+ imageUrl = "https://placecats.com/neo/320/240";
+ } else if (i < 8) {
+ imageUrl = "https://placecats.com/millie/320/240";
+ } else {
+ imageUrl = "https://placecats.com/bella/320/240";
+ }
+ catList[i] = {
+ id: i,
+ imageUrl,
+ };
}
-
return catList;
}
@@ -312,16 +331,6 @@ li {
}
```
-```json package.json hidden
-{
- "dependencies": {
- "react": "canary",
- "react-dom": "canary",
- "react-scripts": "^5.0.0"
- }
-}
-```
-
Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient plutôt une [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) associant chaque ID d'élément à un nœud DOM. ([Les refs peuvent stocker n'importe quelle valeur !](/learn/referencing-values-with-refs)) La [fonction de rappel `ref`](/reference/react-dom/components/common#ref-callback) sur chaque élément de la liste s'occupe de mettre à jour les correspondances :
@@ -331,6 +340,7 @@ Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient
key={cat.id}
ref={node => {
const map = getMap();
+<<<<<<< HEAD
if (node) {
// Ajoute à la Map
map.set(cat, node);
@@ -353,6 +363,8 @@ This example shows another approach for managing the Map with a `ref` callback c
key={cat.id}
ref={node => {
const map = getMap();
+=======
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
// Add to the Map
map.set(cat, node);
@@ -364,23 +376,56 @@ This example shows another approach for managing the Map with a `ref` callback c
>
```
-
+This lets you read individual DOM nodes from the Map later.
+
+
+
+When Strict Mode is enabled, ref callbacks will run twice in development.
+
+Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
+
+
## Accéder aux nœuds DOM d'un autre composant {/*accessing-another-components-dom-nodes*/}
+<<<<<<< HEAD
Quand vous posez une ref sur un composant natif qui produit un élément navigateur tel que ``, React place une référence vers le nœud DOM correspondant (le véritable élément `` du navigateur) dans la propriété `current` de cette ref.
En revanche, si vous essayez d'obtenir une ref vers **votre propre** composant, tel que ``, vous obtiendrez par défaut `null`. Voici un exemple qui illustre ça : voyez comme les clics sur le bouton **ne donnent pas** le focus au champ de saisie :
+=======
+
+Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
+
+
+You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
+
+```js {3-4,9}
+import { useRef } from 'react';
+
+function MyInput({ ref }) {
+ return ;
+}
+
+function MyForm() {
+ const inputRef = useRef(null);
+ return
+}
+```
+
+In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to ``. Because `` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `` DOM element.
+
+The `inputRef` created in `MyForm` now points to the `` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on ``.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
```js
import { useRef } from 'react';
-function MyInput(props) {
- return ;
+function MyInput({ ref }) {
+ return ;
}
export default function MyForm() {
@@ -403,6 +448,7 @@ export default function MyForm() {
+<<<<<<< HEAD
Pour vous aider à repérer le problème, React affichera aussi une erreur dans la console :
@@ -462,22 +508,32 @@ export default function Form() {
Dans les Design Systems, il est courant pour les composants de bas niveau tels que les boutons, champs, etc. de transmettre leurs refs à leurs nœuds DOM. À l'inverse, les composants de haut niveau tels que les formulaires, listes ou sections de page n'exposent généralement pas leurs nœuds DOM pour éviter d'introduire des dépendances indésirables envers la structure de leur DOM.
+=======
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
#### Exposer une partie de votre API grâce à un point d'accès impératif {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
+<<<<<<< HEAD
Dans l'exemple qui précède, `MyInput` expose l'élément DOM original du champ de saisie. Ça permet au composant parent d'en appeler la méthode `focus()`. Hélas, ça permet aussi au composant parent de faire d'autres choses avec, par exemple modifier ses styles CSS. Dans certains cas rares, vous voudrez restreindre les fonctionnalités natives accessibles. Utilisez alors `useImperativeHandle` :
+=======
+In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
```js
+<<<<<<< HEAD
import {
forwardRef,
useRef,
useImperativeHandle
} from 'react';
+=======
+import { useRef, useImperativeHandle } from "react";
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
-const MyInput = forwardRef((props, ref) => {
+function MyInput({ ref }) {
const realInputRef = useRef(null);
useImperativeHandle(ref, () => ({
// N'expose que la méthode `focus()`, rien de plus
@@ -485,8 +541,8 @@ const MyInput = forwardRef((props, ref) => {
realInputRef.current.focus();
},
}));
- return ;
-});
+ return ;
+};
export default function Form() {
const inputRef = useRef(null);
@@ -498,9 +554,13 @@ export default function Form() {
return (
<>
+<<<<<<< HEAD
+=======
+
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
);
}
@@ -508,7 +568,11 @@ export default function Form() {
+<<<<<<< HEAD
Ici, `realInputRef` dans `MyInput` référence le nœud DOM effectif du champ de saisie. En revanche, `useImperativeHandle` indique à React de fournir votre propre objet sur-mesure comme valeur de la ref pour le composant parent. Ainsi `inputRef.current` dans le composant `Form` ne verra que la méthode`focus`. Au final, le « point d'accès » de la ref n'est pas le nœud DOM, mais l'objet dédié que vous avez créé dans l'appel à `useImperativeHandle`.
+=======
+Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -717,11 +781,20 @@ Ceci étant dit, ça ne signifie pas que l'interdiction est absolue. Il faut ju
+<<<<<<< HEAD
- Les Refs sont un concept générique, mais sont généralement utilisées pour référencer des nœuds DOM.
- Pour indiquer à React de placer une référence à un nœud DOM dans `myRef.current`, utilisez la prop `ref`, comme dans `
`.
- En général, vous utiliserez les refs pour des actions non destructrices telles que la gestion du focus, le défilement ou la mesure des dimensions et positions d'éléments du DOM.
- Un composant n'expose pas, par défaut, ses nœuds DOM. Vous pouvez choisir d'en exposer un en utilisant `forwardRef` et en passant le second argument `ref` de la fonction de rappel au nœud désiré.
- Évitez de modifier les nœuds DOM gérés par React. Si vous devez absolument le faire, limitez-vous aux parties que React n'a aucune raison de mettre à jour.
+=======
+- Refs are a generic concept, but most often you'll use them to hold DOM elements.
+- You instruct React to put a DOM node into `myRef.current` by passing `
`.
+- Usually, you will use refs for non-destructive actions like focusing, scrolling, or measuring DOM elements.
+- A component doesn't expose its DOM nodes by default. You can opt into exposing a DOM node by using the `ref` prop.
+- Avoid changing DOM nodes managed by React.
+- If you do modify DOM nodes managed by React, modify parts that React has no reason to update.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -946,12 +1019,30 @@ export default function CatFriends() {
);
}
-const catList = [];
-for (let i = 0; i < 10; i++) {
- catList.push({
+const catCount = 10;
+const catList = new Array(catCount);
+for (let i = 0; i < catCount; i++) {
+ const bucket = Math.floor(Math.random() * catCount) % 2;
+ let imageUrl = '';
+ switch (bucket) {
+ case 0: {
+ imageUrl = "https://placecats.com/neo/250/200";
+ break;
+ }
+ case 1: {
+ imageUrl = "https://placecats.com/millie/250/200";
+ break;
+ }
+ case 2:
+ default: {
+ imageUrl = "https://placecats.com/bella/250/200";
+ break;
+ }
+ }
+ catList[i] = {
id: i,
- imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
- });
+ imageUrl,
+ };
}
```
@@ -1063,12 +1154,30 @@ export default function CatFriends() {
);
}
-const catList = [];
-for (let i = 0; i < 10; i++) {
- catList.push({
+const catCount = 10;
+const catList = new Array(catCount);
+for (let i = 0; i < catCount; i++) {
+ const bucket = Math.floor(Math.random() * catCount) % 2;
+ let imageUrl = '';
+ switch (bucket) {
+ case 0: {
+ imageUrl = "https://placecats.com/neo/250/200";
+ break;
+ }
+ case 1: {
+ imageUrl = "https://placecats.com/millie/250/200";
+ break;
+ }
+ case 2:
+ default: {
+ imageUrl = "https://placecats.com/bella/250/200";
+ break;
+ }
+ }
+ catList[i] = {
id: i,
- imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i
- });
+ imageUrl,
+ };
}
```
@@ -1119,7 +1228,11 @@ Faites en sorte qu'un clic sur le bouton « Recherche » donne le focus au cha
+<<<<<<< HEAD
Vous aurez besoin de `forwardRef` pour choisir d'exposer un nœud DOM pour votre propre composant `SearchInput`.
+=======
+You'll need to pass `ref` as a prop to opt into exposing a DOM node from your own component like `SearchInput`.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -1204,6 +1317,7 @@ export default function SearchButton({ onClick }) {
```
```js src/SearchInput.js
+<<<<<<< HEAD
import { forwardRef } from 'react';
export default forwardRef(
@@ -1216,6 +1330,16 @@ export default forwardRef(
);
}
);
+=======
+export default function SearchInput({ ref }) {
+ return (
+
+ );
+}
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
```
```css
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md
index 197f0da92..adcc1a7ce 100644
--- a/src/content/learn/passing-data-deeply-with-context.md
+++ b/src/content/learn/passing-data-deeply-with-context.md
@@ -468,15 +468,19 @@ import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
return (
-
+
{children}
-
+
);
}
```
+<<<<<<< HEAD
React le comprend ainsi : « si un composant à l'intérieur de `` demande `LevelContext`, alors donne-lui ce `level` ». Le composant utilisera la valeur du `` le plus proche dans l'arbre au-dessus de lui.
+=======
+This tells React: "if any component inside this `` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -514,9 +518,9 @@ import { LevelContext } from './LevelContext.js';
export default function Section({ level, children }) {
return (
-
+
{children}
-
+
);
}
@@ -566,9 +570,15 @@ export const LevelContext = createContext(1);
Le résultat est le même qu'avec le code d'origine, mais vous n'avez plus besoin de transmettre la prop `level` à chaque composant `Heading`. Au lieu de ça, il « détermine » son niveau d'en-tête en interrogeant la `Section` la plus proche :
+<<<<<<< HEAD
1. Vous passez une prop `level` à la ``.
2. `Section` enrobe ses enfants dans un ``.
3. `Heading` demande la valeur la plus proche de `LevelContext` avec `useContext(LevelContext)`.
+=======
+1. You pass a `level` prop to the ``.
+2. `Section` wraps its children into ``.
+3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
## Utiliser et fournir le contexte depuis le même composant {/*using-and-providing-context-from-the-same-component*/}
@@ -595,9 +605,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
-
+
{children}
-
+
);
}
@@ -643,9 +653,9 @@ export default function Section({ children }) {
const level = useContext(LevelContext);
return (
-
+
{children}
-
+
);
}
@@ -776,9 +786,9 @@ export default function Section({ children, isFancy }) {
'section ' +
(isFancy ? 'fancy' : '')
}>
-
+
{children}
-
+
);
}
@@ -864,6 +874,7 @@ D'une manière générale, si certaines informations sont nécessaires pour des
+<<<<<<< HEAD
* Le contexte permet à un composant de fournir certaines informations à l'ensemble de l'arbre situé en dessous de lui.
* Pour transmettre un contexte :
1. Créez-le et exportez-le avec `export const MyContext = createContext(defaultValue)`.
@@ -872,6 +883,16 @@ D'une manière générale, si certaines informations sont nécessaires pour des
* Le contexte traverse tous les composants intermédiaires.
* Le contexte vous permet d'écrire des composants qui « s'adaptent à leur environnement ».
* Avant d'utiliser un contexte, essayez de passer par les props ou en mettant du JSX dans les `children`.
+=======
+* Context lets a component provide some information to the entire tree below it.
+* To pass context:
+ 1. Create and export it with `export const MyContext = createContext(defaultValue)`.
+ 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
+ 3. Wrap children into `` to provide it from a parent.
+* Context passes through any components in the middle.
+* Context lets you write components that "adapt to their surroundings".
+* Before you use context, try passing props or passing JSX as `children`.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -1022,7 +1043,11 @@ li {
Retirez la prop `imageSize` de tous les composants.
+<<<<<<< HEAD
Créez et exportez `ImageSizeContext` depuis `Context.js`. Ensuite, enrobez la `List` dans `` pour propager la valeur vers le bas, puis `useContext(ImageSizeContext)` pour la lire dans `PlaceImage` :
+=======
+Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -1036,7 +1061,7 @@ export default function App() {
const [isLarge, setIsLarge] = useState(false);
const imageSize = isLarge ? 150 : 100;
return (
-
-
+
)
}
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index 22e021c4f..d70e9c256 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -672,7 +672,11 @@ label {
+<<<<<<< HEAD
L'état du compteur se réinitialise quand vous cliquez sur la case. Bien que vous affichiez un `Counter`, le premier enfant du `div` passe d'un `div` à une `section`. Lorsque l'enfant `div` a été retiré du DOM, tout l'arbre en dessous de lui (ce qui inclut le `Counter` et son état) a également été détruit.
+=======
+The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
@@ -2011,7 +2015,7 @@ export default function ContactList() {
+ 
+ 
+ 
+ +======= +
+>>>>>>> d34c6a2c6fa49fc6f64b07aa4fa979d86d41c4e8
))}