What is React JS?
React JS is a library of JavaScript for Building UI for Web and Mobile App development. For Mobile applications, it’s known as React Native.
React is not a framework like Angular or Vue.js. It’s much flexible than frameworks and we can use many other libraries besides this.
What is the Declarative?
In plain or vanilla JavaScript we write Imperative Code. That means we tell JS what we want to do and how to do it.
One of the Examples is to Create an array of names. Then Iterate through it in for loops and console the log.
In React we just declare what we want to make in the UI. We don’t have to code all the steps. React translate our declaration and make changes accordingly.
Let’s think of the previous example. The Array of names.
Now we use the .map() function to print all the names like this:
names.map(name => console.log(name));
In this example, we didn’t make any loop for iteration, no value to where it will stop, and no index to access each name.
Another Example
<button onClick={doSomething}>Click to do something</button>
this example we didn’t have to add any event listener (.addEventListener()) to run the function.
End of the day React converts everything to JS to run the code.
How React Build/Create User Interface?
Well, React uses JavaScript Objects to build the User Interface instead of using string templates like other frameworks.
These objects are lightweight, React uses the elements as we describe what we want and then react to manipulate real DOM.
ReactDOM.render
This is the one who manipulates the browser’s DOM.
It takes two arguments,
one is what to render (React Element)
the second one is where to Render(a valid DOM node).
React.createElement
The JS Objects that React uses to build UI we talked about earlier. This is where we use that.
It takes three arguments.
- The HTML element we want to have.
- The DOM property/attributes. Like: ClassName, id, etc.
- The content we want to show in the DOM.
All together We’ll have an example like this:
const element = React.createElemet(
‘div’,
{className: “greetings” },
“Welcome to React World!”
);ReactDOM.render(
element,
document.getElementByID(‘root’)
);
Check out the list of React supported HTML Attributes: https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes
Virtual DOM
Virtual DOM is something that does not directly manipulate DOM every time.
It’s a like blueprint / lightweight copy of JS DOM.
Virtual DOM does not show up on screen it works under the hood.
When the first time React renders something every virtual DOM object updates. But it’s not inefficient like real DOM, it gets updated quickly.
After that, if any changes are made, React compares the previous version of virtual DOM and the currently updated DOM. So it changes only that portion which is an update and changes that to Real DOM.
What is Diffing?
The process of comparing the latest virtual DOM with the pre-updated version of virtual DOM and Then figuring out which element/part has been changed exactly in the virtual DOM. This is a diffing algorithm that is a game-changer in Front End development for high-performance apps.
Reconciliation
Reconciliation and diffing is the same process of calculating and changing UI.
What is JSX?
JSX is something that we use to write JavaScript & HTML together. It’s a syntax extension of JS.
The purpose of this extension is to create DOM elements that render on the React DOM and it compiles before painting in browsers.
For example: const heading = <h1> This is a headline! </h1>
Looks similar like html.
const myList = (
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
);
multi-line JSX should be wrapped in parentheses.
Example of Embedding JavaScript in JSX:
let value = <p>{5*2}</p>;
The JS expression needs to be wrapped in curly braces.
React is Just JavaScript
The most interesting part of React is that if you love JavaScript, you’ll love React too. Because often we use Plain JS in React to work with.
For Example:
We want to show the list of items from an array that contains a grocery list.
{
gorceryList.map(element => <li>{elemen}</li>)
}
The above code will print every element on the screen. So noting new/fancy here. Just a JS method. .map(), .filter(), .reduce()
Default Props:
defaultProps is used to define a default props value if there are no props passed or undefined. But if the props is set to null, the default will not be set.
for example:
<headLine /> // here the default props will be set.
<headline color={null} /> //props will not set here. null will execute.
