React

This section will focus on the view-library React. It was created by Facebook and it's popularity is continuously increasing. Currently, it is the most popular JavaScript framework, according to State Of JavaScript.

The main concepts of React are the following:

Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

This basically means that React understands the current state of an application and only updates the parts that really need to. That makes it far more performant than re-rendering the entire view when something changes.

Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

This point is very important in larger application. Instead of writing one huge view, you divide everything in small components. This has a few strengths, when building a big application:

• Each component is isolated and does not know anything about the other components. This way, they are far easier to maintain. Another side-effect of this is, that multiple people can work on the same project at once, without interfering with each other.

• Managing state becomes way easier. Each component has it's own state, so can't conflict with the other components. For a global state there libraries like Redux, which provide a way to implement a single source of truth. This topic will be covered in the next section.

Learn Once, Write anywhere

We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React Native.

This one is a huge plus for React. It can run in the Browser or it can be pre-rendered in Node. It's also possible to build fully native Apps with React-Native. That's particularly good since you don't have to learn anything new. The key difference compared to Write once, Run anywhere is, that you can't really use the exact same code for different environments. That's okay, since a mobile app works differently than an web application for example. With React, you learn one concept, which you can apply on any platform.

JSX

React applications aren't written in normal HTML, they are written in JSX. That might sound weird at first, because many other view-frameworks append HTML rather than replace it. At first you load your application from the index.html file. Once your application is loaded, React mounts into the DOM and renders out the JSX. It looks like this:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }
}

ReactDOM.render(<HelloMessage name="Emanuel" />, mountNode);

Instead of writing the HTML inside a .html file, it's written inside the JavaScript. The good thing about this is, that the logic and HTML of a component are at the same place. Not like traditional applications where the full application is written inside .html files and later on altered with something like jQuery. This way each component works on its on own, it doesn't really care what the other components are doing at the time.

Since a browser can't read JSX as it is written above, it has to be transpiled. After the code is transpiled it looks something like this:

class HelloMessage extends React.Component {  
  render() {  
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name 
    ); 
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Emanuel" }), mountNode);

Basically it's all JavaScript.