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:

• 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

When I talk about React, whenever ambiguous, I refer to client-side-rendering as opposed to server-side-rendering.

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:

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.

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

[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:

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

When you need to find only 1 value in an array, use find. If you need to find multiple values, use filter.

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.

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