Вы вероятно слышали о популярном JavaScript фреймворке от Facebook – React. Он используется на многих популярных веб-сайтах, в том числе в Facebook и Instagram. В этой статье вы увидите 5 практических примеров, построенных при помощи React, которые помогут вам начать работать с этим фреймворком.
Что особого в фреймворке React?
React построен на концепции компонентов. Он отличается от таких фреймворков, как Angular или Ember, которые используют двухстороннюю привязку данных для обновления HTML страницы. На мой взгляд, React проще для изучения, чем Angular или Ember – он намного меньше и хорошо работает с jQuery и другими фреймворками. Он, к тому же, чрезвычайно быстр, так как использует виртуальный DOM и обновляет только измененные части страницы (обращение к DOM до сих пор является, самой медленной частью современных веб-приложений, поэтому данный фреймворк и получает преимущество в производительности оптимизируя его).
Однако, обратная сторона монеты это то, что в React нужно немного больше кода для достижения вещей, которые могут быть запросто написаны при помощи привязки данных, в чем вы можете убедиться в примерах ниже. Например посмотрите нашу заметку об Angular’е.
React для НОВИЧКОВ [2023]: первый проект на React JS | Как запустить приложение на React?
Как его использовать?
Чтобы использовать React, вам нужно подключить единственный JavaScript файл. Facebook любезно предоставляет нам CDN, на который вы можете напрямую сослаться:
Это даст вам доступ к глобальному объекту React, который содержит множество полезных методов, некоторые из них вы можете видеть в наших примерах. Рекомендованный способ написания веб-приложений на React, это используя язык JSX. Это слегка измененная версия JavaScript, которая позволит вам писать React компоненты используя HTML-подобный синтаксис прямо в вашем коде. Этот код компилируется в JavaScript, перед тем как быть интерпретированным браузером. JSX совсем необязателен – вы можете использовать обычный JavaScript, если предпочитаете.
Но хватит трепаться, давайте увидим немного кода!
1. Таймер
Как я упоминал раньше, строительные блоки приложений react, это компоненты. Они создаются при помощи вызова React.createClass() передавая объект со свойствами и методами. Каждый компонент имеет состояние (объект с данными) и является ответственным за свое отображение – метод render() вызывается, когда изменяется состояние. Вот пример построения обычного таймера:
При инициализации компонента, вы можете передавать атрибуты любыми JavaScript выражениями, поместив их в скобки <>. В этом примере мы поставляем начальную дату, которая будет использована при каждом вызове функции tick() для расчета затраченных секунд.
2. Меню навигации
Давайте посмотрим, как мы можем обрабатывать событие клика в React — построим меню навигации:
Вы, вероятно, заметили в коде данного примера, что мы используем атрибуты, как className, которых, на самом деле не существует в HTML. Это из-за того, что когда мы возвращаем элемент , мы на самом деле не возвращаем HTML, а только объект компонента React.DOM.p . Вы можете узнать об этом больше по этой ссылке.
Разработай 6 проектов на ReactJS (для начинающих)
3. Мгновенный поиск
asamats/Used-ReactJS
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Cancel Create
- Local
- Codespaces
HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.
Sign In Required
<
h2>Избранные изображения>/h1> ); > >); // Отрисовываем компонент PictureList и добавлем его // в блоге div с . В примере используется // API ключ для тестового Instagram приложения. // Свой собственный ключ можно сгенерить в // http://instagram.com/developer/ ReactDOM.render( , document.getElementById(«sample») );
Обратите внимание: в нашем примере используется один и тот же компонент Picture для отображения списка со всеми изображениям и избранными. Такое неоднократное использование кода является одним из преимуществ React.
Результат работы нашего примера вы можете посмотреть на странице Работа с jQuery и AJAX вReact JS.
Что дальше?
Вы уже достаточно далеко продвинулись в изучении React и теперь можете приступать к созданию более сложных приложений. Для более лучшего усваивания материала, вы можете ознакомиться с уроками Интернет магазин на React.js и Flux и Изучаем React и Google maps.
Источник: websketches.ru