# Introduction To ReactJS

An introduction to ReactJS for beginners.

What Is ReactJS?
----------------

ReactJS is a Javascript Library for building User Interfaces. It was initially created by Jordan Walke in Facebook. First time it was used in 2011 to display the news feed.

It was then made public in 2013, and since then was used in thousands and thousands of different apps and websites, including Facebook, Instagram and even Battlefield game series.

ReactJS Key Features
--------------------

What makes React so special? The core idea behind ReactJS is to provide a convenient way to describe UI of your application as a tree of encapsulated **components**.

It does it by providing an API to describe those components in a **declarative** way. ReactJS will update UI of your application when state of your application will change. And it will do it efficiently so only components that were affected by that data change will be re-rendered.

Now you may see those terms and wonder, what does declarative mean, and what the heck is component.

### Declarative

**Declarative** is the opposite of **imperative**.

When you write **imperative** code you specify sequence of statements that should be executed in that order to produce desired result.

    var mountingPoint = document.querySelector("#root");
    // Find mounting point
    
    var header = document.createElement("h1");
    // Create HTML node
    
    header.innerHTML = "Hello Imperative Code!";
    // Add content to the new element
    
    // Insert the element after our target element
    mountingPoint.appendChild(header);

Opposed to that when you write **declarative** code - you describe what result do you want to get instead of specifying the steps needed to achieve that result.

Here is how same thing would look in ReactJS:

    import React from "react";
    
    export default () => <h1>Hello React Code</h1>;

Good analogy is HTML, as it is a **declarative** way to describe layout of web pages.

### Component Based

Second important concept is **component**. In fact it is the central part of ReactJS paradigm.

Basically it’s an isolated piece of interface, that can contain some layout, some bound state and some logic. Component can be as simple as just a button or text input, or it can be complex and be composed from many other simpler components.

 [![react component structure](/static/4342f0b06151a8f35ef66bb20f7d4afa/b9e4f/react_component_structure.png "react component structure")](/static/4342f0b06151a8f35ef66bb20f7d4afa/a9e43/react_component_structure.png) 

Components can have children components inside of them, that can have their children and so on.

This allows you to describe your application UI as a nested tree of components.

 [![reactjs component tree](/static/60554009d2168afef8ae80e0c74818b7/50336/component_tree.png "reactjs component tree")](/static/60554009d2168afef8ae80e0c74818b7/50336/component_tree.png)