React is really easily explained as a JS library for creating User Interfaces, so React is always just part of your technology stack. React is really good at building single page apps but unlike Angular you need to add libraries to React such as React Router to handle routing.
JSX
React is written in JSX so due to not all browsers supporting it we need to include babel which is used to compile the JSX into HTML/CSS/JS code that can be read across browsers.
React has ES6 and Angular has Typescript
JSX allows you to write code that “”looks”” like HTML, then the Babel library interprets the JSX code and complies it into HTML. In JSX every element needs to be closed and its also not HTML5 which means we can not expect HTML5 tags to work when called in our JSX files.
React Starter Kits
There are several ways to create a React App, this can be done from scratch by configure the dependencies needed for JSX compiling and HTML routing manually or from using one of the “”Starter Kits”” provided for React. The “”Starter Kits”” are a valuable tool for create a quite prototyping base and also for when you are learning React. The starter kit will provide a baseline install of npm modules needed which means that you do not have to spend time understanding transcoding tools such as Babel. You can also use a starter kit as a baseline for your node modules and then create your own React application folder/file skeleton rather then using the one provided. Once again this is good for just ensuring that you are not spending time on worrying about missing a needed npm package and focus on building your React App. I recommend using the CRA create-react-app starter kit maintained by Facebook.
npm install -g create-react-app
cd my-app
create-react-app my-appVirtual DOM
Virtual DOM utilizes a differential algorithm for making calculations. This relieves the real DOM which can then process other tasks. Now consider there are 10,000 nodes out of which we only need to work on 2 nodes. Now most of the processing is wasted in traversing those 10,000 nodes while we only operate on 2 nodes. The calculations are done by the Virtual DOM to find those 2 nodes and the real DOM quickly retrieves them.
DOM manipulation is the heart of a responsive website, hence the use of virtual DOM in order to perform calculations vs traversing a tree
React + Redux
React + Redux bundle minified constitutes around 200 kb, aka light weight framekwork where developer can easily pick and choose components. Just like how we use to include a link to the CSS and JS files in our HTML code, Webpack performs a similar function eliminating the need for explicitly linking files.
React Glossary
JSX (JavaScript Extension)
JSX Allows us to include ‘HTML’ in the same file along with ‘JavaScript’ (HTML+JS=JSX). Each component in React generates some HTML which is rendered by the DOM.
ES6 (ES2015)
The sixth version of JavaScript is standardized by ECMA International in 2015. Hence the language is referred to as ECMAScript. ES6 is not completely supported by all modern browsers.
ES5(ES2009)
This is the fifth JavaScript version and is widely accepted by all modern browsers, it is based on the 2009 ECMA specification standard. Tools are used to convert ES6 to ES5 during runtime.
Webpack
A module bundler which generates a build file joining all the dependencies.
Babel
This is the tool used to convert ES6 to ES5. This is done because not all web browsers can render React (ES6+JSX) directly.
To learn more and get OneNote, visit www.onenote.com.
Routing
Routing is where you try to map URLs to destinations that aren’t physical pages such as the individual views in your single-page app.