I'm pretty sure that Facebook is right up there in the category of Top 5 Innovations with The Most Awful Unintended Consequences Ever. A rising threat to our democracies, it has caused the fragmentation of our collective reality and sent our mental health plummeting. HOWEVER, did you know that Facebook also developed React? 😍 All is forgiven!

So you want to learn React? Excellent choice, it's great fun! It does require some pre-existing knowledge though. Here's the bare minimum of JavaScript skills to brush up on before attempting to learn React.

1. Package managers
2. Ternary operator
3. Destructuring
4. Array methods - especially map & filter
5. Arrow functions
6. ES6 modules

I'll provide a brief example of each of above in this article, but please be aware that there's a lot more to explore about each of the topics listed than I will go into here.

1. Package managers

React requires some dependencies to run. For instance, you will be writing JSX, a mixture of HTML and JavaScript, which has to be transpiled into regular JavaScript. React uses Babel for this. You will also need to install react-dom to render top-level components. Presumably, you will also want to test your React application and install a testing library. For learning purposes or single-page applications, you might want to install Create React App, which loads up a fully pre-configured application.

The easiest way to manage your package ecosystem is by using a package manager such as npm or Yarn. Overall, you should really be comfortable with installing dependencies and running scripts with your package manager of choice.

2. The Ternary Operator

If you say 'ternary operator' 3x in a row quickly, you're basically saying "The Terminator". And much like The Terminator, the ternary operator is efficient, nice to look at and designed to save the world from impeding doom (in this case the doom of disorganised code).

Let's say that in order to be The Terminator, a person only needs to fulfil 2 conditions, namely having a German accent, and an abnormally high muscle mass. In ternary operator form, this could be expressed as:

let person; 
const fulfilsConditions =
  muscleMass === "abnormally large" && accent === "German";

fulfilsConditions
  ? (person = "The Terminator 💪")
  : (person = "Not The Terminator 😥");

You will see this pattern frequently used in React, where whether or not certain elements are rendered depends on conditions being met.

3. Destructuring

Destructuring assignment might be confusing when first encountered, but is immensely helpful and a concise way to write code. Alongside other cool superpowers, it is capable of the following:

const fruits = ["🍓", "🍍"];
const [strawberry, pineapple] = fruits;
console.log(pineapple);
// 🍍

You can do the same with objects.

moreFruits = { coconut: "🥥", banana: "🍌" };
const { coconut, banana } = moreFruits;
console.log(coconut)
// 🥥

In React, destructuring assignment is used all the time to access props or use state.

4. Array methods - especially `map` & `filter`

Everybody loves a bit of Array.map in their lives. Map takes an array, transforms its elements and returns these in a new array, all without mutating the original array. It transforms the elements by calling a provided function on each of them, as below:

const numsArr = [2, 4, 25];
const doubleNumsArr = numsArr.map((num) => num * 2);

console.log(doubleNumsArr);
// [4, 8, 50]

If you're a visual learner, you might find it helpful to consider the following non-code code, where we're transforming each egg in the array into a fried egg by applying fire to it:

const eggs = ["🥚", "🥚", "🥚"];
const friedEggs = eggs.map((egg) => egg + "🔥");

console.log(friedEggs);
// ["🍳", "🍳", "🍳"]

Array.filter is similar, in that it does not mutate the original array and creates a new one. But in this case, each element is tested against a provided function, and only those elements that fulfil the condition the function specifies are added to the returned array. See below:

const animals = ["🐈 ", "🐖", "🐖", "🐶"];
const onlyPigs = animals.filter((animal) => animal === "🐖");

console.log(onlyPigs);
// ["🐖", "🐖"]

Both Array.filter and Array.map are used extensively in React, especially when manipulating data from external APIs and rendering it as components. They're sometimes even chained together, i.e., filtering the data before transforming it into a renderable format. You'll definitely need to be comfortable with using these methods.

5. Arrow functions

On a similar note, you should also be comfortable with using ES6 arrow function syntax in general. Specifically, you should understand the difference between an implicit and explicit return, otherwise your bracket game will be off. The following should make sense to you:

function addSparkles(boringString) {
  return `${boringString} ✨`;
}

//above will evaluate to the same as ⬇️

const addSparkles = (boringString) => `${boringString} ✨`;

//which will evaluate to the same as ⬇️ 

const addSparkles = (boringString) => {
  return `${boringString} ✨`;
};

console.log(addSparkles("Please make me more visually appealing"));
// Please make me more visually appealing ✨

In a React context, arrow functions can prevent bugs relating to the use of "this" because they inherit "this" from their enclosing scope. And let's be honest, they look much nicer and save ample space. So, although you can achieve anything that an arrow function does by using older syntax, it is extremely beneficial to learn the ES6 way before delving into React.

6. ES6 Modules

Files that use React will typically contain at least import React, { useState } from "react"; at the top of the file and export default MyComponent; at the bottom. If you are like me and prefer the Python way of handling imports/exports, it will be useful to brush up on how this syntax works.

Is that it? 🧐

While this list is not exhaustive, it is a good benchmark for the skill-level required to fall in love with React. If you are familiar with all of above, congratulations, you are ready for React! But even if you are still shaky on some of these concepts, you might want to delve right in. After all, there's no better way to learn coding than by... well, coding.

So You Want to Learn React?