React Intro
Tags: react, javascript, beginners, codenewbie
Published: 2021-07-18 22:26:47

## Using Node in the Command Line

**Summary**

---

- To use Node as a REPL, simply type `node` in the Terminal.
- Press the `Tab` key to get a list of Node commands.
- To exit the REPL, hold down the Ctrl and c keys twice.
- JavaScript scripts can be run in terminal using the `node` command. For instance, `node name-of-script.js`.
- `console.log()` happens to use a method called `process.stdout.write()` under the hood. `stdout` is short for **standard output**. Standard input is for data streaming into a program while standard output is for data streaming out of a program.
- We can use the `require` statement to add a script's functionality to the Node REPL. For instance: `require('./code-to-be-required.js')`. A relative path must be included.

## Immutability

**Terminology**

---

- **Immutability:** An immutable object is an object whose state cannot be modified after it is created.

**Examples**

---

We can do this if we are writing object-oriented code:

```jsx
let x = 1
x = 2 + 1
```

In functional code, we want to always use `const` like this:

```jsx
const x = 1
const newX = 2 + x
```

## Imperative Versus Declarative Programming

**Terminology**

---

- **Imperative programming:** Explicitly stating every step the computer needs to take to return a result
- **Declarative programming:** Telling the computer the result we want and allowing it to decide how to return that result

## Pure Functions

**Terminology**

---

- **Pure function:** A function that meets the following criteria:
    - Always returns an output
    - Has no side effects
    - Does not rely on external variables or state
    - Always returns the same answer for a given input

**Why pure functions?**

---

- Easier to test * Fewer bugs * No unintended side effects

## First Class Citizens

**Terminology**

---

- **Functions are first class citizens.** This means that functions have the same functionality as objects. For example, they can be assigned to variables, passed in as arguments, or returned from a function.
- **Callback:** A function passed into another function as an argument.

## Closures

**Terminology**

---

- **Closure:** An inner function that has access to variables from an outer function.

Here's an example. The anonymous function that takes `yourName` as a parameter has access to the `salutation` from the outer `welcome function`:

```jsx
function welcome(salutation) {
  return function(yourName) {
    return `${salutation}! Nice to meet you, ${yourName}!`
  }
}
```

## Currying

**Terminology**

---

- **Currying:** Rewriting a function that takes multiple arguments into a series of functions that each take one argument.

Here's an uncurried function that takes three arguments:

```jsx
function aThingIMaybeLike(howMuchILikeIt, thing, reason) {
  return `I ${howMuchILikeIt} ${thing} because ${reason}.`;
}
```

Here's how the function looks after it's been curried:

```jsx
function aThingIMaybeLike(howMuchILikeIt) {
  return function(thing) {
    return function(reason) {
      return `I ${howMuchILikeIt} ${thing} because ${reason}.`;
    }
  }
}
```

## Recursion

**Terminology**

---

- **Recursion:** A technique in programming in which a function calls itself one or more times before returning.
- **Base case:** The final condition of a successfully called recursive function.
- **Termination Case:** A conditional that's called if something goes wrong which prevents an infinite loop.
- **Tail Call Optimization:** The process by which a compiler can make a call to a function and use no additional stack space.

Here's an example of a recursive function:

```jsx
const incrementCounter = (counter) => {
  if (counter >= 3) {
    return counter;
  } else {
    console.log(counter);
    return incrementCounter(counter + 1);
  }
}

incrementCounter(0);
```

## The Problems of Classical Inheritance

**Terminology**

---

- **Inheritance:** When a child object gains the functionality of a parent object.
- **Tightly Coupled:** Code that is reliant on another piece of code to retain its functionality.
- **Loosely Coupled:** Code that is not reliant on external code for functionality.

## Spread Operator

**Terminology**

---

- **Spread Operator:** A feature of ES6 written as `...` that is used to do the following:
    - Make shallow copies of objects
    - Merge multiple objects together
    - Combine arrays
    - Pass multiple arguments into a function

### **Examples**

---

Here is the spread operator is making a shallow copy:

```jsx
const myCat = {
  name: "Murphy",
  age: 1
}

const anotherCat = {...myCat};
```

Here it is merging three objects together:

```jsx
const flagColor1 = {
  color1: "green"
}

const flagColor2 = {
  color2: "gold"
}

const flagColor3 = {
  color3: "black"
}

const jamaicanFlag = {...flagColor1, ...flagColor2, ...flagColor3}
```

Here it is combining arrays:

```jsx
const array = [1,2];
const array2 = [3,4];
const array3 = [...array, ...array2];
array3
[1, 2, 3, 4]
```

And here it is passing multiple arguments into a function:

```jsx
const array = [1,2,3];
spreadArgs(...array);
```

## Composition

**Terminology**

---

- **Composition** is the process of "composing" the functionality of an object. Instead of an object inheriting from other objects, we add smaller pieces of functionality to an object.

For instance, here's a `canEat()` function:

```jsx
const canEat = function(creature) {
  const obj = {
    eat: function(food) {
      return `The ${creature} eats the ${food}.`
    }
  }
  return obj;
}
```

Here's how we'd use composition to give a `cat` object the ability to eat:

```jsx
> const cat = canEat("cat");
```

We can use a **function factory** to add multiple pieces of functionality to an object. For instance, if we wanted to create a creature that can both eat and sleep, we'd do something like this:

```jsx
const canEat = (creature) => ({
  eat: (food) => {
    return `The ${creature.name} eats the ${food}.`
  }
});

const canSleep = (creature) => ({
  sleep: () => {
    return `The ${creature.name} sleeps.`
  }
});

const sleepingEatingCreature = (name) => {
  let creature = {
    name
  }

  return { ...creature, ...canEat(creature), ...canSleep(creature) };
};
```

## State

**Terminology**

---

- **State**: Any data we want the computer to remember.
- **Store**: An object provided by Redux with a few methods on it to hold and manipulate an application's state.
- **Observer Pattern**: A software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
- **Pubsub Pattern:** A pattern similar to an observer pattern, except that there is a mediator between publishers and subscribers (who are unaware about the existence of each other).

## Storing State in Closures

**Terminology**

---

- **Lexical Scope:** In a nested group of functions, the inner functions have access to the variables and other resources of their parent scope.