Introduction to ReactJS

 Summary:👉 TABLE OF CONTENTS:

• Chapter 01: What is ReactJS?
• Chapter 02: Features of ReactJS
• JSX
• Virtual DOM
• Performance
• One-way Data Binding
• Extention
• Chapter 03: Pros and Cons ReactJS

What is ReactJS? ✅

Nowadays, there are several JavaScript libraries and frameworks targeted at creating Front-end development easier and quicker. However, among alternative great characteristics, ReactJS or React contains a business-forward mindset and a powerful concept of code reusability. This article can introduce you to the key options of this nice JavaScript tool.

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. It was created by Jordan Walke and was initially released in May of 2013.

                ⇉ Fundamentals of React

                        ↝ Embrace functional programming.

                        ↝ HTML and JavaScript in the same file (JSX).

                        ↝ Components everywhere.

Features of ReactJS ✅

✥ JSX - JavaScript Syntax Extension 

                The JSX( JavaScript eXtension) is a syntax extension to JavaScript. we can write HTML structures in the same file that contains JavaScript code by using JSX. This makes the code easier to understand, design, and debug, React does not require JSX, but it is very useful when putting markup and logic in the same file.

const name = 'Danuka';

const element = <h1>Hello, {name} </h1>;

This example declares a variable called name and uses it inside JSX by wrapping it in curly braces.

✥ Virtual - DOM

                        DOM stands for Document Object Model and represents the structure of the elements in a website. many JavaScript libraries, like jQuery, manipulate the DOM components directly, modify attributes, adding or removing elements. React keeps a light-weight illustration of the “real” DOM within the memory, which is known as the “virtual” DOM. React can manipulate the Virtual-DOM countless times and comparer its state with the real DOM. React knows exactly which element changed and then updates only that specific element.

                     ✦ Virtual - DOM provides the following advantages:

                                      ✷Simplicity and Efficiency.

                                                                           Figure: Document Object Model

✥ Performance 

                        ReactJS is a good performer. The explanation behind this is often that it manages a virtual DOM. The DOM is a cross-platform and programming API that deals with HTML, XML, or XHTML. React breaks a complex interface into individual elements, permitting multiple users to figure on every each at the same time. And also, DOM leading to smoother and faster performance.

✥ One-way Data Binding 

                        ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. one-way data-binding means through the entire application data flows only in one direction. The one-way data binding provides higher control over it. Flux is a pattern that helps to stay your data unidirectional. A unidirectional data flow means when a developer designs a React app, the data is passed from the parent element to the child element through read-only props. These props can't be sent back to the parent element. this is how one-way data binding works. This makes the application a lot more that results in increasing efficiency.

                                                     Figure : One-way data binding

✥ Extensions 

                    ReactJS uses a JSX file that makes the application easy and to code likewise as understand and has several extensions that provide complete application design support. we know that ReactJS is a component-based approach that creates the code as reusable as your want. ReactJS provides server-side rendering, which entails rendering a usually client-side-only web application on the server, then sends a totally rendered page to the client.

Pros and Cons of ReactJS ✅

✥ Pros

• Virtual DOM in React makes the user experience better and developers work faster.
• The one-data binding makes the code very stable.

• Easy to Learn and USe.

• Reusable Components.

• Scope for Testing the Codes.

• Has React Developer Tools.

✥ Cons

• Poor documentation.
• The pace of development is very high. 
• ReactJS is a large size library.
• ReactJS Covers only the UI Layers of the app.
• needs additional libraries for routing and state management.

References:

                https://www.simplilearn.com

Read More

Introduction to MongoDB

Summary:👉 TABLE OF CONTENTS:

• Chapter 01: What is MongoDB?
• Chapter 02: Functionality of MongoDB
• Chapter 03: Why use MongoDB?
• Chapter 04: Comparing Terminologies
• Chapter 05: CRUD Terms
• Chapter 06: Advantages of MongoDB

MongoDB ✅

• MongoDB is a scalable, high-performance, open-source, schema-free, document-oriented database.
• Used NoSQL mechanism.
• MongoDB also provides the feature of Auto-Scaling. Since, MongoDB is a cross-platform database and can be installed across different platforms like Windows, Linux, etc.
• Supports APIs in many computer languages like JavaScript, Python, Ruby, Perl, Java, C#.
• Record in MongoDB is a document.

Functionality of MongoDB ✅

• Document-based database.
• Secondary indexes.
• Atomic writes and fully-consistent reads.
• Query language via an API.
• Dynamic schema (no DDL).
• Master-Slave replication.
• Supports map-reduce and aggregation tools.
• Easy to administer in the case of failures.
• automatic load balancing.
• Stores files of any size easily without complicating your stack.

Why use MongoDB? ✅

• Easy and fast integration of data. (no ERD diagram).
• Simple queries.
• The functionality provided applicable to most web applications.
• Document Oriented Storage.
• Index on any attribute.
• Auto-sharding.

Comparing Terminologies ✅

SQL Terminologies	MongoDB Terminologies
Database	Database
Table	Collection
Row	Document
Column	Field
Index	Index

CRUD Terms ✅

SQL Operation	MongoDB Operation
Create	Create
Insert	Read
Update	Update
Delete	Remove

• Create ✔
• db.collection.insert( <document> )
• db.collection.save( <document> )
• db.collection.update( <query>, <update>, { upsert: true } )

• Read ✔
• db.collection.find( <query>, <projection> )
• db.collection.findOne( <query>, <projection> )

• Update ✔
• db.collection.update( <query>, <update>, <options> )

• Delete ✔
• db.collection.remove( <query>, <justOne> )

Advantages of MongoDB over RDBMS (Relational Database Management System) ✅

• No complex joins.
• The structure of a single object is clear.
• MongoDB provides the facility of the deep query.
• Ease of scale-out.
• MongoDB is schema-less: is a document database in which one collection holds different documents.
• uses internal memory for storing working sets.

References:

        www.tutorialspoint.com/mongodb

        https://docs.mongodb.com

Read More

Introduction to MERN Stack

 Summary:👉 TABLE OF CONTENTS:

• Chapter 01: MERN stack
• Chapter 02: Why use the MERN Stack
• Chapter 03: Benifits of the MERN stack

MERN stack ✅

MERN STACK is a web development framework.MERN is an acronym accustomed to describe a particular set of JavaScript-based technologies that are utilized in the web application development process. it's designed with the concept to create the event process as smooth as possible.MERN includes the following components.

• ReactJS
• NodeJS
• MongoDB
• ExpressJS

        ✔ ReactJS :

• React is used to create UI components that make the interface of the single-page web application. React is a JavaScript library used for building user interfaces. React uses a full-featured programming language to construct repetitive or conditional DOM elements. With React, a similar code can run on both the server and also the browser. React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain. And also React has great support for forms, error handling, events, list, etc.
                     

        ✔ NodeJS :

• NodeJS is used to run JavaScript on a machine instead of in a browser. Node JS is a cross-platform run-time JavaScript environment used for executing JavaScript code outside of a browser. Node JS was designed with the concept of allowing devs to create scalable network applications. Node JS has enabled devs to use it to write down command-line tools and back-end scripts for the aim of making dynamic web page content before the page is distributed to the user's browser.

        ✔ MongoDB :

• MongoDB is a free open-source, cross-platform and document-oriented database program. it is categorized as a No-SQL database used to store application data, suggesting the data is stored in flexible documents with JSON-based query language.

        ✔ ExpressJS :

• ExpreesIS is used to create the backend of a site using NodeJS functions and structures. this is free open-source software. it's released under the MIT license, and it is classified as a web application framework for Node.js. Express JS is formed for developing web apps and APIs.

Why use the MERN Stack ✅

MERN Stack is a Javascript Stack that's used for easier and faster deployment of full-stack web applications. MERN Stack comprises 4 technologies namely: MongoDB, Express, React, and Node.js. it's designed to create the development process smoother and easier. the subsequent reasons are the use of the MERn Stack.

• It helps you to make both Web and Mobile applications.
• It is widely adopted in the web industry.
• very huge and growing exponentially.
• very easy to learn and suitable for beginners.
• used throughout and across the stack.

Benifits of the MERN Stack ✅

• The speed of designing and developing websites and web applications,
• Develop a computer application using a single language called JavaScript.
• Ease of transferring a web application to a mobile application or software.
• Reducing client costs.
• The functionality of highly optimized web applications and software.
• it can be creating a web site using a single HTML document.

👉Important

some examples of widely used web development technology stacks :

• LAMP - Linux, Apache, MySQL, PHP
• Spring, Hybernate - Java
• MEAN -  NodeJS, MongoDB, ExpressJS, AngularJS
• Django, Flas - Python

Read More