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.
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.
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);
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:
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:
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.
Open the .pkg file and follow the Installer steps and that’s it.
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.
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.
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: