Saturday 13 April 2019

Chapter : 1 - First code in Node JS


Previously I have written a blog about Getting Started with Node JS and its installation. Now lets start coding by making a simple server that listens at port 8085. We will make sure when request is made it displays "Hello, coders!" in browser.

Steps:


1. Open Visual Studio Code and create a file first_server.js .
2.  Write the code written below :-

    var http = require('http');
    http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h2>Hello, coders!</h2>');
   }).listen(8085);

Explaination of each line of Code :-


1) var http = require('http'); :-
It will include http module. http is a built-in module(set of methods to be included in application) that helps Node.js to transfer data over Hyper Text Transfer Protocol that enables server to listen to a particular port and get response back to client.

2) http.createServer :-
This method of http helps to create an HTTP server. It has a request argument that represent the incoming message usually denoted as req. The next argument is res which represents the response.

3) res.writeHead :-
It is used to define the response header. It has 2 arguments the first one is the status code and the second one is an object containing response headers.

4) res.end : -
It will end the response process.

5) .listen(8085); :-
Represent we want to listen to port 8085.



3. Use shortcut Ctrl + ` (Back-tick) to open the terminal in Visual Studio Code.
4. Write command in terminal <node first_server.js> and enter

5. Then go to browser and access the address - http://localhost:8085/


Congratulations, your first server is up and running.


Happy Coding folks!

Sunday 10 March 2019

Interview Questions of React JS

I have given few Interviews in React JS and this blog is based on that experience. Usually for React JS interviews it is expected you have a deep understanding about JavaScript and other few libraries used with React JS like Redux, Thunk and Redux Saga. In 2 interviews I was asked questions on HTML5 and CSS3 even though the profile was React JS Developer.

If you are giving interview in product based company there are usually 2 technical round. In second technical round you have been asked to make a mini application in React JS like a countdown timer.

Q1. What is Virtual DOM in React JS?
Q2. What are the major advantages of React JS over Angular JS?
Q3. What are the limitations of React JS ?
Q4. How will you decide when to use React JS?
Q5. What is component in React JS?
Q6. Explain how will you pass property from Child Component to Parent Component?
Q7. Explain component lifecycle?
Q8. What is JSX?
Q9. Differentiate Props vs State?
Q10. Explain render method and its use?
Q11. What is events in React JS and explain its types?
Q12. What is hooks?
Q13. What is fragments?
Q14. What is HOC in React JS and its use?
Q15. Explain Redux and when it is used?
Q16. What is Redux Thunk and Redux Saga? When do we use thunk and when do we use saga?

Thursday 31 May 2018

- Like all living things even React Component  has a lifecycle means a component takes birth, grows by updates and then dies in a web browser.

- The Component lifecycle methods are various methods which are invoked at different phases.

Four phases of a React component

• Initialization

• Mounting

• Updation

• Unmounting

1) Initialization

In this phase the React component sets the initial states and default props. For this two methods being called are -

1. getInitialState - getInitialState method enables to set the initial state value, that is accessible inside the component via this.state.

2. getDefaultProps - getDefaultProps can be used to define any default props which can be accessed via this.props.

2) Mounting

After initialization, our React Component is ready to mount in the browser DOM. The methods which gets called in this phase are -

1. componentWillMount - It is executed just before the React Component is about to mount on the DOM.

- It is called before the render method is executed.

2. componentDidMount - This is the hook method which is executed after the component did mount on the dom.

- It is called as the render method has been executed.

3) Updation

This phase starts when the react component receives new updates. The component can be updated by two ways, sending new props or updating the state.

State Changes

1. shouldComponentUpdate

- It tells the React that when the component receives new props or state is being updated, should React re-render.

- This method should return true or false.

- By default, this method return true.

2. componentWillUpdate

- It is executed only after the shouldComponentUpdate returns true.

3. componentDidUpdate - It is executed when the new updated component has been updated in the DOM.

Props Changes

Any changes on the props object will also trigger the lifecycle and is almost identical to the state change with one additional method being called componentWillReceiveProps.

1. componentWillReceiveProps - It gets executed when the props have changed and is not first render.

The rest of the methods behave exactly same -

2. shouldComponentUpdate

3. componentWillUpdate

4. componentDidUpdate

4) Unmounting

In this phase, the component is not needed and the component will get unmounted from the DOM.

1. componentWillUnmount - This method is the last method in the lifecycle. This is executed just before the component gets removed from the DOM.

Monday 21 May 2018

IDE for React JS


IDE for React JS

- IDE means integrated development environment. It is a software suite that consolidates the basic tools developers need to write and test software. 

- An IDE normally consists of a source code editor, build automation tools, and a debugger. Most modern IDEs have intelligent code completion.

- Most modern IDE's have intelligent code compilation.

Few IDE's for React JS

1. Atom
It is a hackable, free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub.

2. Visual Studio Code
- It is a source code editor developed by Microsoft for Windows, Linux and OS X.
- It includes support for debugging, embedded Git control, syntax highlighting, snippets, intelligent code completion and code refactoring. 
- It is customizable so users can change the editor's theme, keyboard shortcuts, and preferences.
- It is free and open-source.

3. WebStorm
- It is a powerful IDE for modern JavaScript development perfectly equipped for complex client-side development and server-side development with Node.js. WebStorm is built on top of the open-source IntelliJ Platform. 
- Its features include Intelligent Coding Assistance
Support for Latest Technologies, Version Control System, Seamless Tool Integration, Debugging, Tracing and Testing, Built in Terminal.  
- Its trial version is available for 30 days and later we need to obtain and register a license.

For my React application I am using Visual Studio Code because of its features and open-source benefit. 


# Visual Studio Code  Installation

1. Visual Studio Code Download Link  : https://code.visualstudio.com/download


2. Complete Code Installation
3. Right click and open the react project directory which we have previously created through Visual Studio Code by selecting Open with Code


Tuesday 27 February 2018

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 :-




Tuesday 6 February 2018

Key Terms in React JS

Key Terms in React JS

1) ECMAScript

-ECMAScript is a scripting-language standardization by ECMA International. React without ECMAScript 6 would be a plain JavaScript component.

2) Component 

-The entire application of React is modelled as a set of independent, reusable and isolated pieces called components.
- There are two ways the components receive data through :- Props or State

3) Properties / Props

- It is a way of passing data from parent component to child component.
- Props are immutable

4) State 

- State is managed within the component.
- It is used to store data about the component which can change over time. Thus, state makes a component dynamic and interactive

5) JSX (JavaScript Extension)

-  JSX allows us to include ‘HTML’ along with ‘JavaScript’
- React doesn’t require it but it is helpful in working with UI inside the JavaScript code.
- It is faster, easier and type safe.

6) Webpack

- Webpack is a popular module bundling system which generates a build file joining all the dependencies.
- It checks for import and require statement in files and builds a dependency graph.

7) Babel

- Babel is a JavaScript compiler that includes the ability to compile JSX into regular JavaScript.
- This is used because not all web browsers can render JSX along with ES6 directly.
Here is my video on Key Terms in React JS 

Wednesday 31 January 2018

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.



Chapter : 1 - First code in Node JS Previously I have written a blog about Getting Started with Node JS and its installation. Now lets s...