2. React - basics #

Created Monday 20 July 2020

FIXME - why React

About React #

• React is a JS library, not a framework.
• React replaced jQuery
• It makes websites scalable and predictable in development.
• It is used by many of the top companies.
• It solves the problem of efficient DOM manipulation.
• React is like a bread-machine, just give the ingredients, and it outputs a website.
• React works with anything - on web, mobile apps, desktop apps, VR apps, etc.

UI layers in web apps #

Principles in web dev over the years:

1. Thinking in components
   1. Atoms - Indivisible entities, e.g icons, buttons
   2. Molecules - Navigation bar
   3. Organisms - Functionality
   4. Templates - group of organisms
   5. Pages - The page we see
   • The advantage - We can reuse components to make our pages. No need to rewrite the code.
   • All the components are independent.
2. One way data-flow.
3. Virtual DOM - Handled by React, it is an object which describes our website. Painting is handled in the most optimum way.

React.js Alternatives #

Angular:

• Is a proper framework
• Uses TypeScript
• Component based
• Batteries included - has most of the extra needed modules set.

React:

• Is a UI library
• Component based
• As it is a library, it does not enforce extra needed modules. They may be installed from npm

Vue:

• Component based****
• Has many core modules
• From a needed modules POV, it ships with some modules, unlike the extremes - React (none) and Angular (most).