React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Но вместо использования обычного JavaScript код React следует писать на чем-то, что называется JSX.
Почему JSX —
Он быстрее, потому что выполняет оптимизацию при компиляции кода в JavaScript.
Он также является типобезопасным, и большинство ошибок можно обнаружить во время компиляции.
Это упрощает и ускоряет написание шаблонов, если вы знакомы с HTML.
Использование JSX —
Мы можем использовать обычные конструкции JavaScript в JSX.
Мы начнем с создания приложения Hello World. Для этого заменяем то, что есть, на следующее в index.js
:
импортировать React из react;
импортировать ReactDOM из react-dom;function App() {
return (
‹div›
‹h1›Hello World‹/h1›
‹/div›
);
}const rootElement = document.getElementById(root);
ReactDOM.render(‹App /›, rootElement);
В приведенном выше коде у нас есть компонент App
, который является просто функцией. Он возвращает:
‹div›
‹h1›Hello World‹/h1›
‹/div›
который является нашим кодом JSX для отображения Hello World. h1
— это заголовок, а div
— элемент div.
Приведенный выше код выглядит как HTML, но на самом деле это JSX.
Преимущества использования JSX —
- Это упрощает создание HTML-элементов в javascript.
- Это делает наш код намного читабельнее и проще.
- Это избавляет вас от необходимости думать об именах переменных для каждого узла DOM, который вы создаете.
- Более удобный для пользователя, каждый, вероятно, может понять и изменить код
- JSX компилируется в то, что вы бы написали в любом случае.
Поддержка Emmet для JSX в Visual Studio Code —
Emmet поставляется с VS Code по умолчанию. Это делает ввод HTML в файлах React (.js) намного быстрее и проще.
Нам нужно выполнить небольшой процесс в нашем VS Code, чтобы включить поддержку Emmet для JSX.
- Откройте любую исходную папку в VS Code и перейдите в «Настройки»:
На Mac: Command +,
В Windows: Ctrl +,
Это Command или Control с символом запятой. Просто во избежание путаницы.
2. Перейдите на вкладку Настройки рабочей области.
3. На левой боковой панели перейдите в раскрывающийся список Расширения и выберите Emmet.
4. Нажмите «Изменить в settings.json».
Небольшая ссылка в разделе "Исключить языки" на правой панели.
5. Добавьте следующие строки в открывшийся файл settings.json.
{
emmet.includeLanguages: {
javascript: javascriptreact
}
}
Так же, как следующее изображение —
6. Теперь Emmet должен быть включен в файлы .js!
УРА! Это сделано сейчас!
Изображение части Emmet JSX из: https://medium.com/@eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c
Я надеюсь, что вы нашли эту статью полезной, если вы поставили ей 👏, и поделитесь ею со своими друзьями и всеми, кто начинает с React.