Все еще используете HTML? Начните использовать компоненты React
HTML — это язык Интернета, но создание целых веб-сайтов только с помощью HTML может быть повторяющимся и сложным в управлении.
В этом уроке мы увидим, как использовать библиотеку JavaScript React, чтобы сделать наши веб-сайты удобными и многоразовыми.
React — это мощный инструмент для любого разработчика, который знает HTML и хочет быстрее создавать более организованные и динамичные веб-сайты.
Давайте начнем!
Хотите полное руководство, чтобы стать профессиональным разработчиком React от начала до конца? Посетите Учебный лагерь React.
Почему я должен использовать React вместо HTML?
React появился в 2013 году как лучший способ создания веб-приложений с помощью JavaScript. Его часто называют библиотекой для создания пользовательских интерфейсов, сокращенно от «пользовательских интерфейсов».
Что делает библиотеку React такой желанной для изучения, так это то, что она не заменяет HTML.
Он использует преимущества популярности и силы HTML как самого популярного языка программирования, позволяя им использовать синтаксис, очень похожий на HTML, для создания интерфейсов и добавления к нему динамических функций с помощью JavaScript.
Как создать пользовательский интерфейс с помощью HTML
В свете универсальности React мы можем воссоздать любой сайт или пользовательский интерфейс, которые мы видим в Интернете.
Для этого урока давайте переделаем часть приложения, которое вы, вероятно, используете каждый день — Google Search.
Это может показаться амбициозным, если вы новичок в React, но для этого требуется знание только двух простых концепций: HTML и основных функций JavaScript.
Как создать пользовательский интерфейс, не зная React или даже JavaScript?
Используя элементы HTML как часть простого HTML-документа.
Вот как мы покажем первые три результата, которые появляются при поиске «reactjs» в Google.
<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
</head>
<body>
<section>
<div>
<a href="https://reactjs.org"
>React - A JavaScript Library for Building User Interfaces</a
>
<div>
<h3>reactjs.org</h3>
</div>
<div>
React makes it painless to create interactive UIs.
</div>
</div>
<div>
<a href="https://en.wikipedia.org/wiki/React_(web_framework)"
>React (web framework) - Wikipedia</a
>
<div>
<h3>https://en.wikipedia.org › wiki › React_(web_framework)</h3>
</div>
<div>
React is a JavaScript library for building user interfaces.
</div>
</div>
<div>
<a href="https://twitter.com/reactjs?lang=en"
>React (@reactjs) | Twitter</a
>
<div>
<h3>https://twitter.com › reactjs</h3>
</div>
<div>
The latest Tweets from React (@reactjs).
</div>
</div>
</section>
</body>
</html>Использование только статического HTML было бы хорошо, если бы нам нужно было показать только несколько ссылок.
Но как мы можем таким образом отображать сотни или тысячи ссылок, все с разными данными, как это может потребоваться поисковой системе?
Что может быть лучше, то есть более простой и расширяемый способ написать это?
Только HTML не будет решением. Нам понадобится способ сделать наш сайт более динамичным, чтобы отображать столько ссылок, сколько нам нужно.
Когда дело доходит до добавления поведения на сайт, нам нужен JavaScript. А поскольку наша цель — создавать отличные приложения с помощью JavaScript, мы знаем, как использовать React.
Как обновить любой HTML-сайт до приложения React
Давайте превратим наш статический HTML в динамическое приложение React.
Звучит сложно? Это проще, чем вы думаете.
Мы можем создать приложение React из одного HTML-документа. Все, что нам нужно сделать, это добавить React со следующими внешними скриптами.*
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>Первый предназначен для создания нашего приложения React, а второй — для отображения или рендеринга приложения React в браузере.
Первый — React, второй — ReactDOM.
Третий скрипт должен ввести инструмент под названием Babel. Мы немного коснемся того, что это делает.
Вот как выглядит наш код на данный момент:
<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<!-- our script must have type="text/babel" for Babel to work -->
<script type="text/babel">
// React code will go here
</script>
</body>
</html>… и это почти приложение React.
Обратите внимание, что у нас есть скрипт, в котором мы можем написать наш код React, но нет HTML.
Давайте это исправим.
Как создать и визуализировать наше приложение React
Каждое приложение React должно иметь так называемую точку входа.
точка входа — это HTML-элемент, в который мы вставляем наше приложение React на страницу.
Обычная точка входа — это div с корневым идентификатором (<div id="root"></div>).
Мы добавим это, а затем воспользуемся функцией render() из ReactDOM, чтобы выполнить работу по рендерингу приложения.
Первое — это само приложение, то есть наш предыдущий HTML-код, а второе должно ссылаться на нашу точку входа. Мы можем создать эту ссылку, сказав document.getElementById('root').
Итак, теперь у нас есть все необходимое для запуска нашего приложения React:
<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root">
</div>
<!-- our script must have type="text/babel" for Babel to work -->
<script type="text/babel">
ReactDOM.render(
<section>
<div>
<a href="https://reactjs.org"
>React - A JavaScript Library for Building User Interfaces</a
>
<div>
<h3>reactjs.org</h3>
</div>
<div>
React makes it painless to create interactive UIs.
</div>
</div>
<div>
<a href="https://en.wikipedia.org/wiki/React_(web_framework)">React (web framework) - Wikipedia</a>
<div>
<h3>https://en.wikipedia.org › wiki › React_(web_framework)</h3>
</div>
<div>
React is a JavaScript library for building user interfaces.
</div>
</div>
<div>
<a href="https://twitter.com/reactjs?lang=en">React (@reactjs) | Twitter</a>
<div>
<h3>https://twitter.com › reactjs</h3>
</div>
<div>
The latest Tweets from React (@reactjs).
</div>
</div>
</section>, document.getElementById('root'))
</script>
</body>
</html>И если мы посмотрим на наш результат, он работает как прежде. Идеально!
Теперь давайте воспользуемся React, чтобы улучшить наш сайт, динамически отображая наши ссылки.
Как сделать HTML повторно используемым с компонентами React
Если мы рассмотрим нашу структуру HTML, каждая ссылка состоит из одних и тех же частей. У каждого есть URL-адрес, заголовок, более короткий URL-адрес и выдержка. Для каждой ссылки мы должны снова и снова повторять одни и те же элементы HTML.
В программировании, если вам приходится много повторяться, это, скорее всего, признак того, что ваш код можно каким-то образом упростить и сократить. Как программисты, мы всегда стремимся как можно меньше повторяться.
Мы стараемся писать СУХОЙ код, в котором вы «не повторяетесь».
React — это, по сути, JavaScript плюс некоторые функции, помогающие нам создавать приложения.
И поскольку мы работаем с JavaScript, какая функция JavaScript позволяет нам создавать или выводить что-то столько раз, сколько нам нужно?
Функция.
Давайте создадим его здесь и назовем его Link.
function Link() {
// create link HTML output
}Причина в том, что мы хотим, чтобы эта функция возвращала или выводила HTML-код ссылки каждый раз, когда мы ее вызываем.
Для этого давайте вернем HTML-код нашей первой ссылки:
function Link() {
return (
<div>
<a href="https://reactjs.org">
React - A JavaScript Library for Building User Interfaces
</a>
<div>
<h3>reactjs.org</h3>
</div>
<div>React makes it painless to create interactive UIs.</div>
</div>
);
}Итак, теперь давайте используем его для отображения каждой ссылки, которую он возвращает.
Для этого вместо того, чтобы называть его как Link(), в React мы можем написать его так, как будто это был элемент HTML <Link />.
Если вы видите это впервые, это может немного сломать ваш мозг.
Здесь мы используем синтаксис HTML, но мы вызываем функцию JavaScript! Вы освоитесь с этим, когда будете видеть это чаще.
(Кроме того, вы заметили, что нам не нужно было использовать открывающий и закрывающий теги, как это был обычный HTML-элемент? Подробнее об этом через минуту.)
Как React преобразует синтаксис, похожий на HTML, в JavaScript?
Это делается с помощью специального инструмента под названием Babel, третьего добавленного нами скрипта. Посмотреть, как это работает в действии, можно здесь:
Что происходит?
Babel, инструмент JavaScript, называемый компилятором, преобразует («компилирует») этот код, который выглядит как HTML, в действительный JavaScript.
Что это за HTML-подобный синтаксис? JSX
Этот HTML, который на самом деле является JavaScript, называется JSX, что означает «JavaScript XML».
XML, если вы не знакомы, — это немного более строгий способ написания HTML.
Более строгий означает, что нам нужно использовать закрывающую косую черту для элементов с одним тегом. Например: <input> в HTML, поскольку допустимым JSX является <input />.
Итак, повторим еще раз: JSX — это не допустимый код JavaScript.
Это означает, что вы не можете поместить JSX в браузер и ожидать, что он будет работать. Нам нужен как компилятор, такой как Babel, чтобы преобразовать его в действительный JavaScript, так и React, чтобы использовать созданный JavaScript.
Итак, теперь, чтобы использовать наш пользовательский элемент Link, мы удаляем все три HTML-кода ссылок и заменяем их тремя ссылками, например:
<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<section>
<Link />
<Link />
<Link />
</section>,
document.getElementById("root")
);
</script>
</body>
</html>И если мы посмотрим на наш результат, у нас действительно есть три связи.
В этом сила React: он требует возможности повторного использования функций JavaScript, но позволяет нам использовать их так же, как HTML.
Мы называем эти пользовательские элементы, созданные с помощью JavaScript, компонентами.
Таким образом, мы добились большей удобочитаемости благодаря использованию компонентов. У нас не возникнет путаницы в отношении того, на что мы смотрим, если мы правильно назвали наши компоненты. Не нужно читать тонны HTML-элементов, чтобы увидеть, что отображает приложение.
Мы сразу видим, что у нас есть три пользовательских ссылки.
Анатомия функционального компонента
Теперь, когда мы знаем, как работают компоненты, давайте еще раз взглянем на наш компонент функции Link:
Наш код может показаться довольно простым, здесь есть несколько тонких моментов, на которые стоит обратить внимание:
function Link() {
return (
<div>
<a href="https://reactjs.org">
React - A JavaScript Library for Building User Interfaces
</a>
<div>
<h3>reactjs.org</h3>
</div>
<div>React makes it painless to create interactive UIs.</div>
</div>
);
}Имя функционального компонента пишется с заглавной буквы: Link вместо link. Это обязательное соглашение об именах для компонентов React. Мы используем имя с заглавной буквы, чтобы отличить компоненты от обычных функций. Обратите внимание, что функции, возвращающие JSX, отличаются от обычных функций JavaScript.
Обратите внимание, что JSX, который мы возвращаем, заключен в круглые скобки. Когда вы впервые пишете свой код React, легко забыть эти круглые скобки, что приведет к ошибке. Заключите JSX в круглые скобки, если он занимает более одной строки.
Наконец, наша функция Link возвращает некоторый JSX. Каждый компонент React должен возвращать либо элементы JSX, либо другие компоненты React. И да, компоненты React могут возвращать другие компоненты.
Итак, поскольку компоненты React могут возвращать другие компоненты React, мы можем создать компонент приложения.
Этот компонент приложения будет содержать весь наш набор или дерево компонентов и покажет, из чего состоит наше приложение.
А с компонентом приложения это значительно упрощает чтение нашего метода рендеринга:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Link() {
return (
<div>
<a href="https://reactjs.org">
React - A JavaScript Library for Building User Interfaces
</a>
<div>
<h3>reactjs.org</h3>
</div>
<div>React makes it painless to create interactive UIs.</div>
</div>
);
}
function App() {
return (
<section>
<Link />
<Link />
<Link />
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>Из этого кода видно, что компоненты React имеют иерархию или порядок, как элементы HTML. В результате мы можем обращаться к различным частям нашего дерева компонентов как к родителям или дочерним элементам.
В этом случае, например, для каждого отображаемого компонента Link приложение является родителем. Для приложения все три ссылки являются его дочерними элементами.
Обратите внимание, что всякий раз, когда мы визуализируем или возвращаем JSX, может быть только один родительский компонент. Но у родительского компонента может быть столько дочерних компонентов (а также элементов), сколько необходимо.
Когда мы смотрим на вывод нашего кода, вы, вероятно, заметили следующую проблему:
У нас есть три экземпляра одной и той же ссылки! Это потому, что мы используем одни и те же данные для каждой создаваемой нами ссылки. Тем не менее, мы знаем, что каждая ссылка имеет разные данные — другой заголовок, URL-адрес, короткий URL-адрес и выдержку.
Так как же нам передать уникальные данные нашим компонентам?
Как передать динамические данные компонентам: Реквизит
Если бы мы хотели передать некоторый текст заголовка в обычную функцию JavaScript, мы бы сделали это следующим образом:
Link("Our link title here");Но как передать данные функциональным компонентам?
Обычные элементы HTML принимают данные в виде атрибутов. Но в отличие от атрибутов HTML, атрибуты не распознаются компонентами React. Данные не остаются на самом компоненте. Куда они идут?
В качестве аргументов функционального компонента. Опять же, это то, с чем мы знакомы, поскольку знаем основы функций.
Мы знаем, что функции выводят данные, используя return, и принимают данные с аргументами.
Если бы у нас был элемент HTML, скажем, div с атрибутом title, этот код был бы недействительным. HTML не имеет атрибутов title ни для одного из своих элементов:
<div title="Our link title here"></div>Но если мы создали этот «атрибут» заголовка в нашем компоненте «Ссылка»:
<link title="Our link title here" />Это действительно. А так как мы написали заголовок как атрибут нашего компонента, он передается функции Link в качестве аргумента с именем «заголовок».
В коде мы можем думать об этом так:
const linkData = { title: "Our link title here" };
Link(linkData);Обратите внимание, что аргумент linkData является объектом.
React собирает и организует данные, передаваемые данному компоненту, как единый объект.
Имя для данных, передаваемых компоненту, например title, — props.
Все значения реквизита существуют внутри самого функционального компонента в объекте реквизита.
И поскольку наша цель — использовать свойство title в компоненте Link, мы можем написать следующее:
function Link(props) {
return <a>{props.title}</a>;
}Мы используем этот синтаксис с фигурными скобками {}, чтобы вставить свойство title из props.title в любом месте, где мы хотим. И то же самое относится к любому другому свойству, переданному компоненту.
Эти фигурные скобки позволяют нам вставлять или интерполировать динамические значения там, где нам нужно.
Теперь у нас есть все необходимое для исправления наших ссылок. Для каждого из компонентов ссылки нам нужно передать их заголовок, URL-адрес, короткий URL-адрес и выдержку в качестве отдельных реквизитов:
<!DOCTYPE html>
<html>
<head>
<title>reactjs Search Results</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Link(props) {
return (
<div>
<a href={props.url}>{props.title}</a>
<div>
<h3>{props.shortUrl}</h3>
</div>
<div>{props.excerpt}</div>
</div>
);
}
function App() {
return (
<section>
<Link
title="React - A JavaScript Library for Building User Interfaces"
url="https://reactjs.org"
// props consisting of two or more words must be written in camelcase
shortUrl="reactjs.org"
excerpt="React makes it painless to create interactive UIs."
/>
<Link
title="React (web framework) - Wikipedia"
url="https://en.wikipedia.org/wiki/React_(web_framework)"
shortUrl="en.wikipedia.org › wiki › React_(web_framework)"
excerpt="React is a JavaScript library for building user interfaces."
/>
<Link
title="React (@reactjs) | Twitter"
url="https://twitter.com/reactjs"
shortUrl="twitter.com › reactjs"
excerpt="The latest Tweets from React (@reactjs)."
/>
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>Глядя на наш вывод, мы по-прежнему получаем тот же результат.
Но здесь был небольшой компромисс. С помощью реквизита мы смогли сделать наш компонент Link более читабельным.
Теперь мы можем сделать любую ссылку на основе любых (действительных) реквизитов, которые мы ей даем.
Но теперь вы можете видеть, что наш компонент приложения стал намного больше, предоставляя значения свойств сразу для каждой ссылки.
Разве мы не можем переместить все эти данные куда-нибудь еще?
Как отделить данные от интерфейса
Давайте переместим наши данные из дерева компонентов в более удобное место, но по-прежнему будем использовать данные по мере необходимости.
Для этого мы создадим массив объектов с данными ссылки, которые будут передаваться компонентам Link через свойства.
Это позволяет нам помещать наши данные куда угодно, даже в другой файл JavaScript. Преимущество в том, что он больше не загромождает наши компоненты.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const linkData = [
{
title: "React - A JavaScript Library for Building User Interfaces",
url: "https://reactjs.org",
shortUrl: "reactjs.org",
excerpt: "React makes it painless to create interactive UIs."
},
{
title: "React (web framework) - Wikipedia",
url: "https://en.wikipedia.org/wiki/React_(web_framework)",
shortUrl: "en.wikipedia.org › wiki › React_(web_framework)",
excerpt: "React is a JavaScript library for building user interfaces."
},
{
title: "React (@reactjs) | Twitter",
url: "https://twitter.com/reactjs",
shortUrl: "twitter.com › reactjs",
excerpt: "The latest Tweets from React (@reactjs)."
}
];
function Link(props) {
return (
<div>
<a href={props.url}>{props.title}</a>
<div>
<h3>{props.shortUrl}</h3>
</div>
<div>{props.excerpt}</div>
</div>
);
}
function App() {
return (
<section>
<Link title="" url="" shortUrl="" excerpt="" />
<Link title="" url="" shortUrl="" excerpt="" />
<Link title="" url="" shortUrl="" excerpt="" />
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>Теперь, как нам отобразить каждую ссылку с ее данными, используя массив linkData?
Если вы раньше работали с массивами, чтобы получить каждый элемент, мы зацикливаем или перебираем массив. Здесь для каждого цикла мы можем снова передать данные реквизита компоненту Link.
Этот шаблон очень распространен в React. Настолько, что существует специальный метод массива, который мы можем использовать для выполнения этой итерации, называемый .map(). Это не то же самое, что метод карты в обычном JavaScript — он предназначен для работы только с JSX и компонентами.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const linkData = [
{
title: "React - A JavaScript Library for Building User Interfaces",
url: "https://reactjs.org",
shortUrl: "reactjs.org",
excerpt: "React makes it painless to create interactive UIs."
},
{
title: "React (web framework) - Wikipedia",
url: "https://en.wikipedia.org/wiki/React_(web_framework)",
shortUrl: "en.wikipedia.org › wiki › React_(web_framework)",
excerpt: "React is a JavaScript library for building user interfaces."
},
{
title: "React (@reactjs) | Twitter",
url: "https://twitter.com/reactjs",
shortUrl: "twitter.com › reactjs",
excerpt: "The latest Tweets from React (@reactjs)."
}
];
function Link(props) {
return (
<div>
<a href={props.url}>{props.title}</a>
<div>
<h3>{props.shortUrl}</h3>
</div>
<div>{props.excerpt}</div>
</div>
);
}
function App() {
return (
<section>
{linkData.map(function(link) {
return (
<Link
key={link.url}
title={link.title}
url={link.url}
shortUrl={link.shortUrl}
excerpt={link.excerpt}
/>
);
})}
</section>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>
</body>
</html>Перемещая наши данные из пользовательского интерфейса и отображая каждую ссылку с помощью .map(), мы получаем гораздо более простое приложение React, которое может принимать столько ссылок, сколько мы выбираем.
Наконец, обратите внимание на то, что в нашем коде, когда мы сопоставляем наши linkData, все выражение заключено в наши фигурные скобки. Имейте в виду, что JSX позволяет нам вставлять любое допустимое выражение JavaScript между фигурными скобками.
Как создавать приложения в стиле «React»
Какой смысл было покрывать эти различные шаблоны?
Не только для того, чтобы рассказать об основах JSX и того, как React сочетает в себе HTML и JavaScript, но и показать вам, как думают разработчики React.
Как вы думаете, как разработчик React? Зная, как разбить наш пользовательский интерфейс на повторно используемые компоненты.
Когда разработчик React планирует приложение, которое он хочет создать, он начинает с определения всех отдельных частей приложения и просмотра того, какие части можно превратить в повторно используемые компоненты.
Мы делаем это, проверяя, имеет ли каждая часть одинаковую визуальную (HTML) структуру и принимает одинаковые или очень похожие наборы данных (через реквизиты).
Теперь, чтобы пройти полный круг, давайте по-новому взглянем на начальный пользовательский интерфейс, который мы хотели воссоздать в начале.
Если бы мы посмотрели на это как разработчик React, это могло бы выглядеть примерно так:
Чем лучше вы будете использовать компоненты, тем быстрее вы сможете с легкостью создавать свои собственные веб-сайты и приложения.
Нравится этот пост? Присоединяйтесь к React Bootcamp
Учебный курс React объединяет все, что вам нужно знать об изучении React, в один комплексный пакет, включая видео, шпаргалки и специальные бонусы.
Получите инсайдерскую информацию, которую сотни разработчиков уже использовали, чтобы освоить React, найти работу своей мечты и взять под контроль свое будущее:
Нажмите здесь, чтобы получить уведомление, когда он откроется
