React JSX в деталях

Опубликовано: 4 Января, 2022

Как мы видели в этой статье React.js (Введение и работа), как работает React, разбивая наше приложение на более мелкие многократно используемые части, которые мы называем компонентами . Эти компоненты представляют собой древовидный HTML или структуру компонентов. В этой статье мы увидели, как создавать элементы с помощью createElement в реакции. Но если нам нужно работать с методом createElement React только для создания элементов, тогда это будет хорошо для демонстрационных целей или для небольшого приложения, но не для большого приложения. Вы просто не должны его использовать.

  • React.createElement отлично подходит для создания элементов для небольшого приложения или для демонстрационных целей, но не для большого продаваемого приложения, потому что его будет очень сложно поддерживать или отлаживать. мы должны вызывать метод React.createElement каждый раз для создания элемента React, даже если это всего лишь тег span без атрибутов.

  • Вы можете создать целое приложение, используя метод React.createElement (который я не рекомендую).

Если мы не должны использовать createElement, используйте JSX. Это JavaScript и XML. Это расширение JavaScript, которое позволяет нам определять элементы React, используя синтаксис стиля на основе тегов в нашем коде JS. Как это круто?

Иногда новый разработчик путает JSX с HTML, потому что они кажутся очень знакомыми. JSX - это еще один способ создания элементов React. Команда React создала JSX, чтобы сделать его более читабельным, как HTML и XML. Так что нам не нужно создавать элементы React вручную с помощью метода createElement. допустим, вы хотите создать кнопку с классом btn , btn-primary .

Javascript

<button className= "btn btn-primary" > save </button>

Это синтаксис JSX, похожий на HTML, но с небольшими отличиями, которые мы обсудим позже в этой статье. JSX также работает с компонентами,

Javascript

<Component className= "card" >
<div>Hello world</div>
</Component>

На следующем изображении показано, как составить React Element из метода React.createElement и JSX.

Из изображения выше вы можете ясно видеть, что мы можем легко создать элемент React с помощью JSX. Удобочитаемость также является основной причиной, которая сопровождается простотой реализации JSX командой React.

Браузер не понимает синтаксис JSX из коробки, вам необходимо преобразовать / скомпилировать код JSX в код JavaScript. Для этого можно использовать Babel. Вы можете добавить Babel в свой HTML-файл, используя ссылку CDN в теге скрипта. Мы должны внешне указать, откуда Babel должен транслироваться. Для этого мы добавляем атрибут типа (text / babel) в наш тег скрипта.

HTML

< body >
// Root element of React code
< div id = "root" ></ div >
< script crossorigin src =
</ script >
< script crossorigin src =
</ script >
// Babel
< script src =
</ script >
// Our JS code
< script src = "./main.js" type = "text/babel" ></ script >
</ body >

При запуске с JSX следует учитывать определенные правила:



  • type: как вы все знаете, мы должны указать в качестве первого аргумента метода React.createElement, чтобы сообщить реакции, какой тип элемента мы хотим создать. При создании элемента с помощью JSX мы должны сообщить о реакции, указав тип элемента в виде тега (например, HTML). Это может быть тег HTML или настраиваемый компонент. Например, на изображении выше мы хотим создать настраиваемый компонент с именем « Компонент», а затем нам нужно создать тег, подобный HTML. Поставляется в 2-х вариантах.
    • Открывающий и закрывающий теги: если у нас есть дочерние элементы, которые подпадают под наш компонент, мы должны указать дочерние элементы между открывающим и закрывающим тегами.
    • Самозакрывающийся: если у нас нет дочерних элементов, которые нужно указать, мы также можем использовать самозакрывающийся тег.

Javascript

<ButtonComponent> // Opening tag of ButtonComponent
// Self closing tag because it
// doesn't have children
<span> name </span>
<ButtonImageComponent />
// Closing tag of ButtonComponent
</ButtonComponent>

Если мы хотим создать элемент, у которого нет дочерних элементов, мы можем использовать открывающий и закрывающий теги и самозакрывающийся тег.

Под капотом весь ваш JSX будет скомпилирован в React.createElement.

  • props: когда мы создаем элемент с помощью React.createElement, мы должны указать его свойства в качестве второго аргумента, но с JSX мы можем указать его свойства как атрибуты (например, атрибуты HTML старого стиля). Допустим, мы хотим указать класс и идентификатор для кнопки.

Javascript

const id = Math.floor(Math.random() * 10e8); // Random number
const ButtonComponent = ( <button className= "btn btn-primary" id={ id }>
click me
</button> );
ReactDOM.render(ButtonComponent, document.querySelector( "#root" ));

В этом фрагменте кода мы видим, что мы указали свойства как атрибут для ButtonComponent.

Согласно соглашению, мы должны использовать первый символ нашего пользовательского компонента. Это соглашение не распространяется на встроенные HTML-теги, такие как span, div, h1 и т. Д.

  • children: если мы хотим добавить дочерние элементы компонента, мы должны указать между открывающим и закрывающим тегами элемента React.

Javascript

const listComponent = (
<ul>
<li>Alex</li>
<li>Ragnar</li>
<li>Akbar</li>
<li>Mandy</li>
</ul>
);
ReactDOM.render(
listComponent,
document.querySelector( '#root' )
)
/************** OR **************
const listCustomComponent = (
<NameComponent>
<ListComponetn name= "Alex" ></ListComponetn>
<ListComponetn name= "Ragnar" ></ListComponetn>
<ListComponetn name= "Akbar" ></ListComponetn>
<ListComponetn name= "Mandy" ></ListComponetn>
</NameComponent>
)
ReactDOM.render(
listCustomComponent,
document.querySelector( '#root' )
)

Выражение JavaScritp: выражение JavaScript должно быть заключено в одну фигурную скобку и должно указывать, где переменная будет оцениваться в JSX. Допустим, вы хотите указать заголовок. {title} оценивается и заменяется строкой "Люди".

Javascript

const title = "Human beings" ;
const HumanComponent = (
<h1> { title } </h1>
)

Значения типа, отличного от строкового, также следует указывать в фигурных скобках. например

Javascript

const isHuman = true ;
const IsHumanComponent = (
<h4>Ronaldo is human: { isHuman }<h4>
)
/****** OR **********
const IsHumanComponent = (
<h4>Ronaldo is human { true }<h4>
)

Поскольку выражение между фигурными скобками будет оцениваться, мы также можем использовать их в операциях конкатенации или сложения.

    {"Привет" + "Мир"}
    {Math.random () * 100}
    {[1, 2, 3, 4, 5] .reduce ((acc, curr) => acc + curr)}

Сопоставление массива с JSX: JSX - это javascript, поэтому вы можете перебирать массив и также создавать элементы с помощью JSX.

Javascript

const names = [ "React.js" , "Angular" , "Node.js" , "jQuery" , "underscore.js" ]
const Command = (
<h4>
{
names.map( function creatNameElement(name){
return <li key={ name }> { name } </li>
})
}
</h4>
);
ReactDOM.render(
Command,
document.querySelector( '#root' )
)

Выход:

Выбор типа во время выполнения: если вы хотите указать имя среды выполнения элемента реакции, вы не можете использовать выражение вместо типа. Сначала вам нужно создать переменную с заглавной буквы, а затем использовать эту переменную вместо типа. Это может быть полезно, если вы хотите показать компоненты на основе реквизита.

Javascript

function Add({a, b}) {
return (
<h1>Additon is { a + b }</h1>
)
}
function Multiplication( { a, b } ) {
return (
<h1>Subtraction is { a * b }</h1>
)
}
function Show( props ) {
const components = {
add: Add,
multiplication: Multiplication,
};
const MathComponent = components[props.type];
return (
<MathComponent a={10} b={ 20 }/>
)
}
ReactDOM.render(<Show type= "multiplication" />, document.querySelector( "#root" ));

Выражения JavaScript в качестве реквизита: вы также можете передавать выражение JavaScript в качестве реквизита. Чтобы это сработало, просто оберните вашу опору фигурными скобками.

Javascript

function JavaScriptExpressionAsProps({ num }) {
return (
<h1>Prop Number is: { num }</h1>
)
}
ReactDOM.render(
/* Addition is evaluated and assign its value to num */
<JavaScriptExpressionAsProps num={ 1+ 2 + 3 + 4 + 5} />,
document.querySelector( "#root" )
);

Строковый литерал / литерал шаблона как опора: вы также можете использовать строковый литерал или литерал шаблона как опору. s

Javascript

function NameComponent({ name }) {
return (
<h1>{ name }</h1>
)
}
ReactDOM.render( <NameComponent name= 'Praveen kumar string literal' />,
document.querySelector( "#root" ) );
/************ OR ***********/
ReactDOM.render( <NameComponent name=
{ 'Praveen kumar string literal as expression' } />,
document.querySelector( "#root" ));
/************ OR ***********/
ReactDOM.render(
<NameComponent name=
{`Praveen kumar string template literal as expression`} />,
document.querySelector( "#root" )
);

По умолчанию для свойства задано логическое значение True: если вы хотите указать истинное логическое значение для компонента в качестве опоры, вы можете внешне указать true как значение, или вы не можете передать какое-либо значение, тогда по умолчанию значение считается истинным.

Javascript

function IdentifyHuman( { name, isHuman } ) {
if ( isHuman === true ) {
return <h1>{ name } is human</h1>
} else {
return <h1>{ name } is not human</h1>
}
}
ReactDOM.render(
<IdentifyHuman name= "Praveen kumar" isHuman={ true } />,
document.querySelector( "#root" )
);
/************** OR ********************/
ReactDOM.render(
<IdentifyHuman name= "Praveen kumar" isHuman />,
document.querySelector( "#root" )
);

Рекомендуется указывать логическое значение извне, чтобы избежать путаницы.

Атрибуты распространения: как мы знаем, реквизит - это просто объект javascript. Если мы хотим присвоить все эти свойства другому компоненту как есть, мы можем распространить эти свойства.

Javascript

function PrintName( { name, isHuman } ) {
if ( isHuman === true ) {
return <h4>{name} is Human</h4>;
} else {
return <h4>{name} is Super Human</h4>;
}
}
function ShowHuman( props ) {
return (
<div>
<h1>Human</h1>
<PrintName {...props}/>
</div>
)
}
ReactDOM.render(
<ShowHuman name= "Praveen kumar" isHuman={ false } />,
document.querySelector( "#root" )
);

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

Дочерние элементы в JSX: в синтаксисе JSX все, что вы передаете в открывающем и закрывающем тегах, становится потомками. Вы можете увидеть этих детей как свойство props.children.

Строковый литерал в качестве дочерних элементов: мы можем использовать строковый литерал в качестве дочерних элементов, и ему будет напрямую назначена эта строка для свойства дочерних элементов свойства props. JSX обрезает начальные и конечные пробелы или новую строку. Если вы добавляете новую строку между строкой, новая строка заменяется одним пробелом

Javascript

function ListComponent( props ) {
console.log( props.children ); // Child string
return (
<h1>List component</h1>
)
}
ReactDOM.render(
<ListComponent>
Child
string
</ListComponent>,
document.querySelector( "#root" )
);

JSX Children: если мы хотим добавить несколько дочерних элементов компонента, мы должны указать промежуток между открывающим и закрывающим тегами. Это может быть строка, пользовательский компонент или и то, и другое.

Javascript

function ShowList( { list } ) {
console.log( list );
return (
<ul>
{ list.map( (el, index) => <li key={index}>{ el }</li>) }
</ul>
);
}
function ListHeading() {
return (
<div>
<h1>List component</h1>
</div>
);
}
ReactDOM.render(
<div>
<ListHeading />
This is just a dummy text
<ShowList list={[ 'first' , 'second' , 'third' ]}/>
</div>,
document.querySelector( "#root" )
);

Функции как дочерние элементы : вы также можете передать функцию как дочернюю, а затем мы сможем получить прямой доступ, используя свойство props.children.

Javascript

function ListComponent(props) {
props.children(); // invoke function;
return (
<div>
<h1>List component</h1>
</div>
);
}
ReactDOM.render(
<ListComponent >
{ function print() {
console.log( 'This is print function passed as a child' );
}}
</ListComponent>,
document.querySelector( "#root" )
);

Надеюсь, вы узнали что-то новое. Спасибо, что прочитали эту статью.