---
title: React
---
# React
React is a JavaScript library for building user interfaces. It was voted the most loved in the "Frameworks, Libraries, and Other Technologies" category of Stack Overflow's 2017 Developer Survey.1
React is a JavaScript library and React applications built on it run in the browser, NOT on the server. Applications of this kind only communicate with the server when necessary, which makes them very fast compared to traditional websites that force the user to wait for the server to re-render entire pages and send them to the browser.
React is used for building user interfaces - what the user sees on their screen and how they interact with your web app. This interface is split up into components, instead of having one huge page you break it up into smaller pieces known as components. In more general terms, this approach is called Modularity.
- It's declarative: React uses a declarative paradigm that makes it more readable.
- It's efficient: React computes the minimal set of changes necessary to keep your DOM up-to-date.
- It's flexible: React allows the user to render one or many components to the browser.
- And it's compatible: React works well with many popular libraries and frameworks.
## Why learn React?
1. React involves Composition that is lots of components wrapping up the functionalities into an encapsulated container.
Many popular websites use React implementing the MVC architectural pattern. Facebook (Partially), Instagram (Completely), Khan Academy (Partially), Codecademy (Partially), New York Times (Partially), Yahoo Mail (Completely), Dropbox's new photo and video gallery app Carousel (Completely) are the popular websites known to be using React.
How are these large applications built using React? The simple answer is by building small applications or components.
Example:
```jsx
const Component2 = () => {
return (
);
};
const Component3 = () => {
return (
);
};
const Component1 = () => {
return (
);
};
ReactDOM.render(
,
document.getElementById("app")
);
```
2. React is Declarative for most part in which we are concerned more with What to do rather than How to do a specific task. Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow.
Declarative programming comes with certain advantages such as reduced side effects(occurs when we modify any state or mutating something or making an API request), minimizing mutability(mostly abstracted), enhanced readability, less bugs.
3. Unidirectional dataflow. UI in React is actually the function of the state that means as the state updates it updates the UI as well. So our UI progresses as the state changes.
## Advantages of React
Some reasons to use React are:
1. Fast. Apps made in React can handle complex updates and still feel quick and responsive.
2. Modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's [maintainability problems](https://en.wikipedia.org/wiki/Spaghetti_code).
3. Scalable. Large programs that display a lot of changing data are where React performs best.
4. Flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. [There's room to explore](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f).
### Virtual DOM
React's magic comes from it's interpretation of the DOM and it's strategy for creating UIs.
React uses the virtual DOM to render an HTML tree virtually first, and then, every time a state changes and we get a new HTML tree that needs to be taken to the browser’s DOM, instead of writing the whole new tree React will only write the difference between the new tree and the previous tree (since React has both trees in memory). This process is known as Tree Reconciliation.
### Reconciliation
React has a smart diffing algorithm that it uses to only regenerate in its DOM node what actually needs to be regenerated while it keeps everything else as is. This diffing process is possible because of React’s virtual DOM.
Using the virtual DOM, React keeps the last DOM version in memory and when it has a new DOM version to take to the browser, that new DOM version will also be in memory, so React can compute the difference between the new and the old versions.
React will then instruct the browser to update only the computed diff and not the whole DOM node. No matter how many times we regenerate our interface, React will take to the browser only the new “partial” updates.
## React from Scratch
Would you like to get started learning the basics of React without getting bogged down creating a development environment?
Chances are that if you are new to web development that setting up a development environment can leave you feeling a little intimidated when you are just trying to learn React or just learn about React for the first time.
In this article we are going to look at how we can get started with React using only a text editor and a browser and nothing else.
### 1 — Set Up Boiler Plate Code with Emmet
Let’s get started with step 1. We’ll begin with a file in our browser called “index.html”. We’ll begin with the boiler plate code HTML code. For a quick start I recommend using Emmet with whatever text editor you have and on the first line typing in `html:5` then pressing the shift key to get the code below. Or you can go ahead and copy and paste the code from below.
```javascript
html:5
```
This will result in the following code:
```javascript
Document
```
We can fill in the title of “Time to React!”.
This content will not appear in your webpage. Anything in the head section of the HTML file will be meta data that our browser will user to interpret our code in the body section. This title is going to be what appears on the tab for our page, not actually on the page.
### 2 - Get Script Tags to Harness the Power of React and Babel Libraries
Ok, item one is checked off of our list. Let’s look at item two. We are going to set up our developer environment by using script tags to bring in React and Babel. This is not a real life developer environment. That would be quite an elaborate setup. It would also leave us with a lot of boiler plate code and libraries that would take us off subject of learning React basics. The goal of this series is to go over the basic syntax of React and get right into coding.
We are going to use `
...
Time to React!
```
You are free to use more updated versions of these libraries as they come out. They should not create any breaking changes for the content we are covering.
What are we doing here?
The: HTML `
React has not rendered yet
React has not rendered yet
React has not rendered yet