Reading-Notes

Class 26 Summary :

Component Based UI :

Name 5 Javascript UI Frameworks (other than React):

1. Backbone.js
2. Angular.
3. Vue.js
4. Polymer.
5. jQuery.

What’s the difference between a framework and a library?

• “A Library is a set of code that was previously written by a developer that you can call when you are building your project”.

• “In Library, you import or call specific methods that you need for your project”.

• “A framework is a supporting structure that gives shape to your code”.

• “In the Framework, you have to fill the structure accordingly with your code”.

• “The main key difference between the Library and Framework is something known as inversion of control”.

Document the following Vocabulary Terms :

Term
Rendering	a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
Templates	sets of ready-to-use parts of code built using React technology for the development of dynamic user interfaces. React templates may contain full-fledged pages with a pre-built design, component compositions, stand-alone components, styling (like fonts, colors theme effects, background styles, icons), plugins, widgets, libraries
State	an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component

React :

• “React is a JavaScript library, declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

JSX :

• “JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript”.

Rendering Elements:

• An element describes what you want to see on the screen.
• Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
• “React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time”.
• “React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state”.

Sources:

source1 source2 source3