Abr@X@bra.ru
Курс по React JS #5. React JS. Компоненты

Курс по React JS #5. React JS. Компоненты

17.04.2017
343

Главной идеей React, является создание компонентов. React компоненты можно себе представить, как компонент пользовательского интерфейса. Это может быть, кнопка, меню или даже целое приложение. Если вы работали с Bootstrap или другими CSS фреймворками, то идея компонентов должна быть вам знакома.

Создаем свой компонент

До настоящего момента, мы создавали React элементы, которые являются основой React компонентов. На самом базовом уровне, компонент представляет из себя функцию которая возвращает JSX.  Давайте после постоянной создадим компонент приложения, который назовем app.  

Это все, что нужно для создания компонента. Есть еще пара способов создать компонент, но о них мы поговорим чуть позже. Теперь, компонент App необходимо отправить в метод render. 


Посмотрим на результат в браузере. 


В консоле мы получили ошибку. React не понравилось, как мы передали компонент App в метод render. 

Правильно передать его можно двумя способами. Первый, это с помощью метода React.createElement у объекта React. То есть, App мы можем обернуть в:

Посмотрим на результат в браузере. 


Ошибка пропала. 
И второй способ, это с помощью JSX. Для этого из названия функции сделаем название JSX элемента. 


В JSX все “пустые” элементы необходимо закрывать косой линией. Посмотрим на результат. 

В консоле ошибки нету. 

Важные моменты при создание компонентов

Название React компонентов должно начинаться с заглавной буквы. Если функцию App назову с маленькой буквы.

То ошибки не будет. Но на странице мы ничего не увидим. 


Если же я верну обратно, как было ранее, то проблема будет решена. 
Называть компоненты с заглавной буквы также необходимо на случай если мы захотим создать компонент названия которого уже имеется в html. 

Например, назвать компонент button с маленькой буквы, нельзя, а вот с большой можно. 
React компонент должен вернуть один JSX элемент, допустим если я уберу див. 


То в таком случае мы пытаемся вернуть два JSX элемента, H1 и параграф. Редактор у же меня предупреждает об ошибки, давайте посмотрим в консоль.

В консоли мы так же видим ошибку. Если див вернуть назад, таким образом мы возвращаем один JSX  элемент и ошибка пропала.  

Компоненты являются основой React приложений. И именно им в данном курсе будем уделять максимум внимания.
Очень важной частью также является, взаимодействия компонентов, которым мы так же уделим время в следующих постах.



React JS, Компоненты
Читайте также:
Курс по ES6 #0. Пилотный выпуск. Вступление

Курс по ES6 #0. Пилотный выпуск. Вступление

ECMAScript 2015 или ES6 летом 2015 был принят как официальный стандарт, и является самым крупным обновлением языка за по...
Читать
Курс по React JS #2. Средства разработчика

Курс по React JS #2. Средства разработчика

Продолжаем изучать React JS. В этом посте я расскажу как установить и настроить средства разработчика, чтобы процесс...
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать
Источник: codedojo