Введение
В этом уроке мы узнаем, что такое JSX. Кроме того, мы создадим свой первый функциональный компонент.
Поехали!
Что такое JSX?
JSX - это расширение синтаксиса JavaScript. С его помощью мы создаём компоненты и потом используем их в других компонентах. После того, как JSX код скомпилировался, он превращается в обычный вызов JS-функций.
Можно было бы прожить и без JSX. Но это бы очень сильно увеличило время разработки приложений, а также усложнило бы их дальнейшую поддержку.
То есть можно сделать вывод, что JSX - это спасение React-разработчиков.
Создаём первый компонент
Весь React сводится к тому, что мы создаём компоненты, а потом используем их в других компонентах. Но как это делать? Сейчас разберёмся.
Добавим в файл App.js вот такой код:
Сейчас объясню, что мы сделали.
На 11 строке мы объявили новый компонент и написали в нём небольшую разметку. Здесь есть два момента, на которые нужно обратить внимание:
- Имя компонента всегда должно начинаться с большой буквы;
- Перед тем, как создавать разметку в компоненте, нужно прописать оператор return, чтобы компонент возвратил нашу разметку;
На 6 строке мы использовали наш компонент в другом компоненте App.
Теперь можете взглянуть, что же будет в браузере. Если всё заработает, то вы увидите текст "My first component". Мы создали и использовали нашу первую компоненту!
Заключение
В следующем уроке мы рассмотрим такую полезную штуку, как пропсы. А на этом всё.
Пока!