React is a java script library and not a framework.React is not a complete solution to develop an end-to end application.We often need more libraries to be included in react in order to develop an end-to-end application.
Though it's possible to create an end-to-end application with react , react doesn't really care about other parts in the application except the view. It is a library built with a motive of building user Interface.
Any device which can understand JavaScript can be programmed with React.With react we need not manually build user interfaces with native web API's and Java script.It's also necessary to understand that react is declarative.
What is declarative Programming & Imperative programming
Declarative Programming focuses upon what you do imperative programming focuses not on how you do it.
example:
Task : To make an omelet
Imperative approach:
1)Take a egg
2)Take a bowl
3)Beat the egg
4)Add Salt
5) Heat a pan
6) Put the mixture inside the pan
Declarative approach:
1)Make an omelet
The difference between declarative and imperative approach is that, declarative focuses only upon what to do and not how to do.
Declarative approach doesn't describe the flow of accomplishing a task whereas imperative approach describes the complete flow of how the task is being accomplished.
Though There is an underlying imperative approach in every declarative approach, we are not really bothered about the approach.
As said earlier , React is declarative meant that react already knows how to do things and we need not manually describe the steps of how to accomplish the task. It's just enough to tell "what to do " and need not include the control flow which describes " how to do".
In technical terms react converts our declarative statements into user interfaces in the browser.The user interfaces built with react are not static but dynamic.
Design Concepts Of React.These are the main reasons why react has become more popular
1) Components
Components are just like functions which we use in any programming language.They can be reused anywhere in multiple user interfaces. We can also have components inside components.
2) Dynamic updates
When a input changes , the user interface of the component also changes dynamically by updating the Document Object Model.
3)Virtual representation of views in memory
In react , we write html using java script.By using javascript to create html content instead of pure html allows react to have a virtual representation of html in the memory.This virtual representation of html is known as Virtual DOM.
With this concept of virtual DOM, react renders the html virtually first and whenever there is a change of state , it never rewrites the whole DOM instead just inserts the difference found between the new tree and the old tree as it has both the trees in the memory.This of writing DOM is known as Tree reconciliation.
In a nut shell here's a basic description of react
React is fast
React is modular
React is not opinionated
React is flexible
React community support is Great
React is Scalable
Hello World Example in React
ReactDOM.render(
<h1>Hello world</h1>,
mountNode
);
The above syntax is not html and is JSX.
ReactDOM.render takes two parameters:
a) JSX object
b) The place where component should be displayed
What is JSX
We are familiar that react uses JSX to build its components. JSX is syntax extension for javascript. Though it looks much like HTML, do not assume it to be HTML, it is JSX which is used by react.
A JSX compiler will translate the JSX into javascript so that the browser could understand it.
ReactDom is name of a javascript library which contains methods to deal with DOM.
ReactDom.render is one of the method which is frequently used in order to render the content on the browser.
It is the most common method which renders JSX. It takes a JSX expression then creates a tree of DOM nodes and then adds that tree to DOM.
Thus by adding to the DOM, the JSX expression is visible on our browser.