#3 – Знайомство з JSX у React JS

Корисні посилання:

• Офіційний сайт Node JS;
• Документація зі встановлення React через NPM.

Що таке JSX?

JSX розшифровується як JavaScript XML. JSX —  це розширення для мови JavaScript. За допомогою JSX ви можете описувати HTML-код усередині JavaScript-файлів без будь-яких проблем.

Якби не JSX, то опис кожного тегу був би доволі довгим. Потрібно було б створити об'єкт, додати до нього атрибути та можливі стилі. Приклад без JSX:

const root = ReactDOM.createRoot(document.getElementById("app"));

root.render(
	React.createElement('input', {
		placeholder: 'Some text',
		defaultValue: 'some'
	})
);

Такий самий фрагмент коду за допомогою JSX виглядає значно простіше та зрозуміліше:

const root = ReactDOM.createRoot(document.getElementById("app"));

root.render(
	<input placeholder='Some text' defaultValue='some' />
);