diff --git a/.github/ISSUE_TEMPLATE/3-framework.yml b/.github/ISSUE_TEMPLATE/3-framework.yml index a47295e1e..87f03a660 100644 --- a/.github/ISSUE_TEMPLATE/3-framework.yml +++ b/.github/ISSUE_TEMPLATE/3-framework.yml @@ -8,11 +8,11 @@ body: value: | ## Apply to be included as a recommended React framework - _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/start-a-new-react-project). If you are not a framework author, please contact the authors before submitting._ + _This form is for framework authors to apply to be included as a recommended [React framework](https://react.dev/learn/creating-a-react-app). If you are not a framework author, please contact the authors before submitting._ Our goal when recommending a framework is to start developers with a React project that solves common problems like code splitting, data fetching, routing, and HTML generation without any extra work later. We believe this will allow users to get started quickly with React, and scale their app to production. - While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/start-a-new-react-project#which-features-make-up-the-react-teams-full-stack-architecture-vision). + While we understand that many frameworks may want to be featured, this page is not a place to advertise every possible React framework or all frameworks that you can add React to. There are many great frameworks that offer support for React that are not listed in our guides. The frameworks we recommend have invested significantly in the React ecosystem, and collaborated with the React team to be compatible with our [full-stack React architecture vision](https://react.dev/learn/creating-a-react-app#which-features-make-up-the-react-teams-full-stack-architecture-vision). To be included, frameworks must meet the following criteria: diff --git a/plugins/remark-smartypants.js b/plugins/remark-smartypants.js index f56f14b61..c819624ba 100644 --- a/plugins/remark-smartypants.js +++ b/plugins/remark-smartypants.js @@ -14,12 +14,24 @@ const visit = require('unist-util-visit'); const retext = require('retext'); const smartypants = require('retext-smartypants'); -function check(parent) { +function check(node, parent) { + if (node.data?.skipSmartyPants) return false; if (parent.tagName === 'script') return false; if (parent.tagName === 'style') return false; return true; } +function markSkip(node) { + if (!node) return; + node.data ??= {}; + node.data.skipSmartyPants = true; + if (Array.isArray(node.children)) { + for (const child of node.children) { + markSkip(child); + } + } +} + module.exports = function (options) { const processor = retext().use(smartypants, { ...options, @@ -43,8 +55,14 @@ module.exports = function (options) { let startIndex = 0; const textOrInlineCodeNodes = []; + visit(tree, 'mdxJsxFlowElement', (node) => { + if (['TerminalBlock'].includes(node.name)) { + markSkip(node); // Mark all children to skip smarty pants + } + }); + visit(tree, ['text', 'inlineCode'], (node, _, parent) => { - if (check(parent)) { + if (check(node, parent)) { if (node.type === 'text') allText += node.value; // for the case when inlineCode contains just one part of quote: `foo'bar` else allText += 'A'.repeat(node.value.length); diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index 9cc26bdaa..f9b785db4 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -270,7 +270,7 @@ export function HomeContent() { + href="/learn/creating-a-react-app"> Get started with a framework diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index bdcd8e466..dfc5eae26 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -79,13 +79,19 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { +<<<<<<< HEAD
>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 className="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre overflow-x-auto" translate="no" dir="ltr"> - - {message} -
+ + + {message} + + ); } diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md index 878a954ff..5d8fd06ce 100644 --- a/src/content/blog/2023/05/03/react-canaries.md +++ b/src/content/blog/2023/05/03/react-canaries.md @@ -5,7 +5,11 @@ date: 2023/05/03 description: We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final, before they're released in a stable version--similar to how Meta has long used bleeding-edge versions of React internally. We are introducing a new officially supported [Canary release channel](/community/versioning-policy#canary-channel). It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule. --- +<<<<<<< HEAD في الثالث من مايو، 2023، كتبه [دان أبراموف](https://bsky.app/profile/danabra.mov)، [صوفي ألبرت](https://twitter.com/sophiebits)، [ريك هانلون](https://twitter.com/rickhanlonii)، [سيباستيان ماركباج](https://twitter.com/sebmarkbage)، و [أندرو كلارك](https://twitter.com/acdlite). +======= +May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite) +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 --- diff --git a/src/content/blog/2024/10/21/react-compiler-beta-release.md b/src/content/blog/2024/10/21/react-compiler-beta-release.md index 27cdfc02d..19c9a1962 100644 --- a/src/content/blog/2024/10/21/react-compiler-beta-release.md +++ b/src/content/blog/2024/10/21/react-compiler-beta-release.md @@ -131,4 +131,8 @@ Thanks to [Sathya Gunasekaran](https://twitter.com/_gsathya), [Joe Savona](https [^2]: Thanks [Vaishali Garg](https://www.linkedin.com/in/vaishaligarg09) for leading this study on React Compiler at Meta, and for reviewing this post. +<<<<<<< HEAD [^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. +======= +[^3]: After controlling on author tenure, diff length/complexity, and other potential confounding factors. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 diff --git a/src/content/blog/2025/10/07/react-compiler-1.md b/src/content/blog/2025/10/07/react-compiler-1.md index 5474c50d3..4aa932271 100644 --- a/src/content/blog/2025/10/07/react-compiler-1.md +++ b/src/content/blog/2025/10/07/react-compiler-1.md @@ -69,17 +69,29 @@ To install the compiler: npm +<<<<<<< HEAD {`npm install --save-dev --save-exact babel-plugin-react-compiler@latest`} +======= +npm install --save-dev --save-exact babel-plugin-react-compiler@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 pnpm +<<<<<<< HEAD {`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`} +======= +pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 yarn +<<<<<<< HEAD {`yarn add --dev --exact babel-plugin-react-compiler@latest`} +======= +yarn add --dev --exact babel-plugin-react-compiler@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 As part of the stable release, we've been making React Compiler easier to add to your projects and added optimizations to how the compiler generates memoization. React Compiler now supports optional chains and array indices as dependencies. These improvements ultimately result in fewer re-renders and more responsive UIs, while letting you keep writing idiomatic declarative code. @@ -101,17 +113,29 @@ To install: npm +<<<<<<< HEAD {`npm install --save-dev eslint-plugin-react-hooks@latest`} +======= +npm install --save-dev eslint-plugin-react-hooks@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 pnpm +<<<<<<< HEAD {`pnpm add --save-dev eslint-plugin-react-hooks@latest`} +======= +pnpm add --save-dev eslint-plugin-react-hooks@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 yarn +<<<<<<< HEAD {`yarn add --dev eslint-plugin-react-hooks@latest`} +======= +yarn add --dev eslint-plugin-react-hooks@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 ```js {6} @@ -153,19 +177,31 @@ We have partnered with the Expo, Vite, and Next.js teams to add the compiler to [Expo SDK 54](https://docs.expo.dev/guides/react-compiler/) and up has the compiler enabled by default, so new apps will automatically be able to take advantage of the compiler from the start. +<<<<<<< HEAD {`npx create-expo-app@latest`} +======= +npx create-expo-app@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 [Vite](https://vite.dev/guide/) and [Next.js](https://nextjs.org/docs/app/api-reference/cli/create-next-app) users can choose the compiler enabled templates in `create-vite` and `create-next-app`. +<<<<<<< HEAD {`npm create vite@latest`} +======= +npm create vite@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+<<<<<<< HEAD {`npx create-next-app@latest`} +======= +npx create-next-app@latest +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 ## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/} diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 506e8c922..7b3f051dd 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -4,20 +4,78 @@ title: مدونة React +<<<<<<< HEAD هذه المدونة هي المصدر الرسمي لتحديثات فريق React. سيتم نشر التحديثات المهمة هنا أولًا بأول، بما في ذلك ملاحظات الإصدار أو تحذيرات الإيقاف. يمكنك أيضًا متابعة حساب [@reactjs](https://twitter.com/reactjs) على تويتر، وحساب [@react.dev](https://bsky.app/profile/react.dev) في Bluesky، ولكن لن يفوتك أي شيء أساسي إذا قرأت هذه المدونة فقط. +======= +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. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
+<<<<<<< HEAD +======= + +Last week we hosted React Conf 2025. In this post, we summarize the talks and announcements from the event... + + + + + +We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier. + + + + + +Today, we're announcing our plans to create the React Foundation and a new technical governance structure ... + + + + + +React 19.2 adds new features like Activity, React Performance Tracks, useEffectEvent, and more. In this post ... + + + + + +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 ... + + + + + +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 ... + + + + + +We announced an experimental release of React Compiler at React Conf 2024. We've made a lot of progress since then, and in this post we want to share what's next for React Compiler ... + + + + +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 Last week we hosted React Conf 2025. In this post, we summarize the talks and announcements from the event... +<<<<<<< HEAD We're releasing the compiler's first stable release today, plus linting and tooling improvements to make adoption easier. @@ -25,6 +83,9 @@ We're releasing the compiler's first stable release today, plus linting and tool +======= + +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 Today, we're announcing our plans to create the React Foundation and a new technical governance structure ... diff --git a/src/content/community/index.md b/src/content/community/index.md index f086aca24..92fe53be8 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -33,4 +33,8 @@ title: من أين تحصل على المساعدة ## الأخبار {/*news*/} +<<<<<<< HEAD لمتابعة آخر الأخبار حول React، [تابع **@reactjs** على Twitter](https://twitter.com/reactjs) و [**@react.dev** في Bluesky](https://bsky.app/profile/react.dev) وكذلك [مدوّنة React الرسمة](/blog/) على هذا الموقع. +======= +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. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 diff --git a/src/content/errors/index.md b/src/content/errors/index.md index 138c9d5f4..a6bc8a1b4 100644 --- a/src/content/errors/index.md +++ b/src/content/errors/index.md @@ -7,4 +7,8 @@ In the minified production build of React, we avoid sending down full error mess We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, the error message will include just a link to the docs for the error. +<<<<<<< HEAD For an example, see: [https://ar.react.dev/errors/149](/errors/149). +======= +For an example, see: [https://react.dev/errors/149](/errors/149). +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 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 169d6a3c0..fb499657d 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 @@ title: إضافة React إلى مشروع موجود بالفعل هنا ما نوصي به لإعداده: +<<<<<<< HEAD 1. **بناء الجزء الخاص بـ React في تطبيقك** باستخدام إحدى [الإطارات المبنية على React](/learn/creating-a-react-app). 2. **حدد `/some-app` كـ *مسار أساسي*** في إعدادات إطار العمل الخاص بك (هنا كيف مع: [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. **قم بتكوين خادمك أو بروكسي** بحيث يتم التعامل مع جميع الطلبات تحت `/some-app/` من قبل تطبيق React الخاص بك. يضمن هذا أن الجزء الخاص بـ React من تطبيقك يمكن أن يستفيد من [أفضل الممارسات](/learn/creating-a-react-app#can-i-use-react-without-a-framework) المدمجة في تلك الإطارات. +======= +1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app). +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. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 العديد من الإطارات القائمة على React هي إطارات full-stack وتتيح لتطبيق React الخاص بك الاستفادة من الخادم. ومع ذلك، يمكنك استخدام نفس النهج حتى إذا لم تتمكن أو لا تريد تشغيل JavaScript على الخادم. في هذه الحالة ، قم بتصدير HTML/CSS/JS ([`next export`](https://nextjs.org/docs/advanced-features/static-html-export) لـ Next.js ، هذا هو الافتراضي لـ Gatsby) في `/some-app/` بدلاً من ذلك. @@ -46,7 +54,11 @@ title: إضافة React إلى مشروع موجود بالفعل * **إذا كان تطبيقك مقسم بالفعل إلى ملفات تستخدم عبارات `import`**، فحاول استخدام الإعداد الذي لديك بالفعل. تحقق مما إذا كان كتابة `
` في كود JS الخاص بك يسبب خطأ في البناء. إذا تسبب في خطأ في البناء، فقد تحتاج إلى [تحويل كود JavaScript الخاص بك باستخدام Babel](https://babeljs.io/setup)، وتمكين [Babel React preset](https://babeljs.io/docs/babel-preset-react) لاستخدام JSX. +<<<<<<< HEAD * **إذا لم يكن لتطبيقك إعداد حالي لتجميع وحدات JavaScript**، فقم بإعداده مع [Vite](https://vite.dev/). تحتفظ مجتمع Vite بـ [العديد من التكاملات مع إطارات العمل الخلفية]((https://github.com/vitejs/awesome-vite#integrations-with-backends) ، بما في ذلك Rails و Django و Laravel. إذا لم يتم سرد إطار عمل الخلفية الخاص بك، [اتبع هذه الإرشادات](https://vite.dev/guide/backend-integration.html) لدمج بناء Vite يدويًا مع إطار عملك. +======= +* **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. +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 للتحقق مما إذا كان إعدادك يعمل، قم بتشغيل هذا الأمر في مجلد مشروعك: @@ -63,7 +75,11 @@ npm install react react-dom تطبيقي +<<<<<<< HEAD +======= + +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
@@ -86,7 +102,11 @@ root.render(

مرحبًا بكم!

); +<<<<<<< HEAD دمج بيئة JavaScript معمارية في مشروع موجود قد يبدو مرعبًا أول الأمر، ولكنه يستحق ذلك! إذا تعثرت ، جرب [السؤال في المجتمع](/community) أو [الدردشة في Vite](https://chat.vite.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/). +>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0 @@ -151,7 +171,11 @@ root.render(); لاحظ كيف احتفظت بمحتوى HTML الحالي من `index.html`، ولكن مكون React الخاص بك `NavigationBar` الآن يظهر داخل `