React is a very popular library for creating user interfaces. React is component-based and declarative and it allows you to compose an interface built up with a bunch of small components, with each component having its own functionality and all the HTML/CSS/JS. The Component-based architecture is like writing a regular program that is built up of a bunch of functions, but instead, you’re applying this to components, where you have multiple small components that build up the UI. This allows you to encapsulate complexity into components, and then bring these components together to build the overall interface.

As an example, we create a Component called Demo, where it renders a h1 and an OtherComponent component.

import OtherComponent from './'
export default class Demo extends Component {
  state = {
    year: 2018
  }
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        <div>
          <OtherComponent year={this.state.year} />
          <p>Current Year: {this.state.year}</p>  
        </div>
      </div>
    )
  }
}

Why React

Many of the applications we will be building will utilize React. This is because:

• Working with and manipulating the DOM is hard, especially for more complicated applications.
• React is Javascript and has a very small API, allowing one to pick up very fast
• React is declarative, meaning we describe User Interfaces with React and tell it what we want (not how to do it)
• You can use reusable, composable, and stateful components in React
• React significantly increases the performance of web applications

Along with awesome, immutable state management in redux with React router to provide it with multiple pages, React is a powerful tool that we trust for building the Frontend for many of our applications.

We generally will use vanilla React with create-react-app. However, it has a huge learning curve for beginners, having to learn client-side routing, page layout, Single Page applications, etc. We are currently trying to figure out the best way to teach this since many applications will require the use of Redux, React Router, and Flow (type checking since propTypes have been deprecated), which is a ton of stuff to learn in a short timespan we give you.

Why is React Fast?

Normally, web applications would directly build or modify the document object model, which utilizes expensive operations. However, React builds an additional layer between the application and the DOM, called the Virtual Document Object Model, or virtual DOM. This layer increases efficiency by constructing/applying changes to the virtual DOM and then calculating the minimal difference between the virtual and real document object models, finally updating the actual DOM in as few steps as possible.

React Components

One of the reasons that React is fast and composable lies in its use of components. A React Component is essentially the same as functions that take a parameter called props, which are synonymous to inputs, and returns a React element that describes a section of the user interface. Code that's in the component can be reused by using the component in a similar manner to using HTML tags, leading to modular, maintainable, and more readable code. In React, components can be written as a function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

This is a valid component since it takes a single parameter props and returns a React element (remember that the HTML isn't actually HTML with JSX).

However, another way to write components in React involves creating a class: