Как создавать пользовательские компоненты в React
СОЗДАНИЕ НОВОГО КОМПОНЕНТА В REACTJS
компонент реакции используется для повторного использования кода, он похож на функцию, но работает как независимый, и вы можете создавать несколько компонентов.
Я буду использовать код Visual Studio в качестве редактора кода, который вы также можете скачать по ссылке ниже.
исходный код:
https://github.com/Bilalthoughts/Createing-a-new-component-in-react-JS.git
Давайте начнем:
Я не буду вдаваться в подробности о том, как создать проект, хорошо, поэтому после открытия проекта в VS Code есть папка, которую я создал, с именем Basics.
теперь в основной папке, которая в моем случае является базовой, будет несколько подпапок, вам просто нужно сосредоточиться на папке src, щелкните ее, а затем щелкните файл App.js.
Затем уже есть какая-то строка кода, просто сосредоточьтесь на функции приложения, в которую мы добавим компонент.
теперь щелкните правой кнопкой мыши папку src и выберите новый файл, назовите файл, например MyComponent.jsx, и нажмите клавишу ввода.
Теперь создайте функцию MyComponent и в методе возврата создайте теги div и созданный тег h1 с некоторым текстом в нем и экспортируйте по умолчанию, как вы можете видеть на изображении ниже.
теперь, после создания компонента, вернемся к файлу app.js и добавим тег нашего компонента в функцию и импортируем компонент, как показано на рисунке ниже.
Теперь просто запустите программу, набрав npm start в командной строке, чтобы увидеть результат, как на изображении ниже, на локальном хосте.
Вы также можете получить доступ к моему репозиторию GitHub для вышеуказанной программы.
https://github.com/Bilalthoughts/Createing-a-new-component-in-react-JS.git
Вы также можете перейти по ссылке ниже, чтобы увидеть вывод или результат компонента.
https://bilalthoughts.github.io/Createing-a-new-component-in-react-JS/
