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.
The Virtual 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.
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.
Know that Web Components are a native web technology, and are distinct from React components. They complement React components and are interoperable with them.
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.
As a result, in our course we'll be focusing on React as a standalone UI library, and we'll use a build tool, create-react-app, that abstracts away most of the toolchain choices for you. Just be aware that React is often paired with a library like Flux or Redux in practice, and either or both of those libraries would make an excellent next step in learning about the React ecosystem when you are done with this course.
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, let's take a look at how to build your first app!