ReactJs case study

React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

• What Is reactjs?
• What are the advantages of using reactjs compare to other js frameworks
• How reactjs works?
• How to create a reactJs app 

What is reactjs?

Reactjs is an open-source javascript library that is used to build the user interfaces. It enables you to developed to create a web application that can change your data without reloading the page.

What are the advantages of using reactjs compare to other js frameworks

React is a component-based library which is used to develop interactive UI’s (User Interfaces). It is currently one of the most popular JavaScript front-end libraries which has a strong foundation and a large community supporting it and it's scalable, simple and fast. Code 

Key points: 

• JSX
• Single Way Data Flow
• Virtual Document Objects Model
• Render method
• Applied using Babel
• Comparison between Reactjs and Angular 

JSX: JSX stands for JavaScript XML, JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code

• It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
• It makes it easier for us to create templates.
• Instead of separating the markup and logic in separated files.

Single Way Data Flow: It allows unique way data flow in which sets of values are passed as components rendered as properties in HTML tags. It cannot directly access or modify components but passes a call back which does this task. The property is then known as “Properties flow down, and actions flow up.

Virtual Document Objects Model: React JS creates components of memory data structures, which computes the changes and then updates the browser. So a unique feature is enabled which allows the user to code and it renders the components, elements, and data which can ultimately be processed and used.

Virtua DOM

• It's updated fast
• Can't direct updated HTML, updated the JSX if element updated.
• DOM manipulation is very easy.
• No memory wastage.

RealDOM

• It's updated slowly.
• Can direct updated HTML.
• Create a new DOM if the element updated. 
• DOM manipulation is very expensive.
• Too much of memory wastage.

Render method: The Render method takes input and returns what to display. JSX is a XML like syntax. Components can be used to render () via these properties.

Applied using Babel: It is a compiler that converts markup language into JavaScript. You can use the newest features of JavaScript with this and also is available for different conversions. For example, our React JS uses this to convert JSX into JavaScript. JSX is an XML syntax extension to JavaScript which comes with full features of ECMAScript.

Comparison between Reactjs and Angular :

Reactjs : 

• Only the view of MVC Serverside rendering 
• Uses virtual DOM
• Only one-way data binding
• Compile-time debugging.
• Developed by facebook

Angular :

• Complete MVC
• Client-side rendering
• Use Real DOM
• Two-way data binding
• Runtime debugging 
• Developed by Google

How reactjs works?

ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model – View – Controller).

React implements a virtual DOM that is a DOM tree representation in Javascript. So when it needs to read or write to the DOM, it will use the virtual representation of it. Then the virtual DOM will try to find the most efficient way to update the browser’s DOM. React elements are plain objects and are cheap to create. React DOM takes care of updating the DOM to match the React elements. The reason for this is that JavaScript is very fast and it’s worth keeping a DOM tree in it to speed up its manipulation. Although React was conceived to be used in the browser, because of its design it can also be used in the server with Node.js.

How to create a reactJs app :

Step 1: Install NodeJS. You can download the form this Link Download link of NodeJS download and install the latest version of NodeJS.

Step 2: Run the below command in your terminal or command prompt.

npm install -g create-react-app

Step 3: Create a react app. Now to create an app we will use the command.

npx create-react-app my-app

Display App Directory :

Step 4: Start the development server. To start the development server, go inside your current directory “myapp” and execute the below command:

npm start

Execute the react App Path: https://localhost:3000/