Чем отличается jsx от html
Перейти к содержимому

Чем отличается jsx от html

  • автор:

JSX — подробности

React. Продвинутые руководства. Часть Первая

Этой публикацией я открываю серию переводов раздела «Продвинутые руководства» (Advanced Guides) официальной документации библиотеки React.js.

JSX — подробности

Фундаментально, JSX является синтаксическим сахаром для функции React.createElement(component, props, . children) .

> Click Me 
React.createElement( MyButton, , 'Click Me' )

Также можно использовать самозакрывающую форму для тегов, у которых нет потомков. Например:

React.createElement( 'div', , null )

Протестировать, как различные конструкции JSX компилируются в JavaScript, можно в онлайн компиляторе Babel

Спецификация типов элементов React

Начальная часть JSX тега определяет тип элемента React.

Типы, определенные с Прописной буквы, указывают на то, что тег ссылается на компонент React. Эти теги в процессе компиляции ссылаются на именованную переменную, содержащую компонент React. Поэтому, обратите внимание, — эта переменная должна находится в области видимости. Например: Если вы используете выражение JSX — , то переменная Foo должна находится в области видимости.

React должен находиться в области видимости

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

Например: обе строки import необходимы в данном коде, т.к. React и CustomButton не включены непосредственно в JavaScript:

import React from 'react'; import CustomButton from './CustomButton'; function WarningButton() < // return React.createElement(CustomButton, , null); return ; >

Если вы не используете какой-либо упаковщик JavaScript и добавляете React непосредственно в тег , то React всегда будет находиться в глобальной области видимости.

Использование нотации через точку в JSX типе

На компонент React можно ссылаться используя нотацию через точку в JSX. Это удобно, если у вас есть модуль, который экспортирует несколько компонентов React. Например, если MyComponents.DatePicker — это компонент, то вы можете использовать эту нотацию непосредственно в JSX:

import React from 'react'; const MyComponents = < DatePicker: function DatePicker(props) < return 
Imagine a datepicker here.
; > > function BlueDatePicker() < return ; >

Вновь определенные компоненты, не входящие в стандартную библиотеку React, должны именоваться с Прописной буквы

Если тип элемента именуется со строчной буквы, это означает, что элемент является встроенным компонентом таким как или и передается в виде строки ‘div’ или ‘span’ в функцию React.createElement . Типы, определенные с прописной буквы, такие как компилируются как React.createElement(Foo) и ссылаются на компонент, определенный или импортированный в вашем JavaScript файле.

Мы рекомендуем именовать компоненты с Прописной буквы. Если у вас есть компонент, именующийся со строчной буквы, перед использованием в JSX — присвойте его переменной именующейся с Прописной буквы.

Для примера, этот код не вернет то, что от него ожидается:

import React from 'react'; // Неправильно! Это компонент и должен именоваться с Прописной буквы: function hello(props) < // Правильно! Использование верно, т.к. div это существующий HTML тег: return Hello ; > function HelloWorld() < // Неправильно! React принимает за HTML тег, т.к. он начинается со строчной буквы: return ; >

Для исправления ошибки, мы переименуем hello в Hello и будем использовать в JSX:

import React from 'react'; // Правильно! Это компонент и именуется с Прописной буквы: function Hello(props) < // Правильно! Использование верно, т.к. div это существующий HTML тег: return Hello ; > function HelloWorld() < // Правильно! React знает, что это компонент, т.к. он именован с Прописной буквы: return ; >

Выбор типа во время выполнения

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

import React from 'react'; import < PhotoStory, VideoStory >from './stories'; const components = < photo: PhotoStory, video: VideoStory >; function Story(props) < // Неправильно! JSX тип не может быть выражением. return />; >

Для исправления ошибки, мы присвоили тип переменной, именуемой с Прописной буквы:

import React from 'react'; import < PhotoStory, VideoStory >from './stories'; const components = < photo: PhotoStory, video: VideoStory >; function Story(props) < // Правильно! JSX тип может быть переменной, именуемой с Прописной буквы. const SpecificStory = components[props.storyType]; return />; >

Свойства в JSX

Есть несколько различных путей для задания свойств в JSX.

JavaScript выражения

Вы можете разместить любое JavaScript выражение в свойстве, заключив его в фигурные скобки <> . Например:

Для компонента MyComponent значение props.foo будет 10 , т.к. выражение 1 + 2 + 3 + 4 вернет такой результат.

Инструкции if или циклы for не являются выражениями в JavaScript, поэтому они не могут использоваться непосредственно в JSX. Поэтому их необходимо использовать только в окружающем коде. Например:

function NumberDescriber(props) < let description; if (props.number % 2 == 0) < description = even; > else < description = odd; > return 
is an number
; >

Строковые литералы

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

При размещении строкового литерала — его значение будет HTML деэкранировано. Эти два JSX выражения эквивалентны:

Размещение строковых литералов непосредственно в свойствах обычно не используется и дано здесь только для полноты спецификации.

Свойства по умолчанию принимают значение «True»

Если вы укажете в компоненте JSX свойство и не укажете его значение, то значение свойства по умолчанию установится в true . Эти два JSX выражения эквивалентны:

Мы не рекомендуем использовать эту возможность, т.к. ее легко спутать с короткой нотацией объектов в ES6 Например: в ES6 — это короткая нотация записи , а не . Эта возможность добавлена только из-за ее присутствия в HTML.

Разворачивание атрибутов

Если у вас есть объект, содержащий свойства, и вы хотите передать его в JSX, вы можете использовать . в качестве «разворачивающего» (spread) оператора для передачи всех свойств, содержащихся в объекте. Эти два компонента эквивалентны:

function App1() < return ; > function App2() < const props = ; return />; >

Разворачивание атрибутов может быть полезно при реализации универсальных контейнеров. В то же время, разворачивание может сделать ваш код грязным, т.к. при разворачивании в компонент в качестве свойств передаются все свойства объекта, в том числе те, в которых компонент не нуждается и которые не обрабатывает. Мы рекомендуем использовать данный синтаксис осмотрительно.

Потомок (children) в JSX

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

Строковые литералы

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

Выглядит это так:

Hello world!

Это валидное JSX выражение — props.children компонента MyComponent установится равным строке «Hello world!» . Обратите внимание, что значение строкового литерала будет HTML деэкранировано при компиляции, поэтому в общем упрощенном случае вы можете писать свой JSX код также как вы пишете HTML:

Этот код содержит экранированный символ - &. Код валиден одновременно как в HTML так и в JSX.

JSX удаляет пробелы в начале и конце строки. Он также удаляет пустые строки. Переводы строк, примыкающие к тегам будут удалены. Переводы строк, находящиеся в середине строкового литерала и следующие один за другим преобразуются в один перевод строки. Таким образом, следующие примеры будут отображены одинаково:

Hello World
Hello World
Hello World
Hello World

JSX элемент

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

Вы можете смешивать любые типы потомков, будь то строки или JSX элементы. Это еще один вариант когда JSX может выглядеть также как HTML. Следующий пример валиден в JSX и HTML:

Компонент React не может возвращать несколько элементов React — иными словами: компонент React всегда должен иметь только один корневой элемент верхнего уровня. Одновременно с этим — одно JSX выражение может иметь неограниченное количество потомков. Таким образом, если у вас нет корневого элемента верхнего уровня — просто оберните свой набор элементов в элемент div , как в предыдущем примере.

JavaScript выражения

Вы можете использовать любое JavaScript выражение в качестве потомка, просто взяв его в фигурные скобки — <> . Например, следующие выражения эквивалентны:

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

JavaScript выражения могут совмещаться с другими типами потомков. Это удобно при отображении строковых шаблонов:

function Hello(props) < return 
Hello !
; >

Функции JavaScript

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

function ListOfTenThings() < return ( > 
This is item in the list
>
); > // Вызывает "потомка - функцию обратного вызова" numTimes раз для отображения повторяемого компонента function Repeat(props) < let items = []; for (let i = 0; i < props.numTimes; i++) < items.push(props.children(i)); >return
; >

В компонент в качестве потомка можно передавать что угодно. Главное — этот компонент должен преобразовать и вернуть к моменту отображения (рендеринга) то, что React знает как отобразить. Такое использование не является общепринятым, но оно прекрасно отображает то, на что способен React.

Булевые значения, Null и Undefined игнорируются

false , null , undefined и true можно использовать в качестве потомков. Но данные значения не отображаются при рендеринге. Следующие JSX выражения будут отображены одинаково:

Эта особенность совместно с особенностью обработки условных выражений в JavaScript может быть использована для условного отображения элементов React. Следующее JSX выражение отобразит если значение showHeader будет true :

Однако, есть нюанс, когда некоторые «falsy» значения, такие как число 0 , отображаются React. Например, следующий код не будет вести себя как ожидается, и в случае если props.messages будет содержать пустой массив — в результате рендеринга будет отображен 0 :

Для исправления ситуации, убедитесь, что выражение перед && всегда является булевым:

И наоборот, если вам необходимо отобразить false , true , null или undefined при рендеринге — сконвертируйте их в строку:

 
Значение переменной myVariable = .
  • PropTypes — проверка типов в React.
  • Ref-атрибуты и DOM в React.
  • Неконтролируемые компоненты в React.
  • Оптимизация производительности в React.

ReactJS для глупых людей

Пытаясь разобраться с библиотекой от Facebook ReactJS и продвигаемой той же компанией архитектурой «Flux», наткнулся на просторах интернета на две занимательные статьи: «ReactJS For Stupid People» и «Flux For Stupid People». Решил поделиться с хабравчанами переводом первой (а чуть позже и второй) статьи. Итак, поехали.

ReactJS для глупых людей

TL;DR В течении долгого времени я пытался понять, что такое React и как он вписывается в структуру приложения. Это статья, которой мне в свое время не хватало.

Что такое React?

Чем отличается React от Angular, Ember, Backbone и других? Как управлять данными? Как взаимодействовать с сервером? Что, черт возьми, такое JSX? Что такое «component»?

Остановитесь прямо сейчас.

React — это ТОЛЬКО УРОВЕНЬ ПРЕДСТАВЛЕНИЯ.

React часто упоминают в одном ряду с другими javascript фреймворками, но споры «React vs Angular» не имеют смысла, потому что это не сопоставимые вещи. Angular — это полноценный фреймворк (включающий и уровень представления). React — нет. Вот почему React вызывает столько непонимания в развивающемся мире полноценных фреймворков — это только представление.

React дает вам язык шаблонов и некоторые callback-функции для отрисовки HTML. Весь результат работы React — это HTML. Ваши связки HTML/JavaScript, называемые компонентами, занимаются тем, что хранят свое внутреннее состояние в памяти (например: какая закладка выбрана), но в итоге вам просто выплевывается HTML.

Разумеется, вы не можете построить полно функционирующее динамическое приложение только с React. Почему, мы рассмотрим позже.

Плюсы

После работы с React, я увидел три очень важных преимущества.

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

Скажем, вам нужно изменить заголовок вашего сайта на имя пользователя после логина. Если вы не используете какой-либо MVC фреймворк, вы можете сделать что-то вроде:

$.post('/login', credentials, function( user ) < // Modify the DOM here $('header .name').show().text( user.name ); >); 

По опыту могу сказать, что этот код испортит жизнь вам и вашим коллегам. Как производить отладку? Кто изменяет заголовок? Кто имеет доступ к заголовку? Кто определяет видимость? Манипуляция с DOM так же плоха, как оператор GOTO в логике вашей программы.

Вот как вы могли бы сделать это с React:

render: function() < return 
< this.state.name ?
this.state.name
: null >
; >

Мы можем тут же сказать, как компонент будет отрисован. Если вы знаете состояние — вы знаете результат отрисовки. Вам не нужно прослеживать ход выполнения программы. Когда разрабатывается сложное приложение, особенно в команде, это очень важно.

2. Связывание JavaScript и HTML в JSX делает компоненты простыми для понимания.
Странное сочетание HTML/JavaScript может вас смутить. Нас учили не вставлять JavaScript в DOM (например: обработчики OnClick), еще в то время, когда мы были «крошечными» разработчиками (ор: since we were wee developers). Но вы можете мне верить, работать с JSX компонентами это на самом деле замечательно.

Обычно вы разделяете представления (HTML) и функциональность (JavsScript). Это приводит к монолитному JavaScript файлу, содержащему всю функциональность для одной страницы, и вы должны следить за сложным потоком JS->HTML->JS->неприятная ситуация.

Связывание функциональности напрямую с разметкой и упаковка этого в портативный, автономный «компонент», сделает вас счастливее, а ваш код в целом лучше. Ваш Javasacript «хорошо знаком» с вашим HTML, так что смешивать их имеет смысл.

3. Вы можете рендерить React на сервере.
Если вы разрабатывает публичный сайт или приложение, и вы рендерите все на клиенте, то вы выбрали неправильный путь. Клиентский рендеринг — это причина, почему SoundCloud работает медленно, и почему Stack Overflow (используя только серверный рендеринг) работает так быстро. Вы можете рендерить React на сервере, и вы должны этого делать.

Angular и другие поощряют использование PhantomJS для рендеринга страницы и предоставления ее поисковым движкам (основываясь на user-агенте) или использование платных сервисов. ТЬФУ!

Минусы

Не забывайте, что React — это только представление.

  1. Систему событий (отличную от нативных DOM событий);
  2. Работу с AJAX;
  3. Какой либо слой данных;
  4. Promises;
  5. Фреймворк на все случаи жизни;
  6. Какие либо мысли о том, как реализовать все вышеуказанное.

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

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

image

Здесь три отдельных, конкурирующие туториала для начинающих. Это удивляет. Боковая панель ниже, словно из моих ночных кошмаров, с разделами, которые точно не должны быть здесь, такие как «More About Refs» и «PureRenderMixin» (прим. переводчика: плагин для React).

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

image

35 KB gzipped
Это без библиотеки в reacat-with-addons, которая будет вам нужна для разработки реального приложения!
Это без библиотеки ES5-shim, необходимой для поддержки IE8!
Это без какой-либо другой библиотеки!

По размеру React сравним с Angular, хотя Angular — это полноценный фреймворк. React, откровенно говоря, жирный, для такой маленькой функциональности. Будем надеяться, что в будущем это поправят.

Хватит говорить «FLUX»

Пожалуй, самая раздражающая часть при разработке на React — это «Flux». Запутывающий еще больше, чем React. Раздутое понятие «Flux» сильно мешает пониманию. Нет такой вещи, как Flux. Flux — это концепция, но не библиотека. Окей, есть Flux библиотека с чем-то вроде:

Flux скорее паттерн, чем фреймворк

Тьфу. Хуже всего то, что React не переосмысляет последние 40 лет знаний в области UI-архитектуры и не придумывает какой-то новой концепции управления данными.

Концепция Flux проста: ваше представление вызывает событие (например: пользователь вводит имя в текстовое поле), событие изменяет модель, затем модель вызывает событие, представление реагирует на событие модели и перерисовывается с новыми данными. Вот и все.

Однонаправленный поток данных и шаблон проектирования «наблюдатель» гарантирует, что ваши хранилища/модели, всегда находится в актуальном состоянии. Это полезно.

Плохой стороной Flux является то, что каждый заново изобретает его. Так и нет договоренности о библиотеки событий, слое модели, AJAX слое и остального, есть много разных реализаций «Flux» и все они конкурируют между собой.

Должен ли я использовать React?

Короткий ответ: да.

Развернутый ответ: к сожалению, да, для многих вещей.

  • Отлично подходит для командной разработки, строгое соблюдение UI, и шаблона рабочего процесса;
  • UI код читабельный и прост в сопровождении;
  • Разработка UI на основе отдельных компонентов — это будущее web-разработки и вы должны начать делать это уже сейчас.
  • На начальном этапе React замедляет работу. Понять, как работают props, state и как взаимодействуют компоненты непросто, а документация — это «лабиринт из информации». В теории это может быть решено быстро, если над этим будет работать целая команда;
  • React не поддерживает браузеры от IE8 и младше, и никогда не будет;
  • Если ваше приложение/веб-сайт не насыщены большим кол-вом динамических страниц, вам придется писать очень много кода, решая маленькие задачи;
  • Вы будете заново изобретать велосипеды. React молод, поэтому нет выработанных практик. Вашему приложению нужен дропдаун, ресайз окна или лайтбокс? Вам придется писать все это с нуля.

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

HTML vs JSX – What’s the Difference?

Kolade Chris

Kolade Chris

HTML vs JSX – What's the Difference?

HTML vs JSX

Hypertext Markup Language (HTML) is the standard language for documents that determine the structure of a web page.

HTML is a very important language in web development. Your code is either in HTML originally or compiles to it so browsers can read it.

JSX, on the other hand, means JavaScript Syntax Extension or JavaScript XML as some like to put it.

It was created as a syntactic sugar for React.createElement() . It is an extension of JavaScript that allows developers to write HTML right within JavaScript. So when you’re writing JSX, technically you’re writing JavaScript and HTML together.

Also, that means JavaScript’s reserved keywords must be kept intact. And that is why the “for” attribute in HTML is “HTMLFor” in JSX, since «for» is one of the commonest JavaScript reserved keywords.

In terms of support by browsers, HTML is supported by all of them. JSX, on the other hand, was never really intended to be, so you need a compiler like Babel or Webpack to transpile JSX into the JavaScript that browsers understand.

The Main Differences Between HTML and JSX

You need to return a single parent element in JSX

One of the major differences between HTML and JSX is that in JSX, you must return a single parent element, or it won’t compile.

A lot of devs use

.

, but a better one that many people use is “fragment”, <>. which makes the code more readable.

In HTML, you are free to do whatever you want as you don’t have to return a single parent element.

jsx1

Here you can see that JSX is not compiling because there’s no parent element.

jsx2

And here JSX is compiling because there is a parent element (fragment).

You can implement JS directly in JSX

In JSX, it is possible to write JavaScript directly. You can do this by putting the JavaScript in curly braces <. >. Whereas in HTML, you need a script tag or an external JavaScript file to implement JavaScript:

const Article = () => < return ( <> 

Hi campers

How's coding going

What is up?



is seven in word
); >; export default Article;

All Tags Self-close in JSX

Tags can self-close in JSX. That is, it is possible to have as and as . You don’t want to do that, but its possible.

Self-closing tags in HTML can self-close without the slash before the right angle bracket, that is
could work as
. But in JSX, you need to include the slash. This should bring something to mind – JSX heavily relies on HTML 4 syntax.

jsx3

Here you can see that JSX is not compiling because there’s no forward slash before the right angle bracket of the line break tag.

jsx4

And here you can see that JSX is compiling because there is a forward slash in the line break tag.

ClassName and HTMLFor, not class and for in JSX

To define class names and for attributes in JSX, you don’t do it as class or for , since both are reserved keywords in JavaScript.

You actually create class components with the class keyword. So, to define class names in JSX, you do it as » className » and for attributes for labels you write » HTMLFor «:

const Article = () => < return ( <> 

Hi campers

How's coding going

What is up?



is seven in word
); >; export default Article;

Write all HTML Attributes in camelCase in JSX

You need to write all HTML attributes and event references in camelCase while writing JSX. So, onclick becomes onClick , onmouseover becomes onMouseOver , and so on:

const Article = () => < const sayHI = () =>< alert("Hi Campers"); >; return ( <> 

Hi campers

How's coding going

What is up?



is seven in word
); >; export default Article;

Write Inline Styles as Objects in JSX

And lastly, to define inline styles for JSX, you write it as an object, with the properties in camelCase, the values in quotes, and then you pass it inline to the JSX.

This means you have to open up a style attribute and use curly braces instead of quotes. This is opposed to HTML where you’re free to define millions of styles right inside the opening tag without writing them as objects and putting them in quotes:

const Article = () => < const inlineStyle = < color: "#2ecc71", fontSize: "26px", >; return ( <> 

>Hi campers

How's coding going

What is up?



is seven in word
); >; export default Article;

You can choose to write the object directly in the style attribute – that is, by opening up two curly braces and putting the properties and values inside.

But a cleaner way is to define the object outside of the JSX, and then pass it into the opening tag.

const Article = () => < return ( <> 

>>Hi campers

How's coding going

What is up?



is seven in word
); >; export default Article;

Note that you should not use inline styling in plain HTML – you don’t want to ruin your website’s SEO.

That’s it!

Thank you for reading. To connect with me, checkout my portfolio, or follow me on Twitter, where I spend most of my time tweeting and engaging in anything web development.

Введение в JSX (Introducing JSX)

Рассмотрим эту переменную декларацию (в оригинале: variable declaration):

const element = h1>Hello, world!/h1>; 

Этот забавный синтаксис записи тегов не является ни строкой, ни HTML .

Он называется JSX, и является синтаксическим расширением JavaScript. Мы (тут и далее авторы Quick Start) рекомендуем использовать его для описания того, как будет выглядеть пользовательский интерфей (UI). JSX может напомнить вам язык шаблонов, но он использует все возможности JavaScript.

JSX производит React «‘элементы». Мы посмотрим отрисовку в DOM в следующей секции next section. Ниже, вы можете найти наобходимую основу для старта работы с JSX .

Встраиваемые выражения в JSX

Вы можете поместить/встроить любое JavaScript выражение в JSX обернув его в фигурные скобки.

Например, 2 + 2 , user.name , и formatName(user) являются валидными выражениями:

function formatName(user)  return user.firstName + ' ' + user.lastName; > const user =  firstName: 'Harper', lastName: 'Perez' >; const element = ( h1> Hello, formatName(user)>!  /h1> ); ReactDOM.render( element, document.getElementById('root') ); 

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

JSX это выражение Too (JSX is an Expression)

После компиляции, JSX выражения становятся постоянными объектами JavaScript.

Это означает, что вы можете использовать JSX внутри выражения if и внутри циклов, присвоить его переменным, принять его в качестве аргумента, и вернуть его из функций:

function getGreeting(user)  if (user)   return h1>Hello, formatName(user)>!/h1>;  > return h1>Hello, Stranger./h1>; > 

Определение атрибутов с JSX

Вы можете использовать кавычки для определения строковых литералов как атрибутов:

const element = div tabIndex="0">/div>; 

Вы можете также использовать угловые скобки для размещения JavaScript-выражения в атрибуте:

const element = img src=user.avatarUrl>>/img>; 

Указание дочерних элементов с JSX

Если тег является пустым, вы можете закрыть его с /> , подобно XML:

const element = img src=user.avatarUrl> />; 

JSX теги могут содержать дочерние элементы:

const element = ( div> h1>Hello!/h1> h2>Good to see you here./h2> /div> ); 

Внимание:

Так как JSX ближе к JavaScript, чем HTML, React DOM использует CamelCase-стиль именования свойств в отличие от HTML имен атрибутов.

Например, класс становится className в JSX и TabIndex становится tabIndex .

JSX предотвращение атаки инъекцией

Для безопасной вставки пользовательского ввода в JSX:

const title = response.potentiallyMaliciousInput; // This is safe: const element = h1>title>/h1>; 

По умолчанию, React DOM экранирует любые величины, помещаемые в JSX перед их отрисовкой. Таким образом, это гарантия того, что мы не получим ничего взятого вне приложения. Все преобразуется в строку, перед отрисовкой (rendered). Это помогает предотвратить XSS-атаки (межсайтовый скриптинг).

JSX представление объектов

Babel компилирует JSX в вызовах React.createElement() .

Следующие два пример идентичны:

const element = ( h1 className="greeting"> Hello, world! /h1> ); 
const element = React.createElement( 'h1', className: 'greeting'>, 'Hello, world!' ); 

React.createElement() выполняет несколько проверок, чтобы помочь вам писать безошибочный код, но по существу он создает объект, как:

// Note: this structure is simplified const element =  type: 'h1', props:  className: 'greeting', children: 'Hello, world' > >; 

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

Мы будем изучать отрисовку/рендеринг React элементов в DOM в следующем разделе.

Подсказка:

Мы рекомендуем выполнить поиск для «Babel» схемы синтаксиса для выбранного редактора, чтобы и ES6, и JSX код правильно подсвечивался/выделялся

Быстрый старт в React.js

  • React — JavaScript библиотека
  • Установка React
  • Привет, Мир (React Hello World)
  • Введение в JSX (Introducing JSX)
  • Отрисовка React элементов (Rendering Elements)
  • Компоненты React и свойства (Components and Props)
  • Состояния и жизненный цикл (State and Lifecycle)
  • Обработка событий (Handling Events)
  • Условная отрисовка (Conditional Rendering)
  • Списки и ключи (Lists and Keys)
  • React и формы (Forms)
  • Всплытие состояния (Lifting State Up)
  • Композиция или Наследование
  • Думать на React

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *