React Fundamental Core Concept

1. Is React a Framework or Library?

React is a JavaScript “library”. It is not exactly a “framework”. We know that framework serves a huge collection of resources at a time. In framework design decisions are already made, which gives a clear path to focus on writing good application-level logic. But it is not flexible, when we need a small part of them, we have to include the whole thing anyway!

For this reason I can say React is popular! React follows a Unix philosophy that when we need one thing it just provides that thing extremely well.

2. Virtual DOM

The DOM stands for Document Object Model in simple words representing the UI of an application. Every time when we change the UI, the DOM gets updated to represent that change. The DOM is represented as a tree data structure. When we change the UI, the DOM re-render and updates its children. The re-rendering of the UI makes application slow.

For this solution we use Virtual DOM. The virtual DOM is only a virtual representation of the DOM. When the state of application changes, the Virtual DOM gets updated instead of the real DOM.

Virtual DOM every time creates a tree and elements are represented as a node. If any of the elements changes a new virtual DOM tree is created. The new tree is then compared or “diffed” with the previous tree.

example of Virtual DOM

In this image, the red circles represent the nodes that have changed. These nodes represent the UI elements that change state. Then compared the previous tree and current changed tree. Updated tree is then batch updated to the real DOM. This makes React standout as a high performance JavaScript library.

In summary:

  1. The entire virtual DOM gets updated.
  2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
  3. The changed objects, and the changed objects only, get updated on the real DOM.
  4. Changes on the real DOM cause the screen to change.

3. JSX

JSX stands for JavaScript XML. JSX allows us to write HTML in React.

JSX converts HTML tags into react elements such that React.createElement( component, props, …children) function.

For example :

JSX code:

<MyText color=”red”>

Hello, Good Morning!

</MyText>

This example compile into:

React.createElement(

MyText,

{color: ‘red’},

‘Hello, Good Morning!’

)

User-Defined Components Must be Capitalized:

In JSX if we want to use a custom user-defined tag we should use capital-letter in the starting letter. Because when an element type starts with a lowercase letter such that <div> or <span> etc refers to a built-in component of HTML. If user-defined components start with capital letter it will be compiled to React.createElement(…) & will be defined in a JavaScript file.

4. Props in JSX

Different ways to specify props in JSX.

JavaScript Expressions as Props

We can pass any JavaScript expression as a prop, by surrounding it with {}.

For example,

<SumComponent sum={1 + 2 + 3} />

Here, the value of props.sum will be 6 because of the expression 1+ 2 + 3 gets evaluated.

String Literals

We can pass a string literal as a props.

For example,

<TextComponent text={‘Good Morning!’} />

<TextComponent text=”Good Morning!” />

Both examples above are equivalent.

Props Default to “True”

If we do not pass a value for a prop, it defaults to true.

For example,

<TextComponent prop/>

<TextComponent prop={true} />

Both examples above are equivalent.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store