freeCodeCamp

3.4 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403618d	Render React on the Server with renderToString	6	false		تجعل رد فعل على الخادم مع renderToString

Description

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

Instructions

يتم توفير الأسلوب renderToString() على ReactDOMServer ، والذي يتوفر هنا ككائن عام. تأخذ الطريقة وسيطة واحدة وهي عنصر React. استخدم هذا لتقديم App إلى سلسلة.

Tests

tests:
  - text: يجب تقديم مكون <code>App</code> إلى سلسلة باستخدام <code>ReactDOMServer.renderToString</code> .
    testString: 'getUserInput => assert(getUserInput("index").replace(/ /g,"").includes("ReactDOMServer.renderToString(<App/>)") && Enzyme.mount(React.createElement(App)).children().name() === "div", "The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.");'

Challenge Seed

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div/>
  }
};

// change code below this line

Before Test

var ReactDOMServer = { renderToString(x) { return null; } };

After Test

console.info('after the test');

Solution

// solution required

3.4 KiB Raw Blame History