Главная » Хабрахабр » [Перевод] Учебный курс по React, часть 6: о некоторых особенностях курса, JSX и JavaScript

[Перевод] Учебный курс по React, часть 6: о некоторых особенностях курса, JSX и JavaScript

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

image

→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX
→ Часть 2: функциональные компоненты
→ Часть 3: файлы компонентов, структура проектов
→ Часть 4: родительские и дочерние компоненты
→ Часть 5: начало работы над TODO-приложением, основы стилизации
→ Часть 6: о некоторых особенностях курса, JSX и JavaScript

Занятие 13. О некоторых особенностях курса

→ Оригинал

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

import React from "react"
import ReactDOM from "react-dom" function App() { return ( <h1>Hello world!</h1> )
} ReactDOM.render(<App />, document.getElementById("root"))

Возможно, вы привыкли ставить точки с запятой везде, где это возможно. Тогда, например, первые две строчки предыдущего фрагмента кода выглядели бы так:

import React from "react";
import ReactDOM from "react-dom";

Я же недавно решил, что буду обходиться без них, в результате у меня и получается такой код, который вы видите в примерах. Конечно, в JavaScript есть конструкции, в которых без точек с запятой не обойтись. Скажем, при описании цикла for, синтаксис которого выглядит так:

for ([инициализация]; [условие]; [финальное выражение])выражение

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

Ещё одна особенность кода, который я пишу, заключается в том, что хотя ES6 технически позволяет использовать стрелочные функции в тех случаях, когда функции объявляют с использованием ключевого слова function, я этим не пользуюсь.

Например, код, приведённый выше, можно переписать так:

import React from "react"
import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root"))

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

Занятие 14. JSX и JavaScript

→ Оригинал

Прежде чем перейти к этим темам, нам нужно уточнить некоторые особенности взаимодействия JavaScript и JSX. На следующих занятиях мы будем говорить о встроенных стилях. Такое происходит, например, в коде функциональных компонентов. Вы уже знаете, что, пользуясь возможностями React, мы можем, из обычного JavaScript-кода, возвращать конструкции, напоминающие обычную HTML-разметку, но являющиеся JSX-кодом.

Что если имеется некая переменная, значение которой нужно подставить в возвращаемый функциональным компонентом JSX-код?

Предположим, у нас есть такой код:

import React from "react"
import ReactDOM from "react-dom" function App() { return ( <h1>Hello world!</h1> )
} ReactDOM.render(<App />, document.getElementById("root"))

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

function App() { const firstName = "Bob" const lastName = "Ziroll" return ( <h1>Hello world!</h1> )
}

Теперь мы хотим, чтобы то, что возвращает функциональный компонент, оказалось бы не заголовком первого уровня с текстом Hello world!, а заголовком, содержащим приветствие вида Hello Bob Ziroll!, которое сформировано с использованием имеющихся в компоненте переменных.

Попробуем переписать то, что возвращает компонент, так:

<h1>Hello firstName + " " + lastName!</h1>

Если взглянуть на то, что появится на странице после обработки подобного кода, то окажется, что выглядит это не так, как нам нужно. А именно, на страницу попадёт текст Hello firstName + " " + lastName!. При этом, если для запуска примера используется стандартный проект, созданный средствами create-react-app, нас предупредят о том, что константам firstName и lastName назначены значения, которые нигде не используются. Правда, это не помешает появлению на странице текста, который представляет собой в точности то, что было возвращено функциональным компонентом, без подстановки вместо того, что нам казалось именами переменных, их значений. Имена переменных в таком виде система считает обычным текстом.

На самом деле, сделать это довольно просто. Зададимся вопросом о том, как воспользоваться возможностями JavaScript в JSX-коде. В результате то, что возвращает компонент, будет выглядеть так: В нашем случае достаточно лишь заключить то, что должно быть интерпретировано как JavaScript-код, в фигурные скобки.

<h1>Hello !</h1>

При этом на страницу попадёт текст Hello Bob Ziroll!. В этих фрагментах JSX-кода, выделенных фигурными скобками, можно использовать обычные JavaScript-конструкции. Вот как выглядит в браузере то, что выведет этот код:

Страница, разметка которой сформирована средствами JSX и JavaScript

А именно, речь идёт о шаблонных литералах, оформляемых с помощью обратных кавычек (` `). Так как при работе со строками в современных условиях, в основном, применяются возможности ES6, перепишем код с их использованием. Стандартное поведение шаблонных литералов предусматривает вычисление содержащихся в фигурных скобках выражений и преобразование того, что получится, в строку. Такие строки могут содержать конструкции вида ${выражение}. В нашем случае это будет выглядеть так:

<h1>Hello {`${firstName} ${lastName}`}!</h1>

Обратите внимание на то, что имя и фамилия разделены пробелом, который интерпретируется здесь как обычный символ. Результат выполнения этого кода будет таким же, как было показано выше. В общем-то, самое главное, что вы должны сейчас понять, заключается, в том, что то, что заключено в фигурные скобки, находящиеся в JSX-коде — это обычный JS.

А именно, перепишем наш код так, чтобы, если его вызывают утром, он выводил бы текст Good morning, если днём — Good afternoon, а если вечером — Good night. Рассмотрим ещё один пример. Вот код функционального компонента App, который решает эту задачу: Для начала напишем программу, которая сообщает о том, который сейчас час.

function App() { const date = new Date() return ( <h1>It is currently about {date.getHours() % 12} o'clock!</h1> )
}

Тут создан новый экземпляр объекта Date. В JSX используется JavaScript-код, благодаря которому мы узнаём, вызвав метод date.getHours(), который сейчас час, после чего, вычисляя остаток от деления этого числа на 12, приводим время к 12-часовому формату. Похожим образом можно, проверив время, сформировать нужную нам строку. Например, это может выглядеть так:

function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) { timeOfDay = "morning" } else if (hours >= 12 && hours < 17) { timeOfDay = "afternoon" } else { timeOfDay = "night" } return ( <h1>Good {timeOfDay}!</h1> )
}

Тут имеется переменная timeOfDay, а анализируя текущее время с помощью конструкции if, мы узнаём время дня и записываем его в эту переменную. После этого мы используем переменную в возвращаемом компонентом JSX-коде.

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

Итоги

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

Уважаемые читатели! Пользуетесь ли вы точками с запятой в своём JavaScript-коде?


Оставить комментарий

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

*

x

Ещё Hi-Tech Интересное!

Не бойтесь пробовать, или Как я стала программистом в возрасте далеко за 18

Когда вы слышите словосочетание «младший разработчик», то наверняка представляете молодого парня на последних курсах вуза или недавнего выпускника — но уж никак не 30-летнюю женщину с маленьким ребёнком, которая до этого несколько лет преподавала в вузе и от разработки была ...

[Перевод] Open source не приносит денег, потому что не создан для этого

Лучший способ что-то сделать — хотя бы попробовать Все знают, что на open source невозможно заработать, верно? Это десятки (сотни?) успешных проектов с открытым исходным кодом. Я сейчас размышляю на эту тему, потому что Mozilla хочет в ближайшие несколько лет ...