{"draftJsState":{"blocks":[{"data":{"image":{"id":"63e009a45bb4f91a7c984843"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9r28d"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"11fgi"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":156,"offset":0}],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Курс SkillFactory Frontend-разработчик PRO. Получите перспективную творческую профессию. Изучите JavaScript и TypeScript. Выполните 13 проектов в портфолио.","type":"unstyled","key":"ap0rh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React в приложениях Angular может понадобится в двух случаях.","type":"unstyled","key":"g0ml"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":8,"offset":102}],"inlineStyleRanges":[],"text":"В экосистеме React есть компонент, на разработку которого, вероятно, уйдут недели, например компонент Timeline.","type":"unordered-list-item","key":"et9tn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сотрудничество с компанией, использующей React, которой необходимо интегрировать его в существующее приложение.","type":"unordered-list-item","key":"d2mtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье я расскажу, как интегрировать React в обоих сценариях. Начнем с самого простого случая, когда нужно использовать компонент React.","type":"unstyled","key":"3ll7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рендеринг компонента React","type":"header-three","key":"8qsu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим директиву, которая принимает компонент React и пропсы и осуществляет рендеринг на хост. Предположу, что вы уже знакомы с React.","type":"unstyled","key":"2qeon"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { ComponentProps, createElement, ElementType } from 'react';\nimport { createRoot } from 'react-dom/client';\n\n@Directive({\n selector: '[reactComponent]',\n standalone: true\n})\nexport class ReactComponentDirective {\n @Input() reactComponent: Comp;\n @Input() props: ComponentProps;\n\n private root = createRoot(inject(ElementRef).nativeElement)\n\n ngOnChanges() {\n this.root.render(createElement(this.reactComponent, this.props))\n }\n\n ngOnDestroy() {\n this.root.unmount();\n }\n\n}","type":"blockquote","key":"ecvkk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Директива берет компонент React и пропсы, создает корень и совершает повторный рендеринг при каждом его изменении.","type":"unstyled","key":"e3kmq"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":12,"offset":44}],"inlineStyleRanges":[],"text":"В этом примере мы будем рендерить компонент React Select внутри ленивого компонента страницы todos. Мы установим его с помощью npm i react-select и передадим директиве:","type":"unstyled","key":"4q8vi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import Select from 'react-select';\nimport type { ComponentProps } from 'react';\n\n@Component({\n standalone: true,\n imports: [CommonModule, ReactComponentDirective],\n template: `\n

Todos page

\n \n

\n `\n})\nexport class TodosPageComponent {\n Select = Select;\n selectProps: ComponentProps