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

 

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

Автор: admin от 10-01-2019, 11:25, посмотрело: 16

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



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




Часть 1: обзор курса, причины популярности React, ReactDOM и JSX

Часть 2: функциональные компоненты

Часть 3: файлы компонентов, структура проектов

Часть 4: родительские и дочерние компоненты

Часть 5: начало работы над TODO-приложением, основы стилизации

Оригинал



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



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

function App() {
    return (
       <h1>Hello world!</h1>
    )
}

ReactDOM.render([leech=https://developer.mozilla.org/ru/docs/Web/javascript/Reference/Statements/for]for[/leech], синтаксис которого выглядит так:



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


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



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



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



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

const App = () => <h1>Hello world!</h1>

ReactDOM.render([leech=https://scrimba.com/p/p7P5Hd/c6G36SV]Оригинал[/leech]



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



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



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



[code]import React from "react"
import ReactDOM from "react-dom"

function App() {
  return (
    <h1>Hello world!</h1>
  )
}

ReactDOM.render([leech=https://developer.mozilla.org/ru/docs/Web/javascript/Reference/template_strings]шаблонных литералах[/leech], оформляемых с помощью обратных кавычек (<code>` `</code>). Такие строки могут содержать конструкции вида <code>${выражение}</code>. Стандартное поведение шаблонных литералов предусматривает вычисление содержащихся в фигурных скобках выражений и преобразование того, что получится, в строку. В нашем случае это будет выглядеть так:



[code]<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-коде?



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

Источник: Хабр / Интересные публикации

Категория: Веб-разработка

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *