Suppose you want to build a web application. How would you go about it? Unless you have been hiding away somewhere, you are probably aware that there are many frameworks out there that can help you construct and organize your web page. However, you might be wondering, if you already know HTML, CSS, and JS, why use a framework at all, instead of just keeping with vanilla JS, and possibly some library like jQuery or Lodash? After all, a framework imposes some rules and ways of working that you could consider to be offputting or bothersome.

You also have to learn how to use the framework, of course, and you probably won't benefit from it until you become proficient. So, there are several possible answers for the why? question – even including Sure, don't use any framework! – which could be just fine for a very small, simple project:

• Frameworks provide you with a well-tested, solid way, to organize your project
• Frameworks usually scale better for large size applications
• Frameworks let you work at a higher level of abstractions (for example, creating and using your own components) and deal with the nitty-gritty aspects of getting everything to work
• Ramping up new developers is usually simpler: if they know the framework, they already know where things are supposed to go and how they interact with each other

Of course, as I mentioned previously, all of these advantages do not apply for small projects, with a few developers.

There's one extra reason, however, that can be considered even more important. Frameworks help you with the difficult task of keeping state (data) and view in sync. With large applications, a change or event that happens in one corner of your application may have implications elsewhere, in other places of the same application. Trying to wire things up so that all of the changes are correctly propagated throughout your code isn't a simple endeavor.

Most frameworks automatically generate the view from the data, and whenever anything changes in the state, they do whatever's needed to update the screen in an optimal fashion. For example, say you had a list of doodads somewhere. Then, you call a webservice and you get an updated list—most doodads match, but some are added and some are missing. You could, of course, just recreate the list from zero, but that wouldn't look very good, and if you decide to regenerate the whole screen every time something changes, performance will suffer. Usually, what will happen is that the framework will compute the differences between the current list and the new one, and will correspondingly update the HTML code, adding or removing DOM elements, so that the list is once again correct. Doing all of this by hand, extending this to your whole application, would be a tad too much to do!

There are several well-known frameworks such as Angular (by Google), Vue, Ember, Backbone, Knockout, and so on. (Sometimes you feel that a new framework is born every day!) We'll be using React (by Facebook) in this book.

React also extends to doing mobile applications with React-Native, which we'll see later in this book in Chapter 11, Creating Mobile Apps with React Native.

In this recipe, we'll install the necessary packages and build a very basic first web application of our own.