React

Jameelafarid
3 min readNov 4, 2020
  1. what is a DOM?

DOM stand for document object model, it is used to create nodes using JavaScript. DOM is the heart of a modern website but DOM is too slower than the JavaScript operations. JavaScript tends to update DOM more than they have to which slows down the web application. but we can fix this problem by using virtual DOM.

2. what is a virtual DOM?

A virtual DOM is a object that is identified to JavaScript object. it is a simple representation of DOM object which has the same power and has properties and methods like the DOM objects but it seems like virtual DOM can not decide what’s on the screen. manipulating a virtual DOM is way faster than manipulating the DOM. virtual DOM updates quicker than the actual DOM.

3. what is diffing?

once the virtual DOM is updated, react compares the snapshot of new virtual DOM and the virtual DOM before you have updated it. after comparing the new virtual DOM and old updated version, react discovers which virtual DOM objects are changed. this is called diffing.

4. reconciliation

when you update the virtual DOM, the snapshot virtual DOM gets compared to the snapshot of what the DOM looked like before you have updated it then eventually react finds out what objects of the virtual DOM has changed and updates those objects, those objects will only be updates to the real DOM. changes on the real DOM makes the screen to change. this process is called reconciliation.

5. what is JSX?

A JavaScript XML (JSX) is an extension to JavaScript language syntax. In react library JSX tags are extension to write XML code for elements and components

do we need JSX? actually no, react can work perfectly without using JSX syntax but JSX helps your react code to be more simpler and elegant. it uses a syntax that is familiar with most of the developers. react transpiles to pure JavaScript which is understood by the browser.

6. JSX differences

  1. class → className (the first is class being replaced by className.
  2. for → htmlfor
  3. camelCase property naming convention

onclick → onClick

tabindex → tabIndex

7. what is react?

A react is a library for JavaScript user interface, it’s not a framework. react is not a complete solution , you will need to use more library for react to form a solution. react is declarative , it can effortlessly create a user interactive UI. they can design few views for the states on your computer.

8. frameworks

frameworks has a great purpose especially for startups. when using frameworks, they have already provided you with many smart design planning but still frameworks have some disadvantages. the experienced web developers who tends to work on large codebase projects.

9. disadvantage of framework

frameworks are not flexible whatsoever. frameworks usually want you to code in a certain way and if you refuse. they will end up fighting about it. frameworks are large and full of features. if you want to implement a piece of code , you will have to put the whole code anyway.

10. User interference

UI is everything that we show in front of our users UIs are everywhere, from the simple buttons on a microwave to the dashboard of a space shuttle. if the devices we are using can understand JavaScript then we can use react to UI All Web browsers can understand JavaScript, so we can use React to describe Web UIs.

--

--