Что узнать в JavaScript, чтобы начать реагировать

Автор оригинала: Oyeniyi Abiola.

Rectjs является популярной библиотекой JavaScript для создания веб-приложений. Есть это понятие, что вам нужно знать JavaScript хорошо использовать Rectjs Отказ На самом деле, это недалеко от правды. Чтобы начать работу со строительством пользовательских интерфейсов, используя Rectjs , есть минимальный список вещей, которые вам нужно знать о JavaScript.

Вам нужно знать HTML и CSS, чтобы сделать любую форму пользовательского интерфейса в Интернете.

Для веб-дизайнеров, которые уже знакомы с HTML и CSS и имеют базовые знания JavaScript/jQuery, вы можете начать строить UIS в ReactJ, как только вы познакомитесь со списком ниже:

1. Использование консоли браузера.
2. Разные способы инициализации переменной в JavaScript в наши дни.
3. Разные способы создания функции в JavaScript сегодня.
4. Знание того, как использовать карта и Фильтр Методы в массиве JavaScript.
5. Тровые операторы в JavaScript.
6. Отладка приложений JavaScript в браузере.

Я объясню каждый элемент в списке, а в последующем посте я приступим к применению знаний в создании простых приложений REVENTJS.

1. Использование консоли браузера

Для того, кто только начинается с интерфейсным веб-разработкой, вы можете подумать о консоли браузера в качестве интерактивной оболочки для тестирования наших знаний о JavaScript.

Предполагая, что мы используем веб-браузер Chrome, консоль браузера выглядит так:

Это вкладка в инструментах разработчика браузера Chrome Browser (нажмите F12, чтобы переключить или щелкнуть правой кнопкой мыши на экране Viewport и выберите Осмотреть Затем выберите «Консоль Console »).

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

2. Различные способы инициализации переменной в JavaScript сегодня

Для некоторых из вас, кто уже слегка знаком с JavaScript, вы, вероятно, знаете, что создать переменную, вы бы использовали ключевое слово var Отказ Похоже, это выглядит

var name = "James";

Недавно были добавлены другие ключевые слова, которые также могут быть использованы для создания переменной в JavaScript. Они Const и Пусть Отказ В значительной степени они делают то же самое с чем var Есть ли, но есть некоторые незначительные различия. Причина, по которой я говорю об этих ключевых словах, заключается в том, что они в значительной степени используются в большинстве INVEDJS кодовых базах и документации по реагированию. Пример из реагирования документов, где это ключевое слово используется в можно найден здесь Отказ

Наиболее важные различия, которые мы должны знать, являются следующими

1. Мы можем полностью заменить var с Пусть без каких-либо вопросов.
2. Как только мы создадим переменную, используя Const мы не можем его переназначить.

Примеры использования этих ключевых слов

3. Разные способы создания функции в JavaScript

В JavaScript, чтобы создать функцию, мы используем Функция ключевое слово. Пример функции JavaScript показан ниже:

function addNumbers(a, v){
    return a + v;
}

Это самый распространенный способ создания функции. Мы также могли назначить функцию переменной в JavaScript. Вышеуказанная функция также может быть реализована так.

var addNumbers = function(a,v){
    return a + v;
}
// To use this function like the above
addNumbers(23, 44);

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

function addFourNumbers(a,b,c,d){
    return addNumbers(a,b) + addNumbers(c,d);
}
//Note we are calling the addFourNumbers function before creating the addNumbers funciton
addFourNumbers(23,24,25,26) 

function addNumbers(w,x){
    return x + w;
}

Если бы мы были в Скопируйте и вставьте вышеупомянутый фрагмент в нашу консоль браузера, мы получим результат 98.

Но если мы реализуем это таким образом:

function addFourNumbers(a,b,c,d){
    return addNumbers(a,b) + addNumbers(c,d);
}

addFourNumbers(23, 24, 25, 26);
let addNumbers = function( x, y){
    return x + y;
}

Мы столкнулись с ошибкой, если бы мы скопировали и вставили фрагмент выше в консоль браузера. Потому что addnumbers Переменная не была определена в точке, когда AddFournumbers Функция была вызвана.

Теперь, когда мы знакомы с назначением функции переменной (второй способ), в JavaScript есть новый синтаксис, который делает это еще короче.

let addNumbers = (x,y) =>{
    return x + y;
}
addNumbers(3,5) // evaluates to 8
// If the function doesn't contain any logic and we are just returning a result. it could be simplified further

let addNumbers = (x,y) => x + y; 

addNumbers(3, 5) // 8

Вышеуказанный синтаксис известен как Функции стрелки И является действительно удобным способом назначения функции переменной в JavaScript.

4. Понимание функции карты и фильтра при использовании массивов JavaScript.

Учитывая массив JavaScript [1,2,3,4,5] , Если мы хотели создать другой массив, в котором каждый из элементов – это квадрат (т.е. результат становится [2,4,9,16,25] ), простой способ сделать это – использовать карта Метод, который доступен для всех массивов в JavaScript.

карта Использует функцию в качестве аргумента, и эта функция принимает два параметра, первая представляющая текущий элемент и следующий, представляющий индекс этого элемента в массиве. Документация на карте

let regularArray = [1,2,3,4,5];
let squareArray = regularArray.map((item, index)=>{
    return item * item;
}) 
regularArray.length === squareArray.length // this is true;

Вы можете думать о карта как способ преобразования одного массива в другой массив. В конце концов оба массива есть такое же количество элементов ;

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

Так, например, используя массив [1,2,3,4,5] Отказ Если бы мы были заинтересованы в возвращении только странные Числа в массиве, используя Фильтр будет хорошим кандидатом.

let regularArray = [1,2,3,4,5];
let oddArray = regularArray.filter((item,index)=>{
    return item % 2 === 1;
}
console.log(oddArray) // would return [1,3,5]

Фильтр Возвращает Подмножество оригинального массива на основе условия Отказ В нашем примере выше условие было то, что модуль каждого элемента в массиве должен быть равен 1.

Имейте в виду, что возвращаемое значение прошедшей функции в Фильтр должен быть логическими Отказ Если это возвращает правда конкретный элемент будет добавлен в новый список. Если это возвращает ложь Товар будет удален в новом списке.

5. Тробые операторы в JavaScript

В JavaScript условия реализованы с использованием обоих Если и еще заявления.

var name = 50;
var amount = 0;
if(name > 25){
    amount = 50;
}else{
    amount = 10;
}

В этом выше примере мы устанавливаем значение переменной сумма основываясь на условиях, что если Имя больше 25, то сумма было бы 50, еще сумма будет 10 Если условие не будет выполнено.

Проще говоря, чтобы реализовать вышеупомянутое – воспользоваться оператором-белогом в JavaScript. Псевдокод выглядит следующим образом условие ? Результат, когда true: результат, когда false Так что в приведенном выше примере, используя Оператор для бельярников составляет

var name = 50;
var amount = name > 25 ? 50 : 10;

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

NB: Существует разница между операторами JavaScript и выражениями JavaScript. Хорошая статья о выражении JavaScript находится в Документы MDN

6. Отладка приложений JavaScript в браузере

Предполагая, что мы создали простой HTML Страница под названием образец .html

Если мы откроем это образец .html Страница в браузере и открываем вкладку консоли, мы увидим ниже.

Теперь, если то, что мы хотели, чтобы результат был [«Джеймс Ао1», «Джон Ао2», «Шола»] Из нашего результата мы можем видеть, что мы явно делаем что-то не так в карта выполнение. Чтобы иметь возможность отладки нашего приложения, у нас есть два варианта,

1. Перейти к Вкладка источников В нашем инструменте DEV браузера и добавьте точку останова в части нашего кода, которую мы хотим паузе. Чтобы добавить точку останова, щелкните правой панель, пока не отобразится синий значок. Этот синий значок переходит.

1. В нашем текстовом редакторе при редактировании образец .html добавить отладчик; Заявление, чтобы указать, где мы хотим приостановить выполнение.

Если бы мы были обновить наш браузер, мы бы соблюдали следующее в любом случае С нашими инструментами разработчика открываются Отказ

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

Хотя точка останова активна, мы можем вернуться к вкладке консоли и подтвердить, что у нас есть доступ ко всем переменным/функциям до точки останова.

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

Если вы заметили выделенный раздел на изображении выше, вы можете увидеть элементы управления. Мы также можем увидеть, что результат Funnname был оценен, и мы можем точно определить причину нашей проблемы.

Чтобы узнать больше о отладке приложений JavaScript на Chrome, посетите Chrome devtools Документация для получения дополнительной информации.

В следующем посте мы будем применять все эти знания в построении фактических пользовательских интерфейсов с использованием inventjs.

До этого, спасибо за чтение.