3.4 KiB
3.4 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d403618d | Render React on the Server with renderToString | 6 | false | تجعل رد فعل على الخادم مع renderToString |
Description
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