Mastering React: Essential JavaScript Concepts for Web Developers

Here is the typical roadmap for a modern frontend developer:

HTML5 => CSS3 => JavaScript => JavaScript Library ...

Well, mostly, though not always.

And, there are many options when it comes to choosing a client-side JavaScript library. But there is definitely no doubt that React is a popular choice among beginners. A good choice, by the way.

The focus of this article is for those who choose to continue on the path to frontend development with React. Specifically, the amount of JavaScript you will need to master before you can write a Hello World component in React and not feel lost.

Where to begin

From personal experience, it is so much easier if you learn JavaScript and then try a library. But not take both simultaneously. It's worse when you try to do it in reverse.

How does a front-end developer decide that "well, I have learned enough JavaScript to be able to grasp React principles." When is it too early? When is it just about time to get into it?

React is a JavaScript library that makes writing web components as easy as a, b, c...Maybe.

To be able to learn React you will need to be comfortable with your JavaScript. Some of the things you will use more often:

• variables: let, const
• functions: regular, arrow
• objects: {}
• arrays and their methods: [], map()
• destructuring
• template literals
• ternary operator
• ES modules import/export
• spread syntax: ...[]

If you master these JavaScript core concepts, React will not feel like magic. You will be able to understand how the thing does its thing. You will learn React much better. (Although I am not making promises about that 😜)

Let's dive into these JavaScript concepts, learn what each is, and how it relates to React.

Variables

Variables are everywhere in the world of programming. Variables are containers: to store program data and pass it around from one part of a program to another.

In Javascript, there are two ways to declare variables: using let or const.

The let keyword is used to decalare variables whose value might change at different parts of the program. You can reuse these variables as you wish.

let count = 0

count is name of the variable, whose value is 0 initially. The value of count can change, or be reassigned a different value during execution.

count = 1

On the other hand, const is used to declare constants. Constants are variables that cannot be reassigned other values. You cannot reuse these variables.

const url = "https://dev.to/"
const visitors = 12
}

A variable can be any valid JavaScript data type.

Objects and Arrays

The most common data structures you will encounter when working with React are Objects and Arrays.

An object stores key-value pairs, aka properties. The key is a string while the value of the property is any JavaScript data type, or another object.

const user = {
  name: "Joseph Maina",
  country: "Kenya"
}

Note that, even if an object variable is declared as a constant, it can be changed by adding, updating or removing its properties.

user.city = "Nairobi"

Arrays store a collection of data under a single variable name. Arrays are useful when you want a render a group of similar components in React. We shall talk about this later in this article.

Function expressions and arrow functions

Functions are processing factories in a program. Data gets into a function, processed data comes out of the function. There are two ways in which you can create functions in JavaScript: regular function expression that use the function keyword, and the arrow function where that keyword is not used.

In fact, React web components are reusable JavaScript functions that define a part of the user interface (UI). A React component receives data, aka props, processes that data, and returns what should be rendered on the UI.

Here is an example of a regular function:

function Hello(props) {
  // props is the data passed into this function

  // process the data here
  let greeting = `Hello ${props.name}` // props is an object

  // then return the results
  return <h1>{greeting}</h1>
}

Arrow functions can also be used.

const Button = () => (
  <button>Click me!</button>
)

I love arrow function components. Aren't they just beautiful!

ES modules import/export

In React, a component can be implemented in its own module, a separate jsx file somewhere in the filesystem. The component is exported from its location, then imported where it is needed.

Take a look at this hypothetical directory structure.

.
|-- pages
|   |-- about.tsx
|   |-- home.tsx
|   |-- ...
|-- components
|   |-- button.tsx
|   |-- header.tsx
|   |-- ...
|--...

The button.tsx file exports a <Button /> component.

// components/button.tsx
export default const Button = () => (
  <button>Click me!</button>
)

The component can be imported as required. For instance, the home component might use the <Button />.

// pages/home.tsx
import { Button } from "./components/button"

function Home() {
  return (
    <main>
      <h1>Home component</h1>
      <Button />
    </main>
  )
}

Ternary operator

Sometimes you want to render a component conditionally. For instance, you may want to show a <Login /> button to users who are not logged in. Otherwise, you want to show a <Logout /> button.

A ternary operator, an if...else alternative, comes in handy in such a situation.

{isLoggedIn ? <Logout /> : <Login />}

An AND (&&) operator can be used when you want to show only one component conditionally.

// JavaScript expressions are enclosed in {...}
{name && <Hello name = {name} />}

The <Hello /> component will be rendered only when name is available.

Object destructuring

Destructuring is used to unpack the properties of an object. You can use destructuring to pick the properties required by a React component.

In the <Hello /> component we saw earlier, instead of passing a generic props object, we can choose the specific properties needed by the component.

const Hello = ({ name }) => {
  let greeting = `Hello ${name}`
  return <h1>{greeting}</h1>
}

This <Hello /> component receives the name property and displays a greeting. The props passed from the calling parent component might include other properties that are not required by this component.

Array map() method

The other thing you will need to know as you prepare to begin your wonderful journey in frontend development with React is the Array.map() method.

The map() method calls a function on each element in an array and creates another array with the results.

This method is useful in React when you want to render several components that have the same structure.

A real world example would be a list of items on an e-commerce site. Each item on the list might be rendered as a card having an image of the item, a small description and the price of the item. The page may have several of these cards displayed.

The products maybe stored as an array.

const products = [
  {
    item: "mug",
    id: 1,
    description: "one liter",
    price: "5"
  },
  {
    item: "hat",
    id: 2,
    description: "adjustable strap",
    price: "15"
  },
]

And rendered on the page with the map() method.

function ProductList({ products }) {
  return (
    {products.map(product => (
      <Card product={product} />
    ))}
  )
}

What next?

That was just a brief overview of the things you need to be aware of as you advance in the journey of becoming a frontend developer.

Once you have mastered these concepts go ahead and have fun with React. Crush React and build awesome products for yourself and for your clients. Then keep going.

Let me know in the comments what other essential concepts I might have left out.