ابدأ مشروع React جديد

Can I use React without a framework?

يمكن بالتأكيد استخدام React بدون إطار عمل - هكذا ستستخدم React لجزء من صفحتك لكن إذا كنت تريد بناء تطبيق أو موقع جديد باستخدام React كلياً ، فننصح باستخدام إطار عمل.

You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework.

والسبب لهذا:

حتى لو كنت لا تحتاج توجيه (routing) أو جلب بيانات (data fetching) بالبداية ، على الأرجح ستضيف مكتبات لأجلهم. مع نمو حزمة JavaScript الخاصة بك مع كل ميزة جديدة ، قد تضطر إلى معرفة كيفية تقسيم الكود لكل مسار على حدة. مع ازدياد حاجة جلب البيانات لديك بالازدياد تعقيداً ، فمن المحتمل أن تواجه شلالات شبكة من الخادم للعميل (server-client network waterfalls) ستجعل تطبيقك يظهر بطيئًا للغاية. مع نمو جمهورك سيضم المزيد من المستخدمين الذين يعانون من ظروف شبكة سيئة وأجهزة منخفضة الجودة ، فقد تحتاج إلى توليد HTML للمكوّنات الخاصة بك لعرض المحتوى مبكرًا - إما على الخادم أو أثناء وقت البناء. قد يكون تغيير بنية مشروعك لتشغيل بعض التعليمات البرمجية على الخادم أو أثناء البناء أمرًا شائكاً للغاية.

Here’s why.

Even if you don’t need routing or data fetching at first, you’ll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early—either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.

هذه المشاكل ليست محصورة على React فقط. لهذا Svelte لديها SvelteKit ، و Vue لديها Nuxt ، وما إلى ذلك . لحل هذه المشكلات بمفردك ، ستحتاج إلى دمج الحزمة الخاصة بك مع جهاز توجيهك ومع مكتبتك لجلب البيانات. ليس من الصعب تشغيل الإعداد الأولي ، ولكن هناك الكثير من التفاصيل الدقيقة المتضمنة في إنشاء تطبيق يتم تحميله بسرعة حتى مع نموه بمرور الوقت. سترغب في إرسال الحد الأدنى من كود التطبيق ، ولكن برحلة ذهاب وإياب واحدة بين العميل والخادم ، بالتوازي مع أي بيانات مطلوبة للصفحة. على الأرجح سترغب أن تكون الصفحة تفاعلية (interactive) قبل تشغيل أي كود JavaScript ، وذلك لدعم التحسين التدريجي (progressive enhancement). قد ترغب في إنشاء مجلد من ملفات HTML الثابتة تمامًا لصفحات التسويق الخاصة بك والتي يمكن استضافتها في أي مكان والتي تعمل مع تعطيل JavaScript. بناء هذه القدرات بنفسك يتطلب عملاً جاداً.

These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on. To solve these problems on your own, you’ll need to integrate your bundler with your router and with your data fetching library. It’s not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You’ll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You’ll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.

تقوم أطر عمل React في هذه الصفحة بحل مشكلات كهؤلاء افتراضيًا ، بدون أي عمل إضافي من جانبك. حيث يتيحون لك البدء بمرونة شديدة ثم توسيع نطاق تطبيقك وفقًا لاحتياجاتك. يحتوي كل إطار عمل في React على مجتمع خاص به ، لذا فإن العثور على إجابات للأسئلة وترقية الأدوات أسهل. توفر الأطر أيضًا بنية لكودك ، مما يساعدك أنت والآخرين على الاحتفاظ بالسياق والمهارات بين المشاريع المختلفة. العكس بالعكس ، مع بنية مشروع مخصصة سيكون من الأسهل أن تعلق على نسخة تبعية (dependency) غير مدعومة. وسينتهي بك الأمر فعلياً إلى إنشاء إطار العمل الخاص بك - وسيكون بدون مجتمع أو مسار ترقية (وفي حال كونه مشابه لما صنعناه في الماضي ، فسيتم تصميمه عشوائياً).

إذا كنت لا تزال غير مقتنع ، أو أن تطبيقك به قيود غير معتادة لا تخدمها هذه الأطر جيدًا وتريد تشغيل إعداد مخصص خاص بك ، لا يمكننا منعك - قم بذلك! أجلب react و react-dom من npm ، قم بإعداد عملية بنائك المخصصة باستخدام أداة تجميع (bundler) كـVite أو Parcel ، وقم بإضافة أدوات أخرى حسب حاجتك إليها للتوجيه أو التوليد الثابت (static generation) أو العرض من جانب الخادم (server-side rendering) ، وما إلى ذلك.

React frameworks on this page solve problems like these by default, with no extra work from your side. They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it’s easier to get stuck on unsupported dependency versions, and you’ll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it’s anything like the ones we’ve made in the past, more haphazardly designed).

If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup, we can’t stop you—go for it! Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.

Which features make up the React team’s full-stack architecture vision?

تقوم أداة تجميع (bundler) موجه التطبيق لـ Next.js بتطبيق مواصفات مكوّنات المخدّم لـReact بشكل كامل. حيث تتيح لك المزج بين مكوّنات وقت البناء و مكوّنات الخادم فقط (server-only) والمكوّنات التفاعلية في شجرة React واحدة.

على سبيل المثال ، يمكنك كتابة مكوّن React خادم فقط كتابع غير متزامن ‘async’ يقرأ من قاعدة بيانات أو من ملف. ثم يمكنك تمرير البيانات منه إلى مكوّناتك التفاعلية:

Next.js’s App Router bundler fully implements the official React Server Components specification. 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:

// هذا المكّون يتم تنفيذه فقط على المخدّم (أو خلال البناء)
// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
  // 1. أنت على المخدّم ، يمكنك التحدث إلى طبقة البيانات الخاصة بك ، لا يوجد حاجة لنقطة نهاية (endpoint) ِAPI 
  // 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. أضف اي كمية من منطق عرض (rendering logic). لأنها لن تجعل حزمة JavaScript أكبر.
  // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
  const videos = talks.map(talk => talk.video);

  // 3. مرر البيانات أسفلاً للمكوّنات التي سوف يتم تنفيذها في المتصفح
  // 3. Pass the data down to the components that will run in the browser.
  return <SearchableVideoList videos={videos} />;
}

موجه التطبيق لـNext.js يقوم أيضاّ بإدماج جلب البيانات مع التعليق (suspense). يتيح لك هذا تحديد حالة تحميل (كعنصر نائب هيكلي) لأجزاء مختلفة من واجهة المستخدم مباشرةً في شجرة React:

Next.js’s App Router also integrates data fetching with Suspense. This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

مكوّنات الخادم والتعليق هي ميزات React وليست ميزات Next.js. ومع ذلك ، فإن تبنيها على مستوى إطار العمل يتطلب دعمًا وعملًا تطبيقياً غير تافه. في الوقت الحالي ، يعد موجه تطبيقات Next.js هو التطبيق الأكثر اكتمالاً. يعمل فريق React مع مطوري أدوات التجميع لتسهيل تطبيق هذه الميزات في الجيل التالي من أطر العمل.

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.