0 added
0 removed
Original
2026-01-01
Modified
2026-03-10
1
<p>Теги: javascript, react, web-разработка, web dev, web, web development, jsx, xhtml, .jsx, транспайлеры, nodejs, babel, babel-react-prese, атрибуты, classname, onclick, class="page", classname="page", <button onclick={() => alert('!')}></p>
1
<p>Теги: javascript, react, web-разработка, web dev, web, web development, jsx, xhtml, .jsx, транспайлеры, nodejs, babel, babel-react-prese, атрибуты, classname, onclick, class="page", classname="page", <button onclick={() => alert('!')}></p>
2
<p>В основе<strong>React</strong>лежит<strong>JSX</strong>- специальный язык/диалект/технология/разметка (ненужное зачеркнуть). Несмотря на то, что<strong>React</strong>можно использовать и без<strong>JSX</strong>, а<strong>JSX</strong>транслировать не в<strong>React</strong>-компоненты, всё равно, обычно когда говорят<strong>React</strong>подразумевают<strong>JSX</strong>.</p>
2
<p>В основе<strong>React</strong>лежит<strong>JSX</strong>- специальный язык/диалект/технология/разметка (ненужное зачеркнуть). Несмотря на то, что<strong>React</strong>можно использовать и без<strong>JSX</strong>, а<strong>JSX</strong>транслировать не в<strong>React</strong>-компоненты, всё равно, обычно когда говорят<strong>React</strong>подразумевают<strong>JSX</strong>.</p>
3
<p>Итак<strong>JSX</strong>- это специальный язык, расширение<strong>JavaScript</strong>, условно можно его называть<strong>XHTML</strong>внутри<strong>JS</strong>. Да-да, раньше все писали<strong>JavaScript</strong>внутри<strong>HTML</strong>, а теперь наоборот. Располагается<strong>JSX</strong>в файлах с расширением<strong>.jsx</strong>и выглядит вот так:</p>
3
<p>Итак<strong>JSX</strong>- это специальный язык, расширение<strong>JavaScript</strong>, условно можно его называть<strong>XHTML</strong>внутри<strong>JS</strong>. Да-да, раньше все писали<strong>JavaScript</strong>внутри<strong>HTML</strong>, а теперь наоборот. Располагается<strong>JSX</strong>в файлах с расширением<strong>.jsx</strong>и выглядит вот так:</p>
4
const text = 'a bit of text'; const page = ( <div className="page"> <h1 className="greeting">Hello, world!</h1> {text && <p>{text}</p>} <button onClick={() => alert('!')}>Click me</button> <Footer/> </div> );<h2>Это не обычный JavaScript</h2>
4
const text = 'a bit of text'; const page = ( <div className="page"> <h1 className="greeting">Hello, world!</h1> {text && <p>{text}</p>} <button onClick={() => alert('!')}>Click me</button> <Footer/> </div> );<h2>Это не обычный JavaScript</h2>
5
<p>Как несложно заметить - просто так этот код исполняться браузером не будет. Для преобразования<strong>JSX</strong>в<strong>JavaScript</strong>код требуются специальные утилиты - транспайлеры. В<strong>NodeJS</strong>-окружении традиционным является<strong>babel</strong>, а точнее<strong>babel-react-preset</strong>- целый набор плагинов, включая преобразующие<strong>JSX</strong>в<strong>React</strong>классы.</p>
5
<p>Как несложно заметить - просто так этот код исполняться браузером не будет. Для преобразования<strong>JSX</strong>в<strong>JavaScript</strong>код требуются специальные утилиты - транспайлеры. В<strong>NodeJS</strong>-окружении традиционным является<strong>babel</strong>, а точнее<strong>babel-react-preset</strong>- целый набор плагинов, включая преобразующие<strong>JSX</strong>в<strong>React</strong>классы.</p>
6
<p>В результате транспайлинга получится анaлогичный следующему<strong>JavaScript</strong>код:</p>
6
<p>В результате транспайлинга получится анaлогичный следующему<strong>JavaScript</strong>код:</p>
7
const text = 'a bit of text'; const page = React.createElement( 'div', { className: 'page' }, React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!' ), text && React.createElement( 'p', null, text ), React.createElement( 'button', { onClick: () => alert('!'); }, 'Click me' ) React.createElement( Footer, null, null ) );<h2>Имея перед глазами исходный код на<strong>JSX</strong>и результат транспайлинга, проанализируем</h2>
7
const text = 'a bit of text'; const page = React.createElement( 'div', { className: 'page' }, React.createElement( 'h1', { className: 'greeting' }, 'Hello, world!' ), text && React.createElement( 'p', null, text ), React.createElement( 'button', { onClick: () => alert('!'); }, 'Click me' ) React.createElement( Footer, null, null ) );<h2>Имея перед глазами исходный код на<strong>JSX</strong>и результат транспайлинга, проанализируем</h2>
8
<p>Любой тег имеет закрывающийся или является самозакрывающимся. В<strong>JSX</strong>нельзя написать тег < br >, только вот так: < br/ > (без пробелов, конечно).</p>
8
<p>Любой тег имеет закрывающийся или является самозакрывающимся. В<strong>JSX</strong>нельзя написать тег < br >, только вот так: < br/ > (без пробелов, конечно).</p>
9
<p>Все теги превратились в корректные JS-выражения - создание<strong>React</strong>-элементов. Атрибуты (<strong>className, onClick</strong>) теперь передаются в объекте в аргументе вызова функций (второй параметр).</p>
9
<p>Все теги превратились в корректные JS-выражения - создание<strong>React</strong>-элементов. Атрибуты (<strong>className, onClick</strong>) теперь передаются в объекте в аргументе вызова функций (второй параметр).</p>
10
<p>Дочерние элементы тоже передаются в аргументах при создании родительских элементов.</p>
10
<p>Дочерние элементы тоже передаются в аргументах при создании родительских элементов.</p>
11
<p>Вместо "<strong>class="page"</strong>" теперь пишется "<strong>className="page"</strong>", т.к.<strong>class</strong>- зарезервированное слово в современном JS.</p>
11
<p>Вместо "<strong>class="page"</strong>" теперь пишется "<strong>className="page"</strong>", т.к.<strong>class</strong>- зарезервированное слово в современном JS.</p>
12
<p>Текст внутри тегов пишется, как и в<strong>HTML</strong>, но если мы вдруг захотим написать какое-либо JS-выражение, будь это вызов функции или просто переменная, то нам необходимо интерполировать<strong>JavaScript</strong>обратно в<strong>JSX</strong>, и делается это вот так:<strong>< p >{text}< /p ></strong>(без пробелов).</p>
12
<p>Текст внутри тегов пишется, как и в<strong>HTML</strong>, но если мы вдруг захотим написать какое-либо JS-выражение, будь это вызов функции или просто переменная, то нам необходимо интерполировать<strong>JavaScript</strong>обратно в<strong>JSX</strong>, и делается это вот так:<strong>< p >{text}< /p ></strong>(без пробелов).</p>
13
<p>Несложно увидеть, что код<strong>JavaScript</strong>можно вставлять и в атрибуты тегов: < button onClick={() => alert('!')} > (без пробелов).</p>
13
<p>Несложно увидеть, что код<strong>JavaScript</strong>можно вставлять и в атрибуты тегов: < button onClick={() => alert('!')} > (без пробелов).</p>
14
<p>И т.к. теги в результате станут корректными JavaScript-выражениями, то можно использовать всю мощь JS.</p>
14
<p>И т.к. теги в результате станут корректными JavaScript-выражениями, то можно использовать всю мощь JS.</p>
15
<p>Например,<strong>{text && < p >{text}< /p >}</strong>(без пробелов) в точности означает, что если переменная<strong>text</strong>не будет<strong>falsy</strong>, то тогда в разметке будет участвовать тег<strong>< p ></strong>(без пробелов) со всем его содержимым.</p>
15
<p>Например,<strong>{text && < p >{text}< /p >}</strong>(без пробелов) в точности означает, что если переменная<strong>text</strong>не будет<strong>falsy</strong>, то тогда в разметке будет участвовать тег<strong>< p ></strong>(без пробелов) со всем его содержимым.</p>
16
<p>Ну и "вишенка": обратите внимание на тег<strong>< Footer/ ></strong>(без пробелов). Да, это нестандартный тег, это наш собственный компонент, который определён выше. И он, в свою очередь тоже содержит свою собственную разметку. И в этом вся мощь<strong>JSX</strong>!</p>
16
<p>Ну и "вишенка": обратите внимание на тег<strong>< Footer/ ></strong>(без пробелов). Да, это нестандартный тег, это наш собственный компонент, который определён выше. И он, в свою очередь тоже содержит свою собственную разметку. И в этом вся мощь<strong>JSX</strong>!</p>
17
<p>Имея в приложении определённый набор таких компонент, можно будет собирать страницы подобно конструктору! И это только основы JSX, дальше ещё интереснее.</p>
17
<p>Имея в приложении определённый набор таких компонент, можно будет собирать страницы подобно конструктору! И это только основы JSX, дальше ещё интереснее.</p>
18
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
18
<p><em>Есть вопрос? Напишите в комментариях!</em></p>
19
19