Notes on React, DOM, Node and npm

React.js

React is a JavaScript library. React is not a framework. There are a lots of JavaScript framework like: Angular JS, Vue JS etc. But react is not a framework. It is a front end JavaScript library for building user interfaces or UI components. In react, we import React to use React, import React DOM to use it, import almost everything we use featured in React. So, React is a JavaScript library where we need to import to use it.

React is thin and it’s extremely easy to mix it with other 3rd party libraries. It is an application where many tools working together like: JSX, npm, node etc.

JSX

JSX stands for JavaScript XML. It allows us to write HTML in React. JSX makes it easier to write and add HTML in React. It allows us to write HTML elements in JavaScript.

const element = <h1>Hello, world!</h1>;

This is a syntax extension to JavaScript. It is known as JSX. It is used with React to describe what the UI should look like. JSX reminds of a template language, but it comes with the full power of JavaScript. JSX converts HTML tags into react elements. JSX allows React to show more useful error and warning messages and so developers find it very useful.

JSX is not HTML

Browsers don’t understand JSX. JSX is actually a compromise. Transpilers like Babel or TypeScript are used to translate JSX . The generated app will internally use Babel to transpile your JSX by using create-react-app. So React component is a JavaScript function that returns JSX.

DOM

DOM stands for Document Object Model. When a web page is loaded, the browser creates a Document Object Model of the page. It is a platform that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

Virtual DOM

A virtual DOM object is f a DOM object, like a lightweight copy. A virtual DOM object lacks the real thing’s power to directly change what’s on the screen otherwise it has the same properties as a real DOM object. Manipulating the virtual DOM is much faster than the DOM, because nothing gets drawn onscreen. Virtual DOM can be compared as editing a blueprint, as opposed to moving rooms in an actual house. But it is not same as Shadow DOM. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components.

React.createElement

We can also represent React DOM elements with objects calling React.createElement method. It can also be used to create elements from React components.

defaultProps

To set default values for the props argument defaultProps is a property in React used . It will be changed if the prop property is passed. For example:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'red'
};
// 

If props.color is not provided, it will be set by default to 'red':

render() {
    return <CustomButton /> ; // props.color will be set to red
  }

Start with a capital letter

Since we are dealing with the mix of HTML elements and React elements, the first letter being a capital one is actually a requirement. All names that start with a lowercase letter as names of HTML elements will be considered in a JSX compiler like Babel.

Babel

Babel is a open-source toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines and also in current browsers. A modern developer always tries to use update version of JavaScript. But, not all browsers support them. Then we use Babel to convert updated code version for old model browser.

// Babel Input: ES2015 arrow function 
[4, 5, 6].map((n) => n + 1);  
// Babel Output: ES5 equivalent 
[4, 5, 6].map(function(n) {   
        return n + 1; 
    });

Node.js

Node is a basic unit of a data structure. Node.js is an open-source, cross-platform, back-end, JavaScript runtime environment which was first built for Chrome’s V8 JavaScript engine. It executes JavaScript code outside a web browser. It is used for traditional web sites and back-end API services. Keeping push-based architectures in mind, it was designed. Node.js server makes your app available to serve HTTP requests.

npm

npm is a package manager for the JavaScript programming language. In the broader meaning, npm is the world’s largest Open-source Software Registry registry that contains over 800,000 code packages. It is the short form of Node Package Manager. It is an online repository for the publishing of open-source Node.js projects. It is also a command-line utility for interacting with said repository that aids in package installation, version management, and dependency management. npm is installed and distributed with Node.js. If want want to use npm, we must have Node.js installed in our operating system.