React Theory and Architecture

Hello, and welcome to React, Facebook's popular DOM manipulation toolkit.

This course will teach you React and Redux. Throughout, you'll find code samples, mini exercises, and more involved exercises that you'll want to complete in an editor. We learn code by using it, by sitting with it, and trying to make it do what we want. Attempt all the exercises that make sense to you, you can do lots of them right in the browser. This will cement your knowledge.

Best of luck with it. Tally ho.

About React

React is a DOM manipulation toolkit based around the idea of components. A component is a like a new DOM node that we define. It has inputs, via properties, and it can emit "events". It may hold its own logic and data, or it can be presentational, only concerned with data output.

For example, we might invent a new search component that can handle a user searching for a thing, and use it like this:

< Search value = "Robert Maxwell" onSearch = {handleSearch} />

When we write React, we spend most of our time composing components and linking them together so that data can flow around our app.

The Virtual DOM

One of React's most clever features is the Virtual DOM. We never manipulate the DOM directly in React. Instead we write everything to a Virtual DOM, which React maintains. Once we are finished React will diff (compare) the real DOM against the virtual DOM, and make the minimum set of changes.

In the Pen below, we use regular DOM scripting to create 100,000 list items in an unordered list. Please have a think about whether your machine is up to the job before clicking the render button. To give it the best shot, I've written the list items to an orphan DOM node, then appended that in a single operation, so as to only trigger one reflow.

On my Macbook, it takes about seven seconds to render. If I click it again, that's another seven seconds.

See the Pen Rendering a large DOM (before) by Nicholas Johnson (@superluminary) on CodePen.

Here's the same thing in React. As you can see, it's significantly shorter, but that's not all. The initial render takes around 8 seconds for me, slightly longer but subsequent renders complete in less than a second.

That's right - once it's running, React is faster than DOM scripting.

See the Pen Rendering a large DOM (after) by Nicholas Johnson (@superluminary) on CodePen.

Flux and Redux

We can build some pretty complex applications using plain old React, but at a certain point we might want to introduce Flux.

Flux is a design pattern, rather than a technology. Flux gives us a store that can be attached to any component in our app. When the store is modified, the app will rerender, and the front end will become consistent with the data. In a nutshell, that's about all there is to it.

Redux is the most widely used Flux store. It has some really nice features. More on Redux later.

JSX

React is commonly teamed up with a JavaScript preprocessor called JSX. This lets us embed HTML tags right into our JavaScript. It's much nicer than it sounds, and you're definitely going to want to use it.

When you are ready, move on to the next section.