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/package.json b/package.json index bfb372d58..68622db1b 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,11 @@ "classnames": "^2.2.6", "debounce": "^1.2.1", "github-slugger": "^1.3.0", +<<<<<<< HEAD "next": "15.4.8", +======= + "next": "15.1.9", +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", "react": "^19.0.0", 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/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index 0de62fb6d..949f9a3fd 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -35,8 +35,13 @@ root.render( eject: 'react-scripts eject', }, dependencies: { +<<<<<<< HEAD react: '^19.2.0', 'react-dom': '^19.2.0', +======= + react: '^19.2.1', + 'react-dom': '^19.2.1', +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 'react-scripts': '^5.0.0', }, }, diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx index 49e980d32..228710711 100644 --- a/src/components/MDX/SandpackWithHTMLOutput.tsx +++ b/src/components/MDX/SandpackWithHTMLOutput.tsx @@ -56,8 +56,13 @@ export default function formatHTML(markup) { const packageJSON = ` { "dependencies": { +<<<<<<< HEAD "react": "^19.2.0", "react-dom": "^19.2.0", +======= + "react": "^19.2.1", + "react-dom": "^19.2.1", +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 "react-scripts": "^5.0.0", "html-format": "^1.1.2" }, diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index bdcd8e466..ceb37ce73 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -79,13 +79,19 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { +<<<<<<< HEAD
>>>>>> e22544e68d6fffda33332771efe27034739f35a4 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..28f4d1ae2 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) +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 --- 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..e4a4ea938 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. +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 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..d834f679a 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 +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 pnpm +<<<<<<< HEAD {`pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest`} +======= +pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 yarn +<<<<<<< HEAD {`yarn add --dev --exact babel-plugin-react-compiler@latest`} +======= +yarn add --dev --exact babel-plugin-react-compiler@latest +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 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 +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 pnpm +<<<<<<< HEAD {`pnpm add --save-dev eslint-plugin-react-hooks@latest`} +======= +pnpm add --save-dev eslint-plugin-react-hooks@latest +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 yarn +<<<<<<< HEAD {`yarn add --dev eslint-plugin-react-hooks@latest`} +======= +yarn add --dev eslint-plugin-react-hooks@latest +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 ```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 +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 [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 +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4
+<<<<<<< HEAD {`npx create-next-app@latest`} +======= +npx create-next-app@latest +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 ## Adopt React Compiler incrementally {/*adopt-react-compiler-incrementally*/} diff --git a/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md new file mode 100644 index 000000000..90a549bc2 --- /dev/null +++ b/src/content/blog/2025/12/03/critical-security-vulnerability-in-react-server-components.md @@ -0,0 +1,168 @@ +--- +title: "Critical Security Vulnerability in React Server Components" +author: The React Team +date: 2025/12/03 +description: There is an unauthenticated remote code execution vulnerability in React Server Components. A fix has been published in versions 19.0.1, 19.1.2, and 19.2.1. We recommend upgrading immediately. + +--- + +December 3, 2025 by [The React Team](/community/team) + +--- + + + +There is an unauthenticated remote code execution vulnerability in React Server Components. + +We recommend upgrading immediately. + + + +--- + +On November 29th, Lachlan Davidson reported a security vulnerability in React that allows unauthenticated remote code execution by exploiting a flaw in how React decodes payloads sent to React Server Function endpoints. + +Even if your app does not implement any React Server Function endpoints it may still be vulnerable if your app supports React Server Components. + +This vulnerability was disclosed as [CVE-2025-55182](https://www.cve.org/CVERecord?id=CVE-2025-55182) and is rated CVSS 10.0. + +The vulnerability is present in versions 19.0, 19.1.0, 19.1.1, and 19.2.0 of: + +* [react-server-dom-webpack](https://www.npmjs.com/package/react-server-dom-webpack) +* [react-server-dom-parcel](https://www.npmjs.com/package/react-server-dom-parcel) +* [react-server-dom-turbopack](https://www.npmjs.com/package/react-server-dom-turbopack?activeTab=readme) + +## Immediate Action Required {/*immediate-action-required*/} + +A fix was introduced in versions [19.0.1](https://github.com/facebook/react/releases/tag/v19.0.1), [19.1.2](https://github.com/facebook/react/releases/tag/v19.1.2), and [19.2.1](https://github.com/facebook/react/releases/tag/v19.2.1). If you are using any of the above packages please upgrade to any of the fixed versions immediately. + +If your app’s React code does not use a server, your app is not affected by this vulnerability. If your app does not use a framework, bundler, or bundler plugin that supports React Server Components, your app is not affected by this vulnerability. + +### Affected frameworks and bundlers {/*affected-frameworks-and-bundlers*/} + +Some React frameworks and bundlers depended on, had peer dependencies for, or included the vulnerable React packages. The following React frameworks & bundlers are affected: [next](https://www.npmjs.com/package/next), [react-router](https://www.npmjs.com/package/react-router), [waku](https://www.npmjs.com/package/waku), [@parcel/rsc](https://www.npmjs.com/package/@parcel/rsc), [@vitejs/plugin-rsc](https://www.npmjs.com/package/@vitejs/plugin-rsc), and [rwsdk](https://www.npmjs.com/package/rwsdk). + +We will update this post with upgrade instructions on how to upgrade as they become available. + +### Hosting Provider Mitigations {/*hosting-provider-mitigations*/} + +We have worked with a number of hosting providers to apply temporary mitigations. + +You should not depend on these to secure your app, and still update immediately. + +### Vulnerability overview {/*vulnerability-overview*/} + +[React Server Functions](https://react.dev/reference/rsc/server-functions) allow a client to call a function on a server. React provides integration points and tools that frameworks and bundlers use to help React code run on both the client and the server. React translates requests on the client into HTTP requests which are forwarded to a server. On the server, React translates the HTTP request into a function call and returns the needed data to the client. + +An unauthenticated attacker could craft a malicious HTTP request to any Server Function endpoint that, when deserialized by React, achieves remote code execution on the server. Further details of the vulnerability will be provided after the rollout of the fix is complete. + +## Update Instructions {/*update-instructions*/} + +### Next.js {/*update-next-js*/} + +All users should upgrade to the latest patched version in their release line: + +```bash +npm install next@15.0.5 // for 15.0.x +npm install next@15.1.9 // for 15.1.x +npm install next@15.2.6 // for 15.2.x +npm install next@15.3.6 // for 15.3.x +npm install next@15.4.8 // for 15.4.x +npm install next@15.5.7 // for 15.5.x +npm install next@16.0.7 // for 16.0.x +``` + +If you are on Next.js 14.3.0-canary.77 or a later canary release, downgrade to the latest stable 14.x release: + +```bash +npm install next@14 +``` + +See the [Next.js changelog](https://nextjs.org/blog/CVE-2025-66478) for more info. + +### React Router {/*update-react-router*/} + +If you are using React Router's unstable RSC APIs, you should upgrade the following package.json dependencies if they exist: + +```bash +npm install react@latest +npm install react-dom@latest +npm install react-server-dom-parcel@latest +npm install react-server-dom-webpack@latest +npm install @vitejs/plugin-rsc@latest +``` + +### Expo {/*expo*/} + +To learn more about mitigating, read the article on [expo.dev/changelog](https://expo.dev/changelog/mitigating-critical-security-vulnerability-in-react-server-components). + +### Redwood SDK {/*update-redwood-sdk*/} + +Ensure you are on rwsdk>=1.0.0-alpha.0 + +For the latest beta version: + +```bash +npm install rwsdk@latest +``` + +Upgrade to the latest `react-server-dom-webpack`: + +```bash +npm install react@latest react-dom@latest react-server-dom-webpack@latest +``` + +See [Redwood docs](https://docs.rwsdk.com/migrating/) for more migration instructions. + +### Waku {/*update-waku*/} + +Upgrade to the latest `react-server-dom-webpack`: + +```bash +npm install react@latest react-dom@latest react-server-dom-webpack@latest waku@latest +``` + +See [Waku announcement](https://github.com/wakujs/waku/discussions/1823) for more migration instructions. + +### `@vitejs/plugin-rsc` {/*vitejs-plugin-rsc*/} + +Upgrade to the latest RSC plugin: + +```bash +npm install react@latest react-dom@latest @vitejs/plugin-rsc@latest +``` + +### `react-server-dom-parcel` {/*update-react-server-dom-parcel*/} + +Update to the latest version: + + ```bash + npm install react@latest react-dom@latest react-server-dom-parcel@latest + ``` + +### `react-server-dom-turbopack` {/*update-react-server-dom-turbopack*/} + +Update to the latest version: + + ```bash + npm install react@latest react-dom@latest react-server-dom-turbopack@latest + ``` + +### `react-server-dom-webpack` {/*update-react-server-dom-webpack*/} + +Update to the latest version: + + ```bash +npm install react@latest react-dom@latest react-server-dom-webpack@latest + ``` + +## Timeline {/*timeline*/} + +* **November 29th**: Lachlan Davidson reported the security vulnerability via [Meta Bug Bounty](https://bugbounty.meta.com/). +* **November 30th**: Meta security researchers confirmed and began working with the React team on a fix. +* **December 1st**: A fix was created and the React team began working with affected hosting providers and open source projects to validate the fix, implement mitigations and roll out the fix +* **December 3rd**: The fix was published to npm and the publicly disclosed as CVE-2025-55182. + +## Attribution {/*attribution*/} + +Thank you to [Lachlan Davidson](https://github.com/lachlan2k) for discovering, reporting, and working to help fix this vulnerability. diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 506e8c922..c81b270b0 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -4,20 +4,85 @@ 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. +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4
+<<<<<<< HEAD +======= + + +There is an unauthenticated remote code execution vulnerability in React Server Components. A fix has been published in versions 19.0.1, 19.1.2, and 19.2.1. We recommend upgrading immediately. + + + + + +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 ... + + + + +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 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 +90,9 @@ We're releasing the compiler's first stable release today, plus linting and tool +======= + +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 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..b3950d02a 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. +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 diff --git a/src/content/errors/index.md b/src/content/errors/index.md index 138c9d5f4..df20bad43 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). +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 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..69a899053 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. +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 العديد من الإطارات القائمة على 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. +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 للتحقق مما إذا كان إعدادك يعمل، قم بتشغيل هذا الأمر في مجلد مشروعك: @@ -63,7 +75,11 @@ npm install react react-dom تطبيقي +<<<<<<< HEAD +======= + +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4
@@ -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/). +>>>>>>> e22544e68d6fffda33332771efe27034739f35a4 @@ -151,7 +171,11 @@ root.render(); لاحظ كيف احتفظت بمحتوى HTML الحالي من `index.html`، ولكن مكون React الخاص بك `NavigationBar` الآن يظهر داخل `