Изучение реакции как специалист по данным, часть вторая

Это вторая часть серии Learning React as a Data Scientist, в которой я документирую свою попытку изучить React как специалист по данным. Часть первая здесь.

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

Что ж, вот о чем этот пост.

Большинство руководств по React начинаются с немедленного отказа от ответственности, что JavaScript является довольно важным предварительным условием для React, и что большая часть трудностей для чистого новичка в изучении React будет связана с простым синтаксисом Javascript, а не с логикой самого React.

У меня был некоторый предыдущий опыт работы с Javascript до того, как я попытался изучить React, но я в значительной степени опирался на параллели и предположения о связанном синтаксисе из Python. Я потратил массу времени на пересмотр основ JavaScript, HTML и CSS, и, хотя я действительно думаю, что можно получить некоторые ценные концепции о управлении состоянием и общих преимуществах ReactDOM.render () и виртуальной модели DOM, Теперь я убежден, что учебники правильные, и что важно иметь практические знания синтаксиса JavaScript, чтобы действительно понять, что делает React.

Что меня удивило, так это простота и скорость улавливания основных особенностей JavaScript. Я думаю, что большая часть этой легкости и скорости происходит от признания сходства абстракции между Python и JavaScript.

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

Итак, для начала.

Переменные

Переменные, вероятно, являются наиболее интуитивно понятным понятием в любом языке программирования. Они являются основными заполнителями значений, которые ограничены определенными примитивными типами данных, определяемыми языком, примитивом, что означает, что тип данных не является объектом (который сам по себе является сложным типом, который может включают примитивы или дополнительные объекты) и не имеет методов (которые являются прикрепленными функциями).

Для Python существует четыре встроенных примитивных типа данных:

1. Целое число. Например, 4, или 12, или -8, или 0, но НЕ 4,0 или 0,5 (см. Float).
2. Нить. Например, «hello world», или «4», или «4.0», или «», любое слово в кавычках.
3. Логическое. Либо true, либо false.
4. Плавать. Например, 4.0, или 3.8172, или 0.01, но НЕ 4 (см. Целое число).

Вот и все. Все остальное в Python - это структура данных, содержащая другие комплексы или примитивы. JavaScript похож, но с некоторыми уникальными отличиями.

Для JavaScript существует шесть встроенных примитивных типов данных:

1. undefined: значение не прикреплено, но отличается от «null».

2. Логическое значение: true или false.

3. Число: например, 4,0 или 12,8. Идентично "Float" в Python. ** В Javascript нет примитивного типа Integer! **

4. Строка: например, «hello world», или «4», или «4.0», или «». Идентичен строке Python.

5. BigInt: Странно. Используется для представления сколь угодно больших целых чисел.

6. Символ. уникальное и неизменное значение. Это может выглядеть как строка или число, но это не так. Под капотом это имеет некоторые важные последствия.

И в Python, и в JavaScript переменные должны быть объявлены, и синтаксис для каждой из них немного отличается.

Объявление переменной в Python:

# a string variable:
some_string = 'hello world!
# an int variable 
some_number = 5
print(some_string, some_number) 
# this will print hello world 5 to output device

Объявление переменной в JavaScript. Интересно, что в JavaScript тип переменной должен быть объявлен перед назначением. Есть два типа объявления переменных в JavaScript: const и let. Константа означает константа: значение переменной не может быть переназначено. Let означает, что переменную можно переназначить.

// a string variable
const some_string = 'hello world, i cannot change';
// a number variable 
let some_number = 5;
console.log(some_string, some_number)
// this will print hello world, i cannot change 5 to output device
// any attempt to set some_string = {a new string} will result in 
// an error because of const, but some_number may be set as a new
// number, because of let

Это касается основ переменных и объявления как для Python, так и для JavaScript.

Словари Python - это объекты JavaScript

Этот факт, без сомнения, является самой до боли запутанной параллелью Python и JavaScript.

Взгляните на следующие два блока кода:

// JavaScript object 
const aJsObject = {
  firstJSkey: firstvalue,
  secondJSkey: second value
};

vs.

# Python Dictionary
a_python_dict = {
  firstPkey: firstPvalue,
  secondPkey: secondPvalue
}

Они одинаковые! Словари Python, как и объекты JavaScript, представляют собой заключенные в скобки контейнеры пар ключ: значение. Они также работают одинаково, и оба используют точечную нотацию .suchAsThisKey для доступа к ключам в их соответствующем словаре / объекте, чтобы вернуть значение для этого ключа.

Почему это так сбивает с толку? Потому что…

Объекты Python - это классы JavaScript

По сути, объект Python является классом, но это соглашение об именах действительно неудачно для новичков в любом языке. класс - это формула для создания других объектов или переменных. Это один уровень абстракции от переменных. Объекты Python очень полезны для поддержки сложного читаемого кода.

# a python object (which is, in other words, a class)
class Animal:
  def __init__(self, name, type, food):
    self.name = name
    self.type = type
    self.food = food
jenny_the_giraffe = Animal('jenny', 'giraffe', 'acacia')
jenny_the_giraffe.name
# this would return 'jenny', and likewise for the other properties

Классы JavaScript идентичны, но путаница возникает из-за того, что «объекты» JavaScript уже являются названием словарей Python. Классы JavaScript работают так же, как объекты Python, с немного другим синтаксисом.

// a javascript class
class Animal {
  constructor(name, type, food) {
    this.name = name;
    this.type = type;
    this.food = food;
  };
};
const jenny_the_giraffe = new Animal('jenny', 'giraffe', 'acacia');
jenny_the_giraffe.name;
// this would return 'jenny', and likewise for the other properties

Основное различие синтаксиса, которое важно понимать (помимо простого : -> {} перехода от Python к JavaScript для объявлений функций и классов), - это методы __init__ и конструктор. Оба они делают одно и то же, поскольку позволяют устанавливать новые экземпляры этого класса с инициализированными значениями. Для Python метод __init__ включает self как явный объект, передаваемый через метод __init__ во время инициализации. В JavaScript метод конструктора не имеет явно упомянутых переменных «this» или «self». Напротив, переменная this неявно обращается к вызываемому объекту, так что свойства (такие как имя и еда) должны вызывать только this.name или this.food для присвоения этих значений, а не явно проходить через self в Python.

Еще одно важное отличие состоит в том, что в Python создание нового экземпляра класса, такого как jenny_the_giraffe, так же просто, как jenny_the_giraffe = Animal('jenny', 'giraffe', 'acacia'). В то время как в JavaScript должны использоваться ключевые слова new и const or let, как и при объявлении всех переменных в JavaScript: const jenny_the_giraffe = new Animal('jenny', ‘giraffe', ‘acacia'). Отказ предоставить const или new приведет к ошибке.

Объявление функции

Еще одно важное, хотя и простое различие между Python и JavaScript - это синтаксис объявления функции.

В Python объявить функцию довольно просто:

def add_two(first, second):
    return first + second
add_two(5,6)
# this will return 11 

Вот и все! Ключевого слова def и скобок для значений параметров достаточно для объявления переменных в Python.

Синтаксис JavaScript более… интересен. Существует несколько способов объявления функций в JavaScript. Стрелочные функции были приняты в 2015 году с появлением ES6, международного органа, определяющего правила для языков сценариев.

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

const addFunction= function (one, two) {return one+two};
addFunction(4,8);
// this will return 12

Синтаксис стрелочной функции:

const addFunction = (one, two) => one + two;
addFunction(2,3)
// this will return 5

Интересно, что синтаксис стрелочной функции позволяет автоматически передавать значения в блок кода, предполагается, что это функция, без скобок и без оператора возврата (если код находится в одной строке). Если переданные значения принимают только один параметр, скобки даже не нужны. Это несколько странно, но довольно удобно, и React много использует стрелочные функции.

from myMathFunctions import add_two