Rock Solid React.js Основы: Руководство для начинающих

1657486824 rock solid reactjs osnovy rukovodstvo dlya nachinayushhih

Раджат Саксен

1*wj5ujzj5wPQIKb0mIWLgNQ
Ускоренный курс React.js

Последние пару месяцев я работал с React и React-Native. Я уже выпустил две рабочие программы: Kiven Aa (React) и Pollen Chat (React Native). Когда я начал изучать React, я искал что-то (блог, видео, курс и т.д.), что не только научит меня писать программы в React. Я тоже хотел, чтобы он подготовил меня к собеседованиям.

Большинство нашедшего материала сосредоточено на том или ином. Следовательно, эта публикация направлена ​​на аудиторию, которая ищет идеальное сочетание теории и практической работы. Я дам вам немного теории, чтобы вы поняли, что происходит под капотом, а затем я покажу вам, как написать код React.js.

Если вы предпочитаете видео, я также имею весь этот курс на YouTube. Проверьте это.

Давайте погрузимся в…

React.js – это библиотека JavaScript для создания интерфейсов пользователя

Можно создавать любые одностраничные программы. Например, чат-мессенджеры и порталы электронной коммерции, где необходимо отображать изменения в пользовательском интерфейсе в реальном времени.

Все является составляющей

Приложение React состоит из компонентов, их много, вложенные друг в друга. «Но что такое компоненты?», Вы можете спросить.

Компонент – это кусок кода для многократного использования, определяющий, как определенные функции должны выглядеть и вести себя в пользовательском интерфейсе. К примеру, кнопка является компонентом.

Давайте посмотрим на следующий калькулятор, который вы видите в Google, когда пытаетесь вычислить что-то вроде 2+2 = 4 –1 = 3 (быстрая математика!)

1*NS9DykYDyYG7__UXJdysTA
Красные маркеры обозначают компоненты

Как вы можете видеть на картинке выше, калькулятор имеет много областей, например окно отображения результата и цифровая клавиатура. Все они могут являться отдельными компонентами или одним гигантским компонентом. Это зависит от того, насколько удобно разбивать и абстрагировать вещи в React

Вы пишете код для всех таких компонентов в отдельности. Затем объедините их в один контейнер, который, в свою очередь, является компонентом React. Таким образом, вы можете создавать повторно используемые компоненты, и ваша окончательная программа будет набором отдельных компонентов, работающих вместе.

Ниже приведен один из таких способов, как вы можете написать калькулятор, показанный выше, в React:

Да! Это выглядит как HTML код, но это не так. Мы рассмотрим это в следующих разделах.

Обустройство нашей игровой площадки

Этот учебник посвящен основам React. Он не ориентирован на React for Web или React Native (для создания мобильных приложений). Итак, мы будем использовать онлайн-редактор, чтобы избежать специфических веб-конфигураций или нативных конфигураций до того, как узнаем, что React может делать.

Я уже настроил среду на codepen.io. Просто перейдите по ссылке и прочтите все комментарии на вкладках HTML и JavaScript (JS).

Контрольные компоненты

Мы узнали, что программа React – это набор различных компонентов, структурированных как вложенное дерево. Таким образом, нам необходим какой-то механизм для передачи данных от одного компонента другому.

Введите «реквизит»

Мы можем передавать произвольные данные нашему компоненту с помощью a props объект. Каждый компонент в React получает это props объект.

Прежде чем научиться использовать это props объект, давайте узнаем о функциональных компонентах.

а) Функциональный компонент

Функциональный компонент React потребляет произвольные данные, которые вы передаете ему с помощью props объект. Он возвращает объект, описывающий, что UI React должен отобразить. Функциональные компоненты также известны как Компоненты без состояния.

Напишем наш первый функциональный компонент:

Это так просто. Мы только что прошли props как аргумент простой функции JavaScript и возвращается, ну что это было? что <div>{props.name}iv>дело! Это JSX (JavaScript Расширенный). Мы узнаем больше об этом в следующей главе.

Эта функция воспроизведет следующий HTML в браузере:

Прочтите раздел ниже о JSX, где я объясню, как мы получаем этот HTML из нашего кода JSX.

Как вы можете использовать этот функциональный компонент в приложении React? Рад, что спросил! Это так просто:

Атрибут name в приведенном выше коде становится props.name внутри нашего Hello компонент. Атрибут age становится props.age и так дальше.

Помните! Вы можете вложить один компонент React в другие компоненты React.

Давайте используем это Hello компонент на нашей игровой площадке Codepen. Замените divвнутри ReactDOM.render() с нашими Hello компонент, как показано ниже, и просмотрите изменения в нижнем окне.

Но что если ваш компонент имеет какое-то внутреннее состояние? Например, как следующий компонент счетчика, имеющего внутреннюю переменную счетчика, которая изменяется по нажатию клавиш + и —.

б) Классовый компонент

Компонент на основе класса обладает дополнительным свойством. state , который можно использовать для хранения персональных данных компонента. Мы можем переписать наш Hello компонент с использованием обозначения класса следующим образом. Поскольку эти компоненты имеют состояние, они также известны как Компоненты с сохранением состояния.

Расширяем React.Component класс библиотеки React для создания компонентов на основе класса React. Узнайте больше о классах JavaScript здесь.

The render() метод должен присутствовать в вашем классе, поскольку React ищет этот метод, чтобы знать, какой пользовательский интерфейс должен отобразить на экране.

Чтобы использовать этот тип внутреннего состояния, мы сначала должны инициализировать state объект в конструкторе класса компонентов, последующим образом.

Аналогично, props можно получить доступ внутри нашего компонента на основе класса с помощью this.props объект.

Чтобы установить состояние, вы используете React.Component‘s setState(). Мы увидим пример этого в последней части этого учебника.

Совет: Никогда не звони setState() внутри render() функция, как setState() вызывает повторный рендеринг компонента, что приведет к бесконечному циклу.

1*rPUhERO1Bnr5XdyzEwNOwg
Компонент на основе класса обладает необязательным свойством «состояние».

Отдельно от stateкомпонент на основе класса имеет некоторые методы жизненного цикла, например componentWillMount(). Вы можете использовать их для выполнения таких действий, как инициализация state и все кроме этого выходит за рамки этой публикации.

JSX

JSX является сокращенной формой JavaScript Extended и это способ писать React компоненты. Используя JSX, вы получаете полную мощность JavaScript в XML-подобных тэгах.

Вы вставляете внутрь выражения JavaScript {}. Ниже приведено несколько действительных примеров JSX.

Это работает так: вы пишете JSX, чтобы описать, как должен выглядеть ваш пользовательский интерфейс. Как транспиллер Babel преобразует этот код в группу React.createElement() звонки. Затем библиотека React использует их React.createElement() вызывает построение древовидной структуры из элементов DOM (в случае React for Web) или Native view (в случае React Native) и сохраняет ее в памяти.

Затем React вычисляет, как он может эффективно имитировать это дерево в памяти пользовательского интерфейса, отображаемого пользователю. Этот процесс известен как примирение. После этого вычисление React вносит изменения в фактический пользовательский интерфейс на экране.

1*ighKXxBnnSdDlaOr5-ZOPg
Как React превращает ваш JSX в дерево, описывающее интерфейс пользователя программы

Вы можете использовать онлайн-REPL Babel, чтобы увидеть, что действительно выводит React, когда вы пишете какой-то JSX.

1*NRuBKgzNh1nHwXn0JKHafg
Используйте Babel REPL, чтобы превратить JSX в обычный JavaScript

Поскольку JSX – это просто синтаксический сахар над простым React.createElement() вызовов, React можно использовать без JSX

Теперь у нас есть все концепции, поэтому у нас есть хорошие возможности для написания a counter компонент, который мы видели раньше как GIF.

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

Ниже приведены некоторые важные моменты приведенного выше кода.

  1. JSX использует camelCasing следовательно buttonатрибутом является onClickнет onclickкак мы используем в HTML.
  2. Привязка необходима для this работать над обратными вызовами. Смотрите строку №8 и 9 в выше коде.

Окончательный интерактивный код находится здесь.

На этом мы подошли к завершению нашего быстрого курса React. Надеюсь, я пролил немного света на то, как работает React и как вы можете использовать React для создания более крупных приложений, используя меньшие и многократно используемые компоненты.

Если у вас есть вопросы или сомнения, напишите мне на Twitter @rajat1saxena или напишите мне на rajat@raynstudios.com.

Пожалуйста, порекомендуйте эту публикацию, если она вам понравилась и поделитесь ею со своей сетью. Следите за мной, чтобы получить больше публикаций, связанных с техникой, и подумайте о подписке на мой канал Rayn Studios на YouTube. Большое спасибо.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *