How Scratch helped me learn React.

Kevin Nielsen
6 min readJun 13, 2022

--

It’s phase 2, week 2 of the boot camp and we were learning React. To be honest, a few months ago and I had never heard of React. Backtracking to December 2021 BBC (before boot camp), from a youtube video, I heard about a free computer science course called cs50 that was conducted by Harvard University. The YouTuber said if you’re thinking about coding, try this course. I thought this was great! I can learn the fundamentals of computer science but more importantly, I can say “I went to Harvard”! All jokes aside, starting that course helped me build a foundation of computer programming skills, and in the first week (week 0 in the programming world), I was introduced to a very cool piece of software called Scratch.

If you’re unfamiliar with Scratch, this is how Wikipedia defines it: “Scratch is a high-level block-based visual programming language and website aimed primarily at children as an educational tool for programming, with a target audience of ages 8 to 16.” Now, before making judgment that it is designed for children, keep in mind the cs50 course at Harvard University reviews Scratch! There must be a method behind the madness.

Moving forward one of the assignments for week 0 was to complete a Scratch project with the following requirements. Your project must use at least two sprites, at least one of which must not be a cat.

· Your project must have at least three scripts total (i.e., not necessarily three per sprite).

· Your project must use at least one conditional, at least one loop, and at least one variable.

· Your project must use at least one custom block that you have made yourself (via Make a Block), which must take at least one input.

· Your project should be more complex than most of those demonstrated in the lecture (many of which, though instructive, were quite short) but it can be less complex than Oscar time and Ivy’s Hardest Game.

After nearly two grueling weeks of coding(playing) with scratch, I completed my first and only Scratch project “Where’s Wizard?”, a rendition of one of my favorite childhood “books” “Where’s Waldo.” We will take a deeper look at what the “code” looks like, but if you would like to see a sneak peak, click this link Where’s Wizard?, on that page minimize the screen, and click the “See inside” button.

https://scratch.mit.edu/projects/644898508/editor/

Now that we are familiar with Scratch, we can compare it to React, and how it helped me learn this JavaScript library.

Visualizing modular programming — what does this look like in Scratch?

The beauty of Scratch is it is a very visual language. There is very minimal need for typing which means typos are nearly negligible and there is no unique syntax with punctuation and symbols. All the code scripts are used with blocks with specific functions. We will dive deeper into those specifics shortly after going over modular programming.

What is modular programming?

“Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.” Wikipedia definition.

In Scratch, each sprite has its own script that is modularized and separated. A sprite is any type of object that is rendered in the program. It could be a character, container, button, text, etc. Here are the first three sprites in my project.

Why do we want to keep things modular? It makes reading and debugging much easier. If we know a specific sprite is not triggering with the right event, we can begin looking at that specific sprite to see if it is starting the event when it receives a certain broadcast. If that sprite is not the culprit, we can look for the sprite sending the broadcast, and in most instances, it is not necessary to look at every single sprite.

Going into more detail about sprites, Scratch has a module for each sprite, which could be a character, a button, an event, or a script. In this game, there are 15 different levels. The main character is in every level, there are 6 different backdrops and randomized and conditional rending depending on location and what color the sprite is sensing.

Without modular coding, there would need to be a sprite for each character and each backdrop! Here is the sprite with all the different levels and the events that switch the backdrops.

How did this help with React?

Sprites can be compared to components in React. What is a component? To simply put, it a component is a Javascript function that is located in a unique file within a project. These components will contain some JSX to render an object on the webpage and vanilla Javascript can be used directly in the JSX via curly brackets or it can be placed outside of the JSX to handle events or handle object and array iteration like map, filter, or the spread operator. Here is an example of a React component.

App has two components Header.js & FilterBar.js

FilterBar has three components Form. js, MainContent.js, Favorites.js (excluding the Switch and Route components)

My experience with Scratch, made for a smooth transition with dealing with components in React and being able to make my code modular. The next thing to address is how to do we get the components to communicate with each other.

Connecting the components. How are things wired?

Those familiar with React, know components are connected through a hook called props, short for properties. Variables, functions, objects, and arrays are some examples of what can be passed as props. Through props, data can be passed from one component to another. The other way data can be passed is through inverse data flow through a callback function. Through a callback function, data can be passed up from a child component to a parent or great grandparent component with inverse data flow, and that can only be done if that callback function is passed from the parent component to the child component. Below you can see the MainContent component and the Favorites have props passed into them.

Sprites act like a component of modular code but can be connected by Scratch events. There is a unique event called broadcasting which will initiate specific scripts on the same sprite or another sprite. One block Broadcasts a script and sends a signal, while another block receives that signal, which triggers that event. Here is what a broadcast event looks like in Scratch.

One script needs to be broadcast and the other needs to receive the name of the event. “When I receive” event is very similar to accepting props in a component. Without sending props from a parent to a child component the React components will not be able to receive the data.

The truth of the matter is Scratch is a great programming language to learn if you are aspiring to be a software developer. It teaches basic principles of logic with operators, while loops, for loops, variables, and events. It was a tremendous building block in helping me learn one of the most powerful JavaScript frameworks. Last and not least, not only does it build a good foundation to understand coding, but it is a lot of fun to learn! Happy coding!

--

--