Prerequisites

To follow this course, you should be familiar with the following topics:

What is React?

React (sometimes called React js) is a JavaScript library that originated at Facebook for building interactive user interfaces or UIs. It lets developers create sizeable web apps or complex UIs by integrating a small, isolated code snippet.

React js, in some quarters, is often called a framework because of its behavior and capabilities to build full-fledged applications. However, it is technically a library; it requires more libraries to form complex solutions. For instance, we will need additional libraries to solve standard application requirements like routing, data fetching, etc. On the other hand, JavaScript frameworks like AngularJS, Vue.js, and Ember.js comes bundled with nearly everything to build a complete application.

Declarative Programming and React

Coming from vanilla JavaScript, giving an HTML div container like so:

<body><div id="root"></div></body>

We can render a paragraph in the div by writing the following code in a script file:

const root = document.getElementById('root');
const paragraph = document.createElement('p');
const paragraphContent = document.createTextNode("I'm a paragraph!");
paragraph.appendChild(paragraphContent);
root.appendChild(paragraph);

In the code above, we were saying:

  1. Get the div element with root id.
  2. Create a p element.
  3. Create a text node for the p element.
  4. Add the text to the p element
  5. Finally, add the p element in the div.

When we provide step-by-step instructions to the compiler on how to perform a task (in our case, updating the UI), we use the imperative programming style. However, React lets us declaratively describe what we want instead of providing the steps, and it will figure out how to do the task for us.