Вы можете вспомнить использование ReactDOM API в более ранней попытке визуализации элементов JSX в DOM. Процесс рендеринга компонентов React будет выглядеть очень похоже. Последние несколько проблем были сосредоточены на компонентах и ​​составе, поэтому рендеринг был сделан для вас за кулисами. Однако ни один из написанного вами кода React не будет отображаться в DOM без обращения к ReactDOM API. Ниже приведен синтаксис: ReactDOM.render(componentToRender, targetNode) . Первый аргумент - это компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, который вы хотите отобразить внутри этого компонента. Компоненты React передаются в ReactDOM.render() несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например ReactDOM.render(<ComponentToRender />, targetNode) . Этот синтаксис используется для компонентов класса ES6 и функциональных компонентов.

Компоненты « Fruits и Vegetables определены для вас за кулисами. Выделите оба компонента как дочерние TypesOfFood компонента TypesOfFood , а затем визуализируйте TypesOfFood в DOM. Для вас доступен div с id='challenge-node' .

Предположим, у вас есть файл, который вы хотите импортировать все его содержимое в текущий файл. Это можно сделать с помощью синтаксиса import * . Вот пример, когда содержимое файла с именем "math_functions" импортируется в файл в том же каталоге:

import * как myMathModule из "math_functions";
myMathModule.add (2,3);
myMathModule.subtract (5,3);

import * как object_with_name_of_your_choice из "file_path_goes_here"
object_with_name_of_your_choice.imported_function

В приведенном ниже коде требуется содержимое файла "capitalize_strings" , найденного в том же каталоге, который он импортировал. Добавьте соответствующий оператор import * в начало файла, используя предоставленный объект.

Теперь, когда вы изучили основы компонентов JSX и React, пришло время написать компонент самостоятельно. Реагирующие компоненты являются основными строительными блоками приложений React, поэтому важно хорошо ознакомиться с их написанием. Помните, что типичным компонентом React является class ES6, который расширяет React.Component . Он имеет метод рендеринга, который возвращает HTML (из JSX) или null . Это основная форма компонента React. Как только вы это хорошо поймете, вы будете готовы начать строительство более сложных проектов React.

Определите класс MyComponent который расширяет React.Component . Его метод render должен возвращать div , содержащий тег h1 с текстом: My First React Component! в этом. Используйте этот текст точно, дело и значение пунктуации. Не забудьте также вызвать конструктор для вашего компонента. Передайте этот компонент в DOM с помощью ReactDOM.render() . Для вас доступен div с id='challenge-node' .

Вы можете вспомнить использование ReactDOM API в более ранней попытке визуализации элементов JSX в DOM. Процесс рендеринга компонентов React будет выглядеть очень похоже. Последние несколько проблем были сосредоточены на компонентах и ​​составе, поэтому рендеринг был сделан для вас за кулисами. Однако ни один из написанного вами кода React не будет отображаться в DOM без обращения к ReactDOM API. Ниже приведен синтаксис: ReactDOM.render(componentToRender, targetNode) . Первый аргумент - это компонент React, который вы хотите отобразить. Второй аргумент - это узел DOM, который вы хотите отобразить внутри этого компонента. Компоненты React передаются в ReactDOM.render() несколько иначе, чем элементы JSX. Для элементов JSX вы передаете имя элемента, который вы хотите отобразить. Однако для компонентов React вам нужно использовать тот же синтаксис, как если бы вы отображали вложенный компонент, например ReactDOM.render(<ComponentToRender />, targetNode) . Этот синтаксис используется для компонентов класса ES6 и функциональных компонентов.

Компоненты « Fruits и Vegetables определены для вас за кулисами. Выделите оба компонента как дочерние TypesOfFood компонента TypesOfFood , а затем визуализируйте TypesOfFood в DOM. Для вас доступен div с id='challenge-node' .