Latest web development tutorials

Реагировать JSX

Реагировать заменить традиционное использование JSX JavaScript.

JSX выглядит как XML является расширением синтаксиса JavaScript.

Мы не обязательно использовать JSX, но он имеет следующие преимущества:

  • JSX выполняется быстрее, потому что он компилируется в код JavaScript после оптимизации.
  • Это типобезопасным, он может быть найден во время ошибок компиляции.
  • Используйте шаблон авторинга JSX проще и быстрее.

Использование JSX

JSX похож на HTML, мы можем посмотреть на примеры: 

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

Мы можем быть вложены в выше нескольких HTML - теги кода, вам нужно использовать Div элемент , окружающий его, экземпляры р элемент добавляет пользовательский атрибутданных-myattribute, добавить пользовательские атрибуты должны использовать префикс данные-.

ReactDOM.render(
	<div>
	<h1>本教程</h1>
	<h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
	,
	document.getElementById('example')
);

Попробуйте »

Независимый файл

Ваш код Реагировать JSX может быть размещен на отдельном документе, например, мы создаем helloworld_react.js файл, следующим образом : 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Затем вводится в файл JS в HTML-файле: 

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

Попробуйте »

выражение JavaScript

Мы можем использовать выражения JavaScript в JSX. Написать выражение в фигурные скобки{}.Примерами могут служить следующие: 

ReactDOM.render(
	<div>
	  <h1>{1+1}</h1>
	</div>
	,
	document.getElementById('example')
);

Попробуйте »

Вы не можете использовать ,если в другом местевысказывания JSX, одно может использоватьусловноевыражение(тернарный оператор)вместо этого. В следующем примере, если переменнаяя равен 1браузера выход будетправда,если вы измените значение I, он будет выдаватьложные.

ReactDOM.render(
	<div>
	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
	</div>
	,
	document.getElementById('example')
);

Попробуйте »

стиль

Реагировать рекомендуется использовать встроенные стили. Мы можем использовать синтаксисCamelCase для установки встроенных стилей. React добавляет точекавтоматически после определенного количества элементов. Следующий пример иллюстрирует добавлениеMyStyle встроенный стиль для элементов h1:

var myStyle = {
	fontSize: 100,
	color: '#FF0000'
};
ReactDOM.render(
	<h1 style = {myStyle}>本教程</h1>,
	document.getElementById('example')
);

Попробуйте »

примечание

Примечание нужно писать в фигурных скобках, примеры являются следующие: 

ReactDOM.render(
	<div>
    <h1>本教程</h1>
    {/*注释...*/}
 	</div>,
	document.getElementById('example')
);

Попробуйте »

массив

JSX позволяет вставлять в массиве шаблонов, массив будет автоматически расширяться для всех участников: 

var arr = [
  <h1>本教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

Попробуйте »

HTML-теги против Реагировать сборки

Реагировать может сделать HTML-теги (строки) или Реагировать компоненты (классы).

Для визуализации HTML-теги, просто использовать имя тега строчными буквами в JSX. 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

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

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

Отреагирует JSX использовать верхние и нижние условные тематические различать классы местных компонентов и HTML-тегов.

Примечание:

Поскольку JSX является JavaScript, ряд идентификаторов , таких как class , и for не рекомендуется в качестве имени атрибута XML. В качестве альтернативы Реагировать DOM использовать className и htmlFor сделать соответствующее свойство.