Автор оригинала: Reed Barger.
HTML – это язык Интернета, но создание целых веб-сайтов с помощью HTML можно повторить и трудно управлять.
В этой статье мы увидим, как использовать учетную запись библиотеки JavaScript реагируют как способ добавить удобство и повторное использование нашим веб-сайтам.
React – это мощный инструмент для любого разработчика, который знает HTML и хочет построить более организованные и динамические веб-сайты, быстрее.
Давайте начнем!
Почему я должен использовать реагирование вместо HTML?
Реакция прибыла в 2013 году как лучший способ создания веб-приложений с JavaScript. Это часто упоминается как библиотека для строительства UIS, коротким для «пользовательских интерфейсов».
Что делает реагировать такую желаемую библиотеку, чтобы узнать, что Это не заменяет HTML.
Он использует преимущество популярности и силы HTML, как самый популярный язык программирования, позволяя вам использовать очень похожий синтаксис для HTML для создания интерфейсов и добавлять динамические функции для него с помощью JavaScript.
Как построить пользовательский интерфейс с HTML
В свете универсальности реагирования мы можем воссоздать любой сайт или пользовательский интерфейс, который мы видим в Интернете.
Для этого урок давайте переместим часть приложения, которое вы, вероятно, используете каждый день Google Search.
Это может показаться амбициозным, если вы совершенно новое для реагирования, но требуется знание только двух простых концепций: HTML и основных функций JavaScript.
Что такое способ построить пользовательский интерфейс, не зная реагировать или даже JavaScript?
Используя HTML-элементы как часть простого HTML-документа.
Вот как мы покажем первые три результата, которые придумывают, когда вы ищете «реагировать» в Google.
reactjs Search Results
React - A JavaScript Library for Building User Interfaces
reactjs.org
React makes it painless to create interactive UIs.
React (web framework) - Wikipedia
https://en.wikipedia.org › wiki › React_(web_framework)
React is a JavaScript library for building user interfaces.
Использование только статического HTML было бы хорошо, если нам нужно только показать несколько ссылок.
Но как мы можем отобразить 100s или 1000-х ссылок таким образом, все с разными данными, в качестве поисковой системы может потребоваться?
Что лучше, то есть проще и более расширяемый способ написания этого?
Единственный HTML не будет ответом. Нам понадобится способ сделать наш сайт более динамичным для отображения как можно больше ссылок, сколько нам нужно.
Когда дело доходит до добавления поведения на сайт, нам нужно JavaScript. И поскольку наша цель – строить отличные приложения с JavaScript, мы знаем, что используют реагирование.
Как обновить все HTML-сайт в App App
Давайте превратим наш статический HTML в динамическое реагирование.
Звучит сложно? Это проще, чем вы думаете.
Мы можем создать приложение React из одного HTML-документа. Все, что нам нужно сделать, это привести реагировать на следующие внешние сценарии. *
Первый – для создания нашего приложения React App, а второе предназначено для отображения или отображения приложения RACT в браузере.
Первый – Реагировать , второй Реагировать Отказ
Третий скрипт – принести инструмент под названием Бабел Отказ Мы прикоснемся к тому, что это делает немного.
Вот что выглядит наш код в этот момент:
reactjs Search Results
… и это почти реактивный приложение.
Обратите внимание, что у нас есть сценарий, в котором мы можем написать наш React Code, но без HTML.
Давайте исправить это.
Как создавать и сделать наше приложение React
Каждое приложение raction должно иметь то, что известно как точка входа.
Точка входа Это элемент HTML, в котором мы вставляем наше приложение React на страницу.
Традиционная точка входа – это div с идентификатором корня (
Мы добавим это, затем используйте Render () Функция от реагирования для выполнения работы оказания приложения.
Первое – это приложение, которое означает наш HTML от ранее, а второй должен ссылаться на нашу точку входа. Мы можем создать эту ссылку, говоря Документ. GTELEMENTYBYID («root») Отказ
Итак, теперь у нас есть все, что нам нужно, чтобы запустить свое приложение React:
reactjs Search Results
И если мы посмотрим на наш результат, это работает как раньше. Идеально!
Теперь давайте будем использовать Реагирование на наш сайт, динамически отображаем наши ссылки.
Как сделать HTML многоразовый с помощью компонентов React
Если мы рассмотрим нашу HTML-структуру, каждая ссылка состоит из тех же деталей. У каждого есть URL, заголовок, более короткий URL и выдержка. Для каждой ссылки мы должны повторять одни и те же элементы HTML снова и снова.
В программировании, если вам нужно многое повторить себе, это, вероятно, признак того, что ваш код может быть упрощен и в некотором роде укорочена. Как программисты, мы всегда стремимся повторить себя как можно меньше.
Мы пытаемся написать код, который сухой, где вы «не повторяете себя».
Реагируйте, в Core, JavaScript Plus некоторые функции, которые помогут нам создавать приложения.
А поскольку мы работаем с JavaScript, что такое функция JavaScript, которая позволяет нам создавать или выводить что-то столько раз, сколько нам нравится?
Функция.
Давайте создадим один здесь, и мы назовем его ссылку.
function Link() {
// create link HTML output
}
Причина в том, что мы хотим, чтобы эта функция вернулась или выводила HTML ссылки каждый раз, когда мы его называем.
Чтобы это сделать, давайте вернем нашу первую ссылку HTML:
function Link() {
return (
React - A JavaScript Library for Building User Interfaces
reactjs.org
React makes it painless to create interactive UIs.
);
}
Итак, теперь давайте использовать его для отображения каждую ссылку, которая возвращается.
Сделать это, вместо того, чтобы звонить в это как Ссылка () В реакции мы можем написать так, как будто это был элемент HTML Отказ
Если вы видели это в первый раз, он может немного согнуть свой мозг.
Здесь мы используем синтаксис HTML, но мы называем функцию JavaScript! Вам будет комфортно с этим, как вы видите это чаще.
(Кроме того, вы заметили, что нам не нужно было использовать открытие и закрытие тега, как будто это был обычный элемент HTML? Больше об этом через минуту.)
Как реагировать преобразовывать HTML-синтаксис в JavaScript?
Это делает это с помощью специального инструмента под названием Babel, третий скрипт, который мы добавили. Вы можете увидеть, как это работает в действии здесь:
Что творится?
Babel, инструмент JavaScript называется компилятором, преобразует («компилирует») этот код, который выглядит как HTML в действительный JavaScript.
Что такое HTML-похожий на синтаксис? Jsx.
Этот HTML, который на самом деле JavaScript называется Jsx , который означает «JavaScript XML».
XML, если вы не знакомы, это немного более жесткий способ написания HTML.
STRICTER означает, что нам нужно использовать закрытие форвардную косушку для элементов с одним тегом. Например: В HTML как действительный JSX – <ввод/> Отказ
Так что подтвердить, JSX – это не Действующий код JavaScript.
Значение, вы не могли поставить JSX в браузере и ожидать его на работу. Нам нужен как компилятор, такой как Babel, чтобы преобразовать его в действительный JavaScript, а затем реагировать на использование, который создал JavaScript.
Так что теперь использовать наш пользовательский элемент ссылки, мы удаляем все три ссылки HTML и замените их с помощью трех ссылок, например:
reactjs Search Results
И если мы посмотрим на наш результат, у нас действительно есть три ссылки.
Это сила реагирования: она принимает многократность функций JavaScript, но позволяет нам использовать их, как они были HTML.
Мы ссылаемся на эти пользовательские элементы, сделанные с JavaScript AS Компоненты Отказ
Таким образом, мы получили много читаемости здесь с помощью компонентов. У нас нет путаницы о том, что мы смотрим, если мы хорошо назвали наши компоненты. Не нужно читать через тонну элементов HTML, чтобы увидеть, что отображается приложение.
Мы сразу видим, что у нас есть три пользовательских ссылки.
Анатомия функционального компонента
Теперь, когда мы знаем, как работают компоненты, давайте возьмем второй взгляд на нашу функцию ссылки.
Наш код может выглядеть довольно простым, но есть несколько тонких вещей, которые вы должны принять к сведению здесь:
function Link() {
return (
React - A JavaScript Library for Building User Interfaces
reactjs.org
React makes it painless to create interactive UIs.
);
}
Название компонента функции капитализируется: ссылка вместо ссылки. Это требуемая конвенция именования для компонентов реагирования. Мы используем заглавное название для различения компонентов от нормальных функций. Обратите внимание, что функции, которые возвращают JSX, не такие, как обычные функции JavaScript.
Обратите внимание, как jsx мы возвращаемся, имеет набор скобок вокруг него. Поскольку вы сначала пишу свой React Code, легко забыть эти скобки, что приведет к ошибке. Оберните свой JSX в скобках, если оно проходит не только одну строку.
Наконец, наша функция ссылки возвращает некоторые JSX. Каждый реактивный компонент должен вернуть либо элементы JSX, либо другие компоненты реагирования. И да, компоненты React могут вернуть другие компоненты.
Таким образом, поскольку React Compots могут вернуть другие компоненты реагирования, мы можем сделать компонент приложения.
Этот компонент приложения будет содержать весь наш набор или дерево компонентов И покажет то, что состоит наше приложение.
А с компонентом приложения это делает наш метод оказания методом гораздо проще читать:
...
Из этого кода мы видим, что компоненты React имеют иерархию или порядок, как HTML-элементы. В результате мы можем ссылаться на разные части дерева нашего компонента как Родители или дети Отказ
В этом случае, например, каждому компоненту оказанного ссылка приложение является родительским. Для приложения все три ссылки – это его дети.
Обратите внимание, что всякий раз, когда мы видим или вернем JSX, может быть только один родительский компонент. Но родительский компонент может иметь столько же дочерних компонентов (а также элементов) по мере необходимости.
Когда мы смотрим на вывод нашего кода, вы, вероятно, заметили следующую проблему:
У нас есть три экземпляра одной и той же ссылки! Это потому, что мы используем те же данные для каждой ссылки, которую мы создаем. Пока что Мы знаем, что каждая ссылка имеет разные данные – другой заголовок, URL, короткий URL и выдержка.
Итак, как мы проходим в уникальные данные нашим компонентам?
Как пройти динамические данные на компоненты: Реквизит
Если мы хотели пройти какой-то титульный текст на обычную функцию JavaScript, мы бы сделаем так:
Link("Our link title here");
Но как мы пройти данные на Функциональные компоненты ?
Нормальные элементы HTML принимают данные в виде атрибутов. Но в отличие от атрибутов HTML, атрибуты не распознаются на компонентах React. Данные не остаются на сам компонент. Куда они идут?
В качестве аргументов к функциональному компоненту. Опять же, это то, с которым мы знакомы, так как мы знаем основы функций.
Мы знаем, что функции выходные данные используют Возвращение и принимайте данные с аргументы .
Если у нас был элемент HTML, скажите Div с атрибутом, называемым «Название», этот код будет недействительным. HTML не имеет атрибутов заголовка для любого из его элементов:
Но если мы создали этот титул «атрибут» на нашей ссылке компонент:
Это действительно. И поскольку мы написали титул, как атрибут на нашем компоненте, он передан функцию ссылки в качестве аргумента, называемого «заголовка».
В коде мы можем думать об этом:
const linkData = { title: "Our link title here" };
Link(linkData);
Обратите внимание, что аргумент LinkData является объектом.
Реагировать собирает и организует данные, переданные в данный компонент как единый объект.
Имя для данных, передаваемых компоненту, такое как название, является реквизит .
Все значения опоры существуют в сам функциональный компонент на объекте реквизита.
И поскольку наша цель состоит в том, чтобы использовать наш титульный пропром в нашем компоненте ссылки, мы можем написать следующее:
function Link(props) {
return {props.title};
}
Мы используем фигурные скобки {} Синтаксис для вставки заголовка PROP от Props.title везде, где мы хотим. И то же самое относится и к любому другому отпорозу, переданному до компонента.
Эти фигурные брекеты позволяют нам вставлять или интерполировать динамические значения, где нам нужно.
Теперь у нас есть все, что нам нужно, чтобы исправить наши ссылки. Для каждой из компонентов связи нам нужно пройти свой заголовок, URL, короткий URL и выдержку как отдельные реквизиты:
reactjs Search Results
Глядя на наш выход, мы все еще получаем тот же результат.
Но здесь было немного компромисс. Через реквизиты мы смогли сделать нашу ссылку компонента гораздо более читаемой.
Теперь мы можем сделать любую ссылку в зависимости от того, что (действительные) данные о предпринимательских данных мы его даем.
Но теперь вы можете видеть, что наш компонент приложений получил намного больше, предоставляя значения опоры немедленно на каждой ссылке.
Разве не так ли мы можем перемещать все эти данные где-то еще?
Как отделить данные из интерфейса
Давайте переместим наши данные из компонентного дерева и поместите его где-то удобнее, но все же используйте данные по мере необходимости.
Для этого мы сделаем массив объектов со ссылками данных, чтобы пройти к компонентам ссылки через реквизиты.
Это позволяет нам поставить наши данные везде, где мы хотим, в другом файле JavaScript даже. Преимущество заключается в том, что он больше не загромождает наши компоненты.
...
Теперь, как мы показываем каждую ссылку со своими данными, используя массив linkdata?
Если вы работали с массивами ранее, чтобы получить каждый элемент, который мы петлю или повторяемся над массивом. Здесь, для каждой петли, мы можем снова передавать данные о реквизах до компонента ссылки.
Этот шаблон очень распространен в реакции. Настолько, что есть специальный метод массива, который мы можем использовать для выполнения этой итерации, называемого .map (). Это не то же самое, что метод карты в обычный JavaScript – это для работы с JSX и компонентами в одиночку.
...
Перемещая наши данные из пользовательского интерфейса и отображая каждую ссылку, используя .map (), у нас есть гораздо более простое приложение ractact, которое может принять как можно больше ссылок.
Наконец, обратите внимание, в нашем коде, где мы отображаем нашу linkdata, все выражение окружено нашими фигурными брекетами. Помните, что JSX позволяет нам вставлять любое действительное выражение JavaScript между фигурными брелками.
Как строить приложения «реагировать» путь
Какова была смысл покрывать эти различные узоры?
Не только для покрытия основ JSX и как Ract комбинируют HTML и JavaScript, но также показать, как думают, как разработчики реагирования.
Как вы думаете, как разработчик реагирования? Знание того, как сломать ваш интерфейс в многоразовые компоненты.
Когда разработчик реагирования планирует приложение, которую они хотят сделать, они начинают с идентификации всех отдельных частей приложения и видя, какие части могут быть сделаны в многоразовые компоненты.
Мы делаем это, увидев, если каждая деталь имеет одинаковые визуальные (HTML) структуры и принять одинаковые или очень похожие наборы данных (через реквизиты).
Теперь, чтобы прийти полный круг, давайте сделаем новый взгляд на начальный интерфейс, который мы хотели воссоздать в начале.
Если бы мы посмотрели на это, как разработчик реагирования, это может выглядеть что-то подобное:
Чем лучше вы получаете с использованием компонентов, тем быстрее вы сможете с легкостью создавать свои собственные веб-сайты и приложения.
Наслаждайтесь этим постом? Присоединяйтесь к React BootCamp
React Bootcamp Занимает все, что вы должны знать о изучении реагирования и связки в один комплексный пакет, включая видео, обманывать, плюс специальные бонусы.
Получить инсайдерскую информацию сотни разработчиков уже использовалось для освоения реагирования, находить работу своей мечты и контролировать свое будущее:
Нажмите здесь, чтобы быть уведомленным, когда он открывается
Оригинал: “https://www.freecodecamp.org/news/intro-to-react-components/”