Module 1 learnings: ReactJS is a Javascript Library for building User Interfaces which is basically used for creating custom HTML elements (or widgets) called as Components in ReactJS terminology.
To support ReactJS applications, we would require 2 types of packages: 1. React : For properly parsing the JSX (Javascript Dynamic) contents written in the JS file
2. React-DOM: For converting a JS function into a React Component using JSX representation of the function and rendering the content into the React DOM which would then be merged into the browser DOM for display (Code would make more sense. Please refer to the codepen code at the end.)
We would also require Babel as the pre-processor to support ES6 syntax and also to identify JSX syntax properly within the JS files (in JS Functions and in ReactDOM.render method’s parameters. Please refer to the codepen code at the end.)
Basically, here we can have 2 types of applications called as Single Page Applications(SPAs) and Multi-Page Applications.
Generally, we have SPAs rendered in React as a whole and the server would render the HTML page once and thereon, all the user interactions and page views would be rendered by the React DOM onto the Browser DOM and therefore we would be using a single ReactDOM.render call to the main React Component and all the sub components would get communicated with this parent reference. Therefore, cross component communication is possible here between different widgets in the same page. So, this is more elegant to use usually.
In Multi-Page applications, we usually have as many server requests as are the number of pages in that application. In here too, the general idea of using react is to cater to widgets (or reusable HTML custom elements) and these would be used in conjunction with other HTML controls and therefore we would require multiple ReactDOM.render calls to render to the DOM of those isolated widgets individually as there is no communication between those individual widgets within the same page. So, this is less elegant to use usually.
Code:
So, a simple UI card widget created using Babel, React, React-DOM is shown @
https://codepen.io/vamseemudradi/pen/mdJrMbL Thanks for reading the post.
Comments