Mastering React: Essential JavaScript Concepts for Web Developers
Tags: react, javascript, webdev, learning
Published: 2023-11-12 04:38:07

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](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks). 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](https://react.dev/learn) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_overview), 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](https://en.wikipedia.org/wiki/Variable_(computer_science)) 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](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/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.

```js
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.

```js
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.

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

A variable can be any valid [JavaScript data type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_overview).

## Objects and Arrays

The most common data structures you will encounter when working with React are [Objects and Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).

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.

```js
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.

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions): 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:

```js
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.

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), a separate `jsx` file somewhere in the filesystem. The component is `export`ed from its location, then `import`ed where it is needed.

Take a look at this hypothetical directory structure.

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

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

```js
// 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 />`.

```js
// 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator), an `if...else` alternative, comes in handy in such a situation.

```js

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

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

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

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

## Object destructuring

[Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 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.

```js
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).

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.

```js
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.

```js
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.