1. История 1 ?
Начнем с очень простого фрагмента кода:
function App() { return ‹h1›Привет!‹/h1›
Здесь ‹h1›Привет!‹/h1› рассматривается как JSX и был возвращен функцией App.
Поэтому, говоря простым языком, JSX — это то, что мы пишем в компоненте, чтобы сообщить React, что мы хотим показать на экране.
Согласно React Docs, JSX просто предоставляет синтаксический сахар для функции `React.createElement()`.
*Примечание. JSX на самом деле не выполняется в браузере, потому что это недействительный Javascript, а браузер понятия не имеет, что такое 217 на самом деле.
2. История 2 ?
`‹h1›Привет!‹/h1›`
Написание этого внутри функции `App` не имеет никакого смысла для браузера, и поэтому ничего не отображается в браузере автоматически. Он скорее создает инструкцию для React, тестируя ее для создания элемента. Мы должны вернуть его из компонента, чтобы React действительно его использовал.
Чтобы отобразить содержимое с помощью 519, мы используем `{}`
3. История 3 ?
Давайте возьмем пример предыдущего фрагмента кода.
`function App() { return ‹h1›Привет‹/h1›}`
Здесь мы жестко запрограммировали возвращаемое значение как «Привет!», но может ли JSX сделать больше? Что, если я хочу выполнить некоторые математические вычисления, сохранить их в переменной Javascript, а затем вернуть на экран?
Это можно сделать с помощью JSX. Давайте посмотрим, как мы можем вернуть переменные в JSX.
Рассмотрим еще один фрагмент кода
`const message = ‘Как дела 506’? ‘`
Теперь, поскольку это хранится в переменной `message`, мы можем выполнять вычисления и соответствующим образом изменять значение, поэтому, чтобы вернуть это как JSX, мы просто отобразим его с помощью `{}`.
`функция App () {возврат ‹h1›{сообщение}‹/h1›}`
Это вернет значение переменной message на экран.
*Примечание. Мы можем напечатать любую переменную JavaScript любого типа, будь то строка, число, массив, логическое значение, но мы не можем напечатать объект внутри JSX
JSX в основном используется для отображения строк и чисел на экране, поскольку он ведет себя несколько иначе для массивов и логических значений*
4. Преобразование HTML в JSX
Есть несколько правил преобразования HTML в JSX. Понимание этого очень поможет нам в написании JSX проще и быстрее.
Все имена свойств следуют за camelCase.
HTML : `‹input maxlength=’4’/›`
JSX : `‹input maxLength=’4’ /›`
2. В числовых атрибутах используются фигурные скобки.
`‹введите maxLength={4} /›`
3. Логическое значение true может быть записано только с именем свойства. false должен быть заключен в фигурные скобки.
- `‹вход отключен readOnly={false}/›`
4. Атрибут class записывается как className.
HTML : `‹input class=’text’/›`
JSX: `‹input className=’text’ /›`
5. Встроенные стили предоставляются как объекты.
`‹стиль ввода={{backgroundColor:red}} /›`
Если вам понравился контент, вы можете просмотреть репозиторий github, где я постоянно обновляю свои знания, теорию и код. Дайте ему звезду, если он вам понравился: https://github.com/uankit/Modern-React-With-Redux-Course
Свяжитесь со мной в LinkedIn для сотрудничества
