Host create-react-app on IIS Server

Install the latest version of nodejs from https://nodejs.org/ site.

Install create-react-app globally as below:

npm i -g create-react-app

Create the react-app in the folder of your choice on your local machine:

create-react-app hell-world-app

Modify the index.js file as shown below:

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello World</h1>;

//console.log(element);

ReactDOM.render(element, document.getElementById("root"));

Test the app on localhost:

npm start

Build the production optimized app:

npm run-script build

Copy the contents of the build folder and paste it on the Server at the location where you want to host it e.g. C:\data\testreactapp. Open IIS on the Server and add Website by right-clicking on Sites as shown below. Give it the required hostname or port to test it in browser e.g. http://helloworldapp.

The index.html file is already present at the Physical path created by the build which the IIS Server will look for as the default document.

Authentication can be Anonymous for testing purpose. However, please change as per your requirement. The AppPool by default runs with CLR 4.0 version and Integrated mode.

This approach is especially helpful when you have a back-end .Net Web API hosted on the same IIS Server to improve speed.

Update iframe without affecting browser history

You may face a scenario where you need to update the iframe element on your html page based on some JavaScript condition e.g. a calendar component may be running inside the iframe. Simply updating the “src” attribute causes the browser history to be updated and enables the forward and back browser buttons. This may cause issues in enabling/disabling holidays or weekend dates.

document.getElementById('calfrm1').src = "popcal.asp?target=form1.duedate&weekends=Y

The below code snippet uses contentWindow property of the iframe and replaces the location without affecting the browser history.

var ifr = document.getElementById("calfrm1");

ifr.contentWindow.location.replace("popcal.asp?target=form1.duedate");

Using replace() works only within your own domain iframes. It fails to work on remote sites.

You can remove and construct a new iframe element in the same spot to handle this. When you modify the src attribute, it creates history items as mentioned above, so make sure to set it before the append.

var container = iframe.parent();

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);

Create basic ReactJS app using VS Code

We’ll be using VS Code editor to create the basic app to get started.

Install Extensions like Simple React Snippets and Prettier in VS Code to help with writing basic react snippets faster and properly formatted.

From the VS Code menu, Select Preferences-> User settings->search for Format on Save. This will help format the code on saving the file using the Prettier extension.

You’ll also need the latest stable versions of Node and npm installed.

Enter in Command Prompt on Windows or Command Line on Mac the below commands:

npm i -g create-react-app@1.5.2

This will install the Create React package globally.

Enter the below command to create the App in the directory of your choice:

create-react-app react-app

What is JSX?

JSX is a syntax extension to JavaScript. It is recommended using it with React to describe what the UI should look like, however it is not necessary. JSX produces React “elements”. JSX code is compiled by Babel, which is a modern JavaScript compiler that compiles JSX code to corresponding React code that Browsers can understand. The render method may contain JSX code.

Sample React class looks like below:

class MyComp {
	state = {};
	render() {
	
	}
}

State holds the data to be displayed in the UI and render method is responsible for describing what the UI should look like i.e. a React element.
This React element is a plain Javascript object that maps to a DOM element.

How React reacts!

It is a light-weight representation of the DOM in memory which is also called Virtual DOM. This virual DOM is cheap to create. When we change the state of a component, we get a new React element. React will then compare this element and it’s children with the previous one and it figures out what is changed. Then it will update a part of the real DOM to keep it in sync with the Virtual DOM. Hence we don’t need to use the DOM API to manipulate it or attach event handlers with the DOM elements. React will automatically update the DOM to match that state.

React simply reacts to the state change and updates the DOM.

index.js is the entry point for the default created application.

registerServiceWorker.js serves assets from a local cache in the Production environment. It may change or disappear in the future.

index.html has a div element as a container with id “root” that will render all the React Components.

Run below command in the integrated terminal in VS Code, this will run the app using the light-weight development Server installed with create command above using default port 3000:

npm run start

You can access the app using http://localhost:3000 in a browser as below:

Delete all the existing files in the src folder. Create a new file called index.js.

Make changes to the file and save it. It will refresh in the browser which is called hot module reloading.

Modify index.js file as below:

import React from "react";
import ReactDOM from "react-dom";

const element = <h1>Hello World</h1>;

console.log(element);

This Object as shown in the browser dev tools above is part of the Virtual DOM.

So, whenever this Object changes, React will get a new React element, it will then compare this element with the previous one. It will figure what is changed. Then it will reach out to the real DOM and update it accordingly.

Remove the line console.log in the index.js file with below and save:

ReactDOM.render(element, document.getElementById("root"));

Run the application and inspect the element in the browser to see how the element is rendered.

Setup Nodejs on Mac and build your first app

What is Nodejs?

Node is a C++ program or run-time environment that allows JavaScript code to run outside of a browser using Chrome’s V8 JavaScript engine. It is not a framework like Asp.net or Java and hence should be compared with them.

Node is asynchronous or non-blocking by nature. A single thread is used to handle all requests. It is ideal for I/O intensive apps. The thread doesn’t wait e.g. for the database query to complete before moving on to another request.

Node should not be used for CPU intensive apps like video encoding or image manipulation and the likes.


Chrome’s V8 embedded in Node

Setup Nodejs on mac?

  1. Go to the Download page for Nodejs.
  2. Download the LTS version .pkg Mac installer file.
  3. Open the .pkg file and follow the Installer steps and that’s it.
  4. Open terminal on Mac and run command “node -v” which displays the installed version on your machine. This will confirm whether the node runtime was properly installed.

You may need to update the npm CLI client as fixed version is installed with the LTS version, npm is the package manager for Javascript. Run the following command at the Terminal:

$ sudo npm install npm --global

Start exploring and build your first app. At the terminal, run the following commands:

$ cd Documents
$ mkdir node-course
$ cd node-course
$ mkdir first-app
$ cd first-app
$ touch app.js

The above commands brings us inside the new created folder first-app and created our JavaScript file app.js. Now open this file in your preferred editor like Sublime, atom, Visual Studio Code or Visual Studio for Mac. I’m using the Visual Studio for Mac Community edition. In the editor, add the below code to app.js:

function sayHello(name){
    console.log('Hello ' + name);
}

sayHello('Pulkit');

Back to Terminal, run the app:

$ node app.js

You should see the following output:

Hello Pulkit

Hence, you successfully run your first app using node on Mac.

Http POST request with jQuery ajax

One of the most common scenarios is making client side Http calls to URLs to external or internal domain using jQuery ajax. In this demo, I’ll show how to call Page static method of an ASP.net method written for an aspx page using C#. The requirement is to use headers that need to be passed along with POST data.

var dataSent = "{firstName : '" + firstName + "', lastName: '" + lastName + "', pID: '" + pID + "'}";

I used the following Javascript method to generate Guid which is RFC4122 version 4 compliant solution.

var Guid = createGuid();

function createGuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}

Below is the jQuery ajax POST request calling the Page static method DemoMethod in the DemoPage.aspx.cs file with the following signature:

Server-side public static method:

[WebMethod]

public static string DemoMethod(string firstName, string lastName, string pID) {return "demo";}

Client-side jquery ajax call:

$.ajax({
type: ‘POST’,
url: “DemoPage.aspx/DemoMethod”,

contentType: “application/json; charset=utf-8”,
dataType: ‘json’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
‘firstName’: firstName,
‘lastName’: lastName,
‘x-requestKey’: Guid
},
data: dataSent,
async: false,
success: function (response) {
alert(response);
if (response != null && response.d != null) {
alert(response.d);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(‘error’);
}
});

The response in the success part will be received by the object “response” and can be accessed using the response.d property.