Автор оригинала: FreeCodeCamp Community Member.
Rajat Saxena
Я работал с реагированными и реагированными в течение последних нескольких месяцев. Я уже выпустил два приложения в производстве, Кивена А.А. (Реагировать) и Plielen Chat (Реагировать на родной). Когда я начал изучать реагирование, я искал что-то (блог, видео, курс, что угодно), которое не только научило меня, как писать приложения в реакции. Я также хотел, чтобы это подготовить меня к интервью.
Большинство материалов, которое я нашел, концентрировал на одном или другом. Таким образом, этот пост направлен на сторону аудитории, который ищет идеальную смесь теории и практически. Я дам вам немного теории, чтобы вы понимаете, что происходит под капотом И тогда я покажу вам, как написать какой-нибудь код Regive.js.
Если вы предпочитаете видео, у меня также есть весь этот курс на YouTube. Пожалуйста, проверьте это.
Давайте погрузимся в …
React.js – это библиотека JavaScript для постройки пользователя интерфейсы
Вы можете строить всевозможные приложения для одной страницы. Например, Chat Messengers и порталы электронной коммерции, где вы хотите показать изменения в пользовательском интерфейсе в режиме реального времени.
Все компоненту
Приложение React состоит из компонентов, Много из них вложенный друг в друга. ” Но что такое компоненты? «Вы можете спросить.
Компонент представляет собой многоразовый кусок кода, который определяет, как должны выглядеть определенные функции и вести себя на UI. Например, кнопка – это компонент.
Давайте посмотрим на следующий калькулятор, который вы видите в Google, когда вы пытаетесь рассчитать что-то вроде (Quick Maths!)
Как вы можете видеть на изображении выше, калькулятор имеет много областей – как Окно дисплея результата и numpad Отказ Все это могут быть отдельными компонентами или одним гигантским компонентом. Это зависит от того, насколько удобно разбивать и рассуждать вещи в реакции
Вы пишете код для всех таких компонентов отдельно. Затем комбинируйте те, которые под одним контейнером, который, в свою очередь, является сама реактивный компонент. Таким образом, вы можете создавать многоразовые компоненты, и ваше окончательное приложение станет коллекцией отдельных компонентов, работающих вместе.
Ниже приведен один такой способ написать калькулятор, показанный выше, в реакции:
Да! Это похоже на HTML-код, но это не так. Мы рассмотрим больше об этом в более поздних разделах.
Настройка нашей детской площадки
В этом руководстве ориентированы на основные основы реагирования. Это не в основном ориентировано на реакцию на веб или Реагировать родной (для строительства мобильных приложений). Итак, мы будем использовать онлайн-редактор, чтобы избежать веб-конфигураций Web или NATY, прежде чем даже изучать, что реагировать.
Я уже настроил для вас окружающую среду на codepen.io Отказ Просто следуйте ссылке и прочитайте все комментарии в вкладках HTML и JavaScript (JS).
Управляющие компоненты
Мы узнали, что приложение raction представляет собой коллекцию различных компонентов, структурированных в виде вложенного дерева. Таким образом, нам требуется какой-то механизм для передачи данных из одного компонента к другому.
Введите “реквизит”
Мы можем пройти произвольные данные нашему компоненту, используя реквизит объект. Каждый компонент в реакции получает этот реквизит объект.
Прежде чем узнать, как использовать это реквизит Объект, давайте узнаем о функциональных компонентах.
а) Функциональный компонент
Функциональный компонент в реакции потребляет произвольные данные, которые вы проходите к нему, используя реквизит объект. Он возвращает объект, который описывает, что реагирование пользовательского интерфейса должна рендер. Функциональные компоненты также известны как Стационарные компоненты.
Давайте напишем наш первый функциональный компонент:
Это так просто. Мы только что прошли реквизит В качестве аргумента для простой функции JavaScript и возвращена, Умм, ну что это было? Что
Эта вышестоящая функция сделает следующий HTML в браузере:
Прочитайте раздел ниже о JSX, где у меня есть пояс внимание, мы получаем этот HTML из нашего кода JSX.
Как вы можете использовать этот функциональный компонент в вашем приложении React? Рад, что вы спросили! Это так же просто, как следующее:
Атрибут Имя В вышеуказанном коде становится ropps.name. внутри нашего Привет составная часть. Атрибут возраст становится Пророчество и так далее.
Помнить! Вы можете гнездиться одним из реагированных компонентов внутри других компонентов реагирования.
Давайте использовать это Привет Компонент на нашей детской площадке. Заменить Div внутри Reactom.runder () С нашей Привет Компонент, следующим образом, и смотрите изменения в нижнем окне.
Но что, если у вашего компонента есть внутреннее государство? Например, как следующий счетчик счетчиков, который имеет внутреннюю переменную подсчета, которая меняется на + и – ключевые прессы.
b) Компонент на основе класса
Компонент на основе класса имеет дополнительную недвижимость Государство , который вы можете использовать для проведения частных данных компонента. Мы можем переписать наши Привет Компонент, использующий классную запись следующим образом. Поскольку эти компоненты имеют состояние, они также известны как Учетные компоненты Отказ
Мы продлим Реагировать. Компонент Класс библиотеки RACT, чтобы сделать классовые компоненты в реакции. Узнайте больше о JavaScript Classe здесь Отказ
Render () Метод Должен Присутствовать в вашем классе, так как Reacts ищет этот метод, чтобы узнать, что он должен представлять на экране.
Чтобы использовать это внутреннее состояние, мы сначала должны инициализировать Государство объект в конструкторе класса компонентов следующим образом.
Точно так же реквизит Доступ к доступу внутри нашего классового компонента, используя Это .props объект.
Чтобы установить состояние, вы используете Реагировать. Компонент ‘s setState () Отказ Мы увидим пример этого в последней части этого учебника.
Совет: Никогда не звоните setState () внутри Render () Функция, как setState () вызывает компонент для повторного визуализации, и это приведет к бесконечной петле.
Кроме Государство Компонент на основе классом имеет некоторые методы жизненного цикла, такие как ComponentWillMount (). Эти вы можете использовать, чтобы делать вещи, как инициализация Государство и все Но это не имеет возможности этого поста.
Jsx.
JSX – это короткая форма Продлен JavaScript И это способ написать Реагировать компоненты. Используя JSX, вы получаете полную мощность JavaScript внутри XML, как теги.
Вы поместите выражения JavaScript внутри {} Отказ Ниже приведены некоторые действительные примеры JSX.
Как работает, вы пишете JSX, чтобы описать, как ваш пользователь должен выглядеть. А транспортер как Бабел Преобразует этот код в кучу Rect.Createelement () звонки. Затем библиотека RACT использует эти Rect.Createelement () Вызовы, чтобы построить деревообразную структуру элементов DOM (в случае реагирования на веб) или родных представлений (в случае реагирования на родной) и сохраняет его в памяти.
Затем отреагируйте, как он может эффективно подражать этому дереву в памяти интерфейса пользователя, отображаемого пользователю. Этот процесс известен как Примирение Отказ После этого расчет сделан, отреагируйте изменения в реальном пользовательском интерфейсе на экране.
Вы можете использовать Babel’s Online Reploy Чтобы посмотреть, что реагируют на самом деле выходы, когда вы пишете несколько JSX.
Поскольку JSX – это просто синтаксический сахар на простых реагистрационных сигналов. Соглашения () вызовы, реагирование можно использовать без JSX
Теперь у нас есть каждая концепция на месте, поэтому мы хорошо позиционируемся, чтобы написать счетчик Компонент, который мы видели ранее как ГИФ.
Код выглядит следующим образом, и я надеюсь, что вы уже знаете, как сделать это на нашей детской площадке.
Ниже приведены некоторые основные моменты по поводу вышеуказанного кода.
- JSX использует
Camelcasingследовательнокнопкаатрибут этоOnClick, неOnClick, как мы используем в HTML. - Привязка необходима для
этоработать на обратных вызовах. См. Линия № 8 и 9 в коде выше.
Окончательный интерактивный код расположен здесь Отказ
С этим мы достигли завершения нашего курса React Crash. Я надеюсь, что я пролил свет на то, как React работает и как вы можете использовать RACT, чтобы построить более крупные приложения, используя меньшие и многоразовые компоненты.
Если у вас есть какие-либо вопросы или сомнения, нажмите меня в Twitter @ rajat1saxena. или напишите мне в rajat@raynstudios.com. .
Пожалуйста, порекомендуйте этот пост, если вам понравилось, и поделитесь его с вашей сетью. Следуйте за мной для получения более технических сообщений и рассмотрите возможность подписки на мой канал Rayn Studios на ютубе. Большое спасибо.
Оригинал: “https://www.freecodecamp.org/news/rock-solid-react-js-foundations-a-beginners-guide-c45c93f5a923/”