Learning React as a Data Scientist
Most of my tech experience has been in data science. That means using Jupyter notebooks, packages such as scikit-learn and pandas, statistical tests, neural nets, and above all, exploratory data analysis and visualization, as well as the practice of writing and high-level concept formation for understanding data. Learning React from this corner of the tech universe is therefore a difficult, and enlightening, experience.
What is React?
React is a Javascript library for developing web-based user interfaces. In the old days, developers had to build websites with brick-and-mortar equivalent technologies: They had to design webpages with manually coded HTML structure through <div>, <p>, and <h1>, <h2> tags, etc. They had to style the content filling that HTML with CSS. They had to use Javascript to handle interactivity, such as clicking buttons and retrieving content stored elsewhere. If you right-click the page you’re reading right now and ‘inspect’, you can see these three technologies being used to display this current page, with HTML being the main backbone for its content in your browser’s console.
So if these technologies are still being used, then why does React exist? React exists because it handles the complexities of unifying these technologies to cooperate with dynamic, web-based data management by efficiently tracking ‘states’ at a high level of abstraction through its basic fundamental building block: the React component.
In other words, one could build any React-powered website with brick-and-mortar tools, but React offers a different conceptual approach to web development, and these concepts, particularly React components, are what make it the current standard for app development. This is due in no small part to Facebook’s role in maintaining it.
What are the main differences from the data science workflow?
I’ll admit that many of these concepts are difficult, and completely foreign to my experience so far in data science. Most of data science happens in Python. There is very little opportunity or reason to use Javascript, HTML, CSS, Node.js, or the package managers and webpacks for the environment that supports React.
The Zen of Python describes the fundamental principles of Python, and these types of high level principles only emerge after many, many hours of practice with technologies in the scope of Python.
Thus, being a data scientist, freshly initiated with hardly more than the React tutorial, I cannot speak of such principles yet. I can only offer my ground-level experiences thus far with the building blocks of React, which are called React components.
What are React components?
Based on my 10-ish hours of React tutorials so far, as a true novitiate, I will describe my understanding of components.
Components are the building blocks of React. They are written in Javascript, and contain extensions of Javascript such as JSX and Typescript. It will help to first explain how a React app works in reverse. The following is the simplest example of a React example, from the official React tutorial:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);This is not a component. This is the final chunk of code that actually tells the browser’s interface (its internal DOM) to render whatever React tells it to, and it typically comes at the very end of the .js file containing a React app. In this case, <h1>Hello, world!</h1> is just a bit of JSX (an HTML-looking extension of Javascript) that ReactDOM.render() tells the browser’s DOM to render into the string Hello, world!
Typically, the stuff between the parentheses will contain more than string-based JSX. As with the tic-tac-toe example of the main tutorial, the stuff actually getting rendered will be a React component:
ReactDOM.render(
<Game />, // this line is the React component
document.getElementById('root')
);The component itself will invariably have other components as children, much like classes in Python. In fact, components which behave as classes are called class components, and components which behave as functions are called…you guessed it, function components.
What are React components for?
So what’s the big difference in comparison to Python classes?
The <Game /> component in the tic-tac-toe example above looks as follows. Don’t look too hard, it’s only for a general overview:
class Game extends React.Component { [...] \\ collapsed for brevity handleClick(i) {
const history = this.state.history;
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
history: history.concat([{
squares: squares
}]),
xIsNext: !this.state.xIsNext,
});
}
}
As we can see, the ReactDOM.render() code references this Game component, which is a React class component, and this Game component, in turn, references child components (unseen) Board and Square.
The main difference in comparison to Python classes is that React components like the one above track the state of an application. Throughout the course of an entire tic-tac-toe game, each move represents a different state of the game. This is the correct way to think about any React application. In the above example, the history variable contains all of the past states. It describes how the current state-of-the game was arrived at through a set of moves going back to the initial state. Furthermore, well-designed React components are intended to only change what needs to be changed, and limit state-tracking to immutable alterations of consecutively-produced past states.
In other words, rather than structuring an app with .css, .html, and .js files which operate in a holistic trio, each React component contains its own bit of Javascript (JSX), HTML, and styling. This means React components can be reused without re-rendering an entire interface from the ground up, efficiently minimizing the costs of transitioning between states on a user interface. In tic-tac-toe terms, this means easily going from move 8 to move 2 (or perhaps in a real, production React app, state 12,000 to state 2) without any redundant computation. This improves speed, reduces computational costs, and reduces complexity.
It seems to me that these benefits derive from the upfront complexity of React components. They are difficult for a beginner to understand for a reason. Any tutorial on HTML and Javascript always begins with the basic holistic-trio approach because that model for web development has been conceptually accessible in parallel with the history of web development. In physics, it’s like needing to understand Greek and Newtonian physics in order to understand how the flaws of those world-models paved the road to relativity. While, in theory, it’s possible to learn purely contemporary methodologies, it counterintuitively helps to familiarize oneself with the messy-but-coherent objects that lead to the more comprehensive, but complex state of the present.
I’m still learning React, and I’ll be interested to read this post in a few months’ time, to see what aspects of React I’ve certainly missed describing in this blog post, as well as what I got right. Nevertheless, I hope it’s been an insightful glimpse into the experience of a data scientist learning React. Thanks for reading!
