Learning React as a Data Scientist, Part Two
This is part two of a series ‘Learning React as a Data Scientist’, where I document my attempt to learn React, as a data scientist. Part One is here.
My previous post on this subject was a relatively abstract overview of React. In that post, I said I’d look forward to reading it again weeks later to see what I had gotten right, as well as what misconceptions and biases had been lingering from my experience with Python and Jupyter notebooks.
Well, that’s what this post is about.
Most React tutorials begin with an immediate disclaimer that JavaScript is a pretty big prerequisite for React, and that much of the difficulty for a pure beginner learning React will be related to mere Javascript syntax, as opposed to the logic of React itself.
I had some previous experience with Javascript before attempting to learn React, but I was heavily drawing on parallels and assumptions about related syntax from Python. I’ve spent a ton of time revisiting JavaScript, HTML, and CSS fundamentals and, while I do think it’s possible to pick up some valuable concepts about state management and the overarching benefits of ReactDOM.render() and the virtual DOM, I’m now convinced the tutorials are right, and that it’s essential to have a working knowledge of JavaScript syntax to really grasp what React is doing.
What was surprising to me, though, was the ease and speed of picking up the essential quirks of JavaScript. Most of this ease and speed, I think, comes from recognizing similarities of abstraction between Python and JavaScript.
So, for this post, I’ll point out the most useful parallels between the fundamentals of Python and JavaScript for the sake of learning React and UI development. It’s a helpful set of pointers which I think will help Python and JavaScript learners alike. Such a guide is oddly rare to find since the community of Python driven data-scientists doesn’t overlap much with the community of JavaScript driven web-development, and so there’s little pedagogical need for instruction based on parallels, even though learning via pattern recognition is one of the quickest ways to learn.
So, to start.
Variables
Variables are probably the most intuitive concept in any programming language. They are the basic placeholders of values, which are limited to certain primitive data types determined by the language, primitive meaning that the data type is not an object (which is a complex type of its own, which can include primitives or additional objects), and has no methods (which are functions attached).
For Python, there are four primitive, built-in data types:
- Integer. Such as 4, or 12, or -8, or 0, but NOT 4.0 or 0.5 (see Float).
- String. Such as ‘hello world’, or ‘4’, or ‘4.0’, or ‘’, anything with quotes.
- Boolean. Either true or false.
- Float. Such as 4.0, or 3.8172, or 0.01, but NOT 4 (see Integer).
That’s it. Everything else in Python is a data structure containing other complexes or primitives. JavaScript is similar, with some unique differences.
For JavaScript, there are six primitive, built-in data types:
- undefined : no value attached, but different than ‘null’.
2. Boolean : Either true or false.
3. Number : Such as 4.0, or 12.8. Identical to a ‘Float’ in Python. **There is no primitive Integer type in Javascript!**
4. String : Such as ‘hello world’, or ‘4’, or ‘4.0’, or ‘’. Identical to Python string.
5. BigInt : Strange. Used to represent arbitrarily large integers.
6. Symbol. A unique and immutable value. It may look like a string or number, but it’s not. Under the hood, this has some important consequences.
In both Python and JavaScript variables must be declared, and the syntax is slightly different for each.
Variable declaration in Python:
# a string variable:
some_string = 'hello world!# an int variable
some_number = 5print(some_string, some_number)
# this will print hello world 5 to output device
Variable declaration in JavaScript. Interestingly, in JavaScript, the variable type must be declared before assignment. There are two types of variable declaration in JavaScript: const and let. ‘Const’ stands for constant: the value of the variable cannot be reassigned. ‘Let’ means the variable can be reassigned.
// 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
That about covers the basics of variables and declaration for both Python and JavaScript.
Python Dictionaries are JavaScript Objects
This fact is, without a doubt, the most painfully confusing parallel of Python and JavaScript.
Look at the following two code blocks:
// JavaScript object const aJsObject = {
firstJSkey: firstvalue,
secondJSkey: second value
};
vs.
# Python Dictionarya_python_dict = {
firstPkey: firstPvalue,
secondPkey: secondPvalue
}
They are the same! Python dictionaries, just like JavaScript objects, are bracketed containers of key: value pairs. They work the same too, and they both use dot notation .suchAsThisKey to access keys in their respective dictionary/object to return a value for that key.
Why is this so confusing? Because…
Python Objects are JavaScript Classes
A Python object intrinsically is a class, but this naming convention is truly unfortunate for beginners of either language. A class is a formula for creating other objects or variables. It a one layer of abstraction up from variables. Python objects are highly useful for maintaining complex, readable code.
# 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 = foodjenny_the_giraffe = Animal('jenny', 'giraffe', 'acacia')jenny_the_giraffe.name
# this would return 'jenny', and likewise for the other properties
JavaScript classes are identical, but the confusion comes from the fact that JavaScript ‘objects’ are already the name for Python dictionaries. JavaScript classes work the same as Python objects, with slightly different syntax.
// 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
The main syntax difference, which is important to understand (apart from the mere : -> {} going from Python to JavaScript for function and class declarations) is the __init__ vs. constructor methods. Both of them do the same thing, in that they allow for new instances of that class to be set up with initialized values. For Python, the __init__ method includes self as the explicit object being passed through __init__ method during initialization. In JavaScript, the constructor method has no ‘this’ or ‘self’ variable explicitly mentioned. Rather, the this variable implicitly accesses the object being called, so that the properties (such as name and food) only need to call this.name or this.food to assign those values, rather than explicitly passing through self in Python.
One other important difference is that in Python, creating new class instance, such as jenny_the_giraffe, is as simple as jenny_the_giraffe = Animal('jenny', 'giraffe', 'acacia') . Whereas in JavaScript, the keywords new and const or let must be used, as with all variable declaration in JavaScript: const jenny_the_giraffe = new Animal('jenny', ‘giraffe', ‘acacia') . Failure to provide const or new will throw an error.
Function Declaration
One other important though simple difference between Python and JavaScript is the syntax of function declaration.
In Python, declaring a function is quite simple:
def add_two(first, second):
return first + secondadd_two(5,6)
# this will return 11
That’s it! A def keyword and parentheses for the parameter values are sufficient for variable declaration in Python.
JavaScript syntax is more…interesting. There are multiple ways to declare functions in JavaScript, with arrow functions being the convention as of 2015 with advent of ES6, the international body which determines the rules for scripting languages.
The old way, which is still important in certain situations, is as follows.
const addFunction= function (one, two) {return one+two};addFunction(4,8);
// this will return 12
Arrow function syntax:
const addFunction = (one, two) => one + two;addFunction(2,3)
// this will return 5
Interestingly, arrow function syntax allows values to automatically be passed into a code block assumed to be a function, without brackets, and without a return statement (if the code is on one line). If the passed values take only one parameter, parentheses aren’t even needed. It’s somewhat strange, but pretty convenient, and React uses arrow functions a lot.
Import and Export
One final difference between Python and JavaScript is how differently they handle namespace in a file directory. Python automatically makes function and variable names available to other files in a directory, if they’re coming from a file ending in ‘.py’.
However, JavaScript explicitly requires those functions or variables to be exported at the bottom of the file in order to be accessed. Let’s pretend we have a myMathFunctions.py file with our add_two function from above.
from myMathFunctions import add_twoThat’s all that’s necessary in Python to import this function from a different file! Whereas in JavaScript, we have to explicitly export functions in order for them to be available in the global namespace, even when using import.
Final Thoughts
Most of this post was based on syntax, but syntax can be the biggest stumbling block in learning something as complex as React. I particularly think arrow functions and class declarations in JavaScript are crucial to understand above all else. The differences around variable declaration aren’t too bad, but understanding this in regard to functions and classes is crucial because of how often React components rely on this to pass props and manage state through this.props , which I focused on in my last post. I’ll continue learning React, and eventually write another post with further thoughts on the important differences between Python and JavaScript, particularly in the context of React. Thanks for reading!
