React JS Installation on Windows

 React JS Installation on Windows

- There are several ways to install React JS. This is the quickest way to get started by using ‘create-react-app’  tool maintained by Facebook.

-Prerequisites :

Make sure you have a recent version of Node.js installed. 

Don't worry if you don’t have it and you don’t know how to install Node JS. Just checkout my blog "Node JS - Getting Started" 

Step by Step Installation

Step - 1) Download the ‘create-react-app’ Tool from GitHub

Note : Extract the file

Step - 2) Navigate to the project directory and Open command prompt 

Step - 3) Enter the following commands

1.  npm install -g create-react-app

2. create-react-app my-app

Note : Check the project directory you will see 'my-app' folder is created.

3. cd my-app

4.  npm start

Once we type “npm start” the application will start execution on port 3000. It opens the default browser in url -> http://localhost:3000/. You will see ‘Welcome to React’ greeting page.

If you want to save the time spend on installation you can also use Online React Editors such as :-

1) Code Sandbox 

2)Stackblitz 

React Introduction - What, Why, Who

React Introduction - What, Why, Who

What is react ?

ReactJS is an open source JavaScript library Developed by Jordan Walke, a software engineer working at Facebook

Why React?

1) It makes easier developing a large Single Page Application (SPA) because it allows a developer to break down the complex UI into simpler components. We can reuse components as needed and compose bigger components from smaller ones.

2) React’s reconciliation algorithm – It implements  in Virtual DOM that makes the application fast. Virtual DOM allows ReactJS to know when exactly to re-render because it can detect when the data has changed.

Note - DOM (Document Object Model) is an object that is created by the browser each time a web page is loaded which can dynamically add or remove the data at the back end.

3) One-Way Data Binding - ReactJS follows unidirectional data flow or one way data binding. Which means the data flows in a single direction because of this application’s state is contained in specific stores. As a result, rest of the components remains loosely coupled and application is more flexible leading to increased efficiency.

4) React follow the principle of immutable data. It means we create the copies of object and replace them instead of modifying the original.

5) Server-Side Rendering(SSR): It you to pre-render the initial state of our react components at the server side only. By this the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page instead of React downloading the JavaScript

Who uses React ?

Instagram web site and Facebook newsfeed section is developed with react and it is used by other companies such as PayPal, Uber, Apple and Airbnb.

Reason why JavaScript is Dysfunctional

Reasons why JavaScript is Dysfunctional :- 

1) typeOf operator weird behavior -  

- The typeOf operator tells us which built-in type a variable is so when we check it with <null> it returnsobject and when check type of <undefined> it returns undefined. It means JavaScript considers undefined as datatype in this case which is a flaw.

Note :- In this example I have used online code editor JS Bin

typeof null; // object
typeof undefined; // undefined

Some other examples -

2) Equal Operator Problem

To check whether 2 variables are equal there is 2 operators in JavaScript. These are:-
1) Equal ( ==  )
2) Strict Equal ( === )
Problem  - The == (or !=) operator performs an automatic type conversion. It means it considers string of 1 equal to numeric 1.

Other examples -

So its often recommended to use Strict Equal ( === ) whenever possible The === (or !==) operator will not perform any conversion. It compares the value and the type, which could be considered faster than ==.

3) Don’t use delete to remove an item from array

Delete actually replaces the item with undefined instead of the removing it from the array. If you check the array length before and after deletion it remains the same. So its recommend to use splice instead of using delete to delete an item from an array.

4) Floating point problems

0.1 + 0.2 === 0.3 // is false
0.1 + 0.2 // is 0.30000000000000004
9007199254740992 + 1 // is 9007199254740992
9007199254740992 + 2 // is 9007199254740994
This happen because JavaScript numbers are floating points represented internally in 64 bit binary according to the IEEE 754 standard.

To resolve this issue it is recommended to use toFixed() or toPrecision()

Node JS - Getting Started

Node

- Node.js is a JavaScript runtime.

- It is commonly referred as node.

- It uses a non-blocking I/O (asynchronous) model that makes it lightweight, efficient, popular, fast, scalable and reliable.

- Examples of NodeJS are Netflix, PayPal and Uber.

* Before starting first thing you should ask yourself is "What is Programming Language ?"

- Program is a set of instruction for the computer to carry out. The instruction written in the language which computer understands is called Programming Languages.

* What we are doing?

We are writing program in JavaScript language and running it in another program called Node JS.

* Installation

1. Go to this site.


- In Windows it will be downloaded in MSI file format.

- Once downloaded run the Node setup.

- Allow node setup to run for installation to start


# To check installation is done properly -

1. Select Node JS Command Prompt

2.  Write < node -v > in Node Command Prompt // To check node version