# React part I

## What's React?

React is a Javascript-library for making user interfaces. It is invented and maintained by Facebook. There are several flavours of React, such as:&#x20;

* React.js *for* *web interfaces*
* React Native *for* *mobile applications*
* React 360 / React VR *for virtual reality*
* ReasonReact *a library* *for using React.js in conjunction with ReasonML (a programming language by Facebook)*

React has a couple of unique selling points:

* It's declarative
* It is component-based
* Learn once and write anywhere

{% hint style="info" %}
When I talk about React, whenever ambiguous, I refer to client-side-rendering as opposed to server-side-rendering.
{% endhint %}

### Declarative

When writing React-code we like to tell **what** we want our Javascript to do. Not how we do it. This is a functional and declarative way of writing Javascript.

Imagine we want to create a function that takes an array and doubles all the numbers in that array. We could write it as such:

```javascript
const double = num => num * 2; 
const doubleAll = nums => nums.map(double);

doubleAll([1, 2, 3]) // [2, 4, 6]
```

We try to avoid constructs like `for`-loops and `let`-bindings. Instead we prefer immutability.&#x20;

When working with arrays we have a few nice declarative methods at our disposal, like *map*, *filter and reduce:*

```javascript
[1, 2, 3].map(num => num + 1) // [2, 3, 4]
[1, 2, 3].reduce((total, num) => total + num, 0) // 6
[1, 2, 3].filter(num => num < 3) // [1, 2]
[1, 2, 3].every(num => typeof num === "number") // true
[1, 2, 3].some(num => num === 2) // true
[1, 2, 3].find(num => num === 1) // 1
```

You can also chain methods like *map* and *filter:*

```javascript
[1, 2, 3]
    .map(num => num * 2)
    .map(num => num + 1)
    .filter(num => num % 2 === 0);
    // etc etc
```

{% hint style="info" %}
When you need to find only 1 value in an array, use **find**. If you need to find multiple values, use **filter**.&#x20;

If you don't care about the value, but you just want to make sure there is a specific value present, you can use **some**. If you want to make sure EVERY value meets a certain condition, use **every**.&#x20;
{% endhint %}

See the official documentation at <https://reactjs.org/> for more information.
