Understand React and JavaScript frameworks

React is a JavaScript library for creating user interfaces. It seeks to make complex web applications less time-consuming to build, easier to maintain, and more performant. It’s one of the most popular JavaScript web frameworks in use today, and has often led the field in performance and adoption of new design patterns.

React also has a huge and active worldwide community and support from Facebook, making it a reliable choice for developers wondering where to invest their time.

In this course we’ll learn about the basics of writing an application in React, and create a simple application that allows users to make and manage a small list of products in a store.

Key Concepts

#Let’s take a look at a few of the key ideas in React. You’ll hear these terms thrown around a lot on the internet and in discussions of javascript frameworks and single page applications in general, so it’s worth learning about what they mean. 🤔

SPAs (Single Page Applications)

When we talk about Javascript “apps” we’re usually talking about SPAs. The acronym refers to websites that handle navigation in-page, without loading new pages via HTTP. An SPA website usually loads once, and after that manages all links and form submissions with Javascript through AJAX requests in the background. Changes to the page, and even URL address updates, are handled by Javascript as well.

The Virtual DOM

The virtual DOM is a Javascript object that describes the current state of your application’s web page in the simplest way possible. There is, of course, another Javascript object that already describes the state of the web page: the Document Object Model, or DOM.

Why have two DOMs?

The actual DOM is the browser’s representation of the web page, and serves many uses. It is also a very large object and fairly costly to interact with. The Virtual DOM, on the other hand, is your application’s representation of the web page, and is much smaller and less costly to update.

The virtual DOM allows the framework to keep track of its own idea of what the page should look like, and to compare that with the previous state of the application, without incurring all the overhead of constantly modifying and reading the browser’s actual DOM object. This turned out to be great for performance, and some version of this approach has been adopted by many other JavaScript frameworks.

Components

In React and most other Javascript frameworks today, instead of writing a web page as one long page of nested HTML elements, we define components that encapsulate blocks of functionality and design. They can be as small or as large as you like, but, as with functions in Javascript, well-organized code produces components that are relatively easy to read and understand. 😎

Web Components

Browsers are moving toward adopting a different but related concept called Web Components. These are reusable page elements that encapsulate pieces of functionality, such as a search input that offers live previews of search results, or a button that shows a tooltip on hover.

Web Components allow you to build complex functionality into a custom HTML element that you can share and reuse on any web page without worrying about whether it’s compatible with other JavaScript or component libraries on the page.

Know that Web Components are a native web technology, and are distinct from React components. They complement React components and are interoperable with them.

Modularity

React is not a full-featured JavaScript framework. Its job is to manage elements on the web page, and make sure that they reflect your data correctly. It leaves it up to the programmer to decide how to handle communication with the server. 💻🔄🖥

The fact that React is modular in this way means that it can be used in many different contexts to solve problems with rendering performance and code organization! In fact, the React community has developed a number of solutions like Flux and Redux to complete your application architecture.

This modularity also means that developers have many other choices to make around developing a frontend application, beyond just “we’ll use React”. There are different architectures, libraries, and toolchains that make up a React app’s environment, and many of these configurations have their own resources and community. It’s a very innovative ecosystem, but there’s a lot to take in.

HTML in Javascript, and JSX

HTML was originally designed as a tool for creating mostly static documents that users could browse on the world wide web. In the early days, Javascript was useful for enhancing these pages with simple interactive elements like drop-down menus. Javascript was about manipulating a document whose main definition was in HTML.

The Javascript on today’s web pages has become increasingly complex, though, to the point where we often are not sure whether to look to the HTML or the Javascript to understand the document. 😬 This kind of Javascript is full of snippets of code identifying places in the HTML document by selectors, and often building up new elements to insert into the HTML that weren’t there in the original source document, or modifying the original document in other ways.

Frontend frameworks solve this problem by turning the relationship around, and defining HTML inside Javascript. They avoid “selector soup” 🍜 by organizing the rendering logic in a consistent, reproducible form that is easy to read and reason about.

Each framework has a slightly different way of handling HTML in Javascript. These approaches are called templating languages. Most frameworks separate Javascript from HTML-defining templates in separate files, but React uses a template language called JSX, which literally combines HTML and Javascript into a single file. This means that often, in React, you’ll be writing code in JSX, rather than strict Javascript. Don’t worry though, it is really just an augmented form of Javascript, and everything you have learned about Javascript will still apply here. 👌

Javascript Frameworks and Delayed Rendering

The client-side rendering that single page applications do means delayed rendering and delivering more JavaScript to the client. This is a limitation that all JavaScript frameworks have, although it is ideally mitigated by faster interaction after the page has loaded.

Since these kind of web apps don’t serve their main content directly as HTML, there is a delay after the initial HTML page is loaded, before Javascript renders the application. On mobile devices especially, this can be a long delay, as the framework often has a large library to download in addition to the app code that the developer writes themselves.

Frameworks are increasingly working around this problem by creating server-side rendering engines in Nodejs that can pre-render the app as static HTML, so that the browser has HTML to read immediately on page load. React, Ember, and Angular 2 communities are all developing versions of this technology.

Now that you have some background on key React concepts, Next part is how to build your first app!

Stay Tuned for part 02