React JS setup using ES6 with .tsx files in Visual Studio

Download Source Code

When i’m a beginner to React i’ve faced many issues in making setup with Visual Studio. As i’ve found that there are many ways to write React code.

  • Can be written in Js  files using ES5
  • Can be written in JSX files using ES5
  • Can be written in TSX files using ES6

tsx –> ts (typescript) + jsx ( javascript and xml)

Where most of the tutorials were providing setups with JSX/JS using ES5.  Now i’ll show you how to setup in your local environment Visual Studio using ES6 with TSX (typescript syntax).

Step 1: Install Npm

  • To install the React Js we need Node Js environment setup.
  • js development environment can be setup in Windows, Mac, Linux and Solaris. The following tools/SDK are required for developing a Node.js application on any platform
    • js
    • Node Package Manager (NPM)
  • NPM (Node Package Manager) is included in Node.js installation since Node version 0.6.0., so there is no need to install it separately.
  • To Install Node visit Node.js official web site https://nodejs.org. It will automatically detect OS and display download link as per your Operating System.Click on Download and install the latest version.
  • Once you install Node.js on your computer, you can verify it by opening the command prompt and typing node –version. If Node.js is installed successfully then it will display the version of the Node.js installed on your machine, as shown below.

Step 2: Create ASP.Net Web Application

  • Open Visual Studio FileNewProject
  • Select->”Web Template”->select the ASP.Net Web Application->Click OK
  • In the “New ASP.NET MVC Project” dialog, Select the MVC Template->Click OK
  • Goto->Tools-> Options –> Projects and Solutions –> Select External Web Tools->Move $(PATH) to above the $(DevEnvDir)->Click Ok

Step 3: Create package.json file and install the required packages using npm commands. Open Command prompt and Goto your project directory and run command

 

2. Now provide a name using lower case. And you can just click enter and say Yes.

  •  Install webpack

  • Install webpack-dev-server

  • Install react and react-dom. React and ReactDOM are generally used together. ReactDOM is a package for working with the DOM

  • Now we need typescript and ts-loader to load and build .tsx files

File: package.json

 

Step 4:  Download React Quick Start files 

Go to the following link and download React Quick Start files

Step 5: Copy required folder into your ASP.Net Web Application

  • Copy dist, typings and src folders  from quick start files and paste them in the project.
  • dist —> This folder has bundle.js which will be always update by using Web Pack Task Runner.
  • typings –> This is used to provide typescript intellisence to .tsx files
  • src –> This is the folder where we create .tsx files and do some coding part.
  • When we do any changes in .tsx files make sure that you run the Web Pack Task Runner. Unless the changes will not get updated in bundle.js.

Step 6: Copy webpack.config.js in the project directory.

  • In order to use external modules webpack.config.js must be included with resolve:{extensions: [‘.ts’, ‘.tsx’, ‘.js’, ‘.json’]}.
  • entry –> You can setup startup file here.
  • output: To direct the changes in .tsx to bundle.js.
  • module: Setting up the loaders that are used. Here we are using ts-loader. 

File: webpack.config.js

 

Step 7:  Copy tsconfig.json and typings.json files from quick start and paste them in the project.

Step 8: Install WebPack Task Runner .

  • Now right click webpack.config.js –> open Task Runner Explorer
  • Click on Run-Development / Watch-Development.
  • If any error in the we can l0ok at the error from Run-Development / Watch-Development.

Step 9: Add div tag in the index.cshtml with an id attribute. Refer that id in src –> index.tsx.

File: Views –> Home –> index.cshtml 

File: src/index.tsx

Output: 

How to Export Html Table to Excel with CSS

Download Source Code

To export your table data (or) a list into excel workbook, there are several options to export like, we can use Microsoft.Office.Interop library or something else. But in this tutorial i want to show you the simplest way to export the Html Table to Excel with Inline CSS applied using very few lines of code.

  • Here the Excel creates a file that contains the Html and XML tags which is also called as Html/XML Hybrid. When a WorkBook saved in the following format with Html and XML tags, it can go from Excel to the Browser and back form Browser to Excel again without loosing any information.

Step 1:  Create a simple html code as following. Here we can create ‘N’ number of WorkSheets in a WorkBook.

  • From the above code X:Name  in the X:ExcelWorkSheet is the name of the sheet in the Excel.
  • And we can specify the required options to the WorkSheet with in <x:WorksheetOptions>. Here are the few more <X:WorkSheetOptions>
    •   <x:Selected/>   

    • <x:DoNotDisplayGridlines/>   

    • <x:ProtectContents>False</x:ProtectContents>   

    • <x:ProtectObjects>False</x:ProtectObjects>   

    • <x:ProtectScenarios>False</x:ProtectScenarios>

  • And the If condition <!–[if gte mso 9]> is used to check whether you have Microsoft Office or not. It’s really necessary to check this.

Step 2: Create a Html table with inline Css in the <body>

 

Step 3: Add the following Script in the <head>.

  • function (table, name) { … } is the function which is accepting the two parameters,
    • one is the Id of the table.
    • other is the name of the X:ExcelWorkSheet. 
  • template: It is just a string which is constructed with Html/XML hybrid.
  • base64 = function(s) –> accepting the parameter of the format which is framed by using function format = function (s, c).
  • format = function (s, c) –> accepting two parameters,
    • One is the template with HTMl and XML tags.
    • Other is the ctx object which is framed with two properties { worksheet: ‘ ‘, table:’ ‘}

Step 4: Here is the total HTML page.

Output:

Dynamic Tree Using Angular 2/4

Hello Angular Experts and Beginners, if you really stuck in a situation how to form dynamic tree using  <ul> and <li>. I’m sure that this blog will definitely helps you.

Download Source Code

Step 1: Prequisite you should have a json data in a format as follows.

Step 2: Once you have data create the following structure in your angular project

File: test.json

 

 

Step 3: Creating declaration file for javascript file.

Here we are now creating a declaration file for the javascript file (myscript.js) using Ambients in typescript.

For reference of TypeScript Ambients please follow this post Typescript Ambients

File: myscript.js

File: myscript.d.ts

Step 4: Once declaration file is ready then create component and template and add reference of declaration file in the component

File: app.component.ts

File: template.html

Note: In the below code i’ve created Recursive ng-template. 

  1. #mylst1 is a template reference variable for the ng-template
  2. let-list –> here we are defining a local variable. let is a key word to declare variables in typescript.
  3. ng-container –> It’s a container to group html elements, which is same as ng-include  in AngularJS. For reference please follow the link 
  4. $implicit –> It is used to set the value for our ng-template using context property of ngTemplateOutlet.

File: app.module.ts

File: main.ts

Step 5: Create a html file in src/DynamicTree.html folder

File: DynamicTree.html

Output:

Date time picker in angular 2/4

Download source code

To add datepicker and timepicker in angular 2/4 forms we have a good builtin components given by ng2-bootstrap. No need to go for other third party date pickers which might work or may not. Ng2-bootstrap provides us all the feature of the normal bootstrap which we use daily. So you can just blindly remove the bootstrap and replace it with ng2-bootstrap/ ngx-boostrap.

Step 1: First you need to install the package using npm 

Install commands

  • Open command prompt –> go to you project directory –>  npm install ng2-bootstrap –save –> run command
  • Similarly install  npm install moment –save

Step 2: Now  configure the ng2-bootstrap in systemjs.config.js

Go to systemjs.config.js,  add the moment and ng2-bootstrap npm packages to the map  as below

Now add these packages in the packages

Step 3 : Import DatepickerModule, TimepickerModule  in Root NgModule

import { DatepickerModule, TimepickerModule } from ‘ng2-bootstrap’;

 

Step 4 : Create component and add the components to your html

Output:

 

 

D3 tree with context menu on various levels

Download source code – D3 Tree using HTML

Download source code – D3 Tree Using Angular 2/4 

 

Step 1: Creating html file to display the D3 Tree

From the example given get the Javascript libraries and Stylessheets.

d3chart.html

Step 2: Sample data in json file

sampledata.json

Step 3: Modify the tree_collapsible.js to create new context menu

In the function treeCollapsible( ) do the following changes to create context menu for different levels.

  • After declaring d3Container variable,  create context menu as follows

  • After diagonal projection get Json file data using Ajax.
  • Now group names as per the levels. from the below code groupNames[] will have level 1 and memeberNames[] will have level 2.
  • And root node is assigned to the root variable as root = treeData[0];

Output:

 


How to use this D3 Tree in angular 2/4 ?This is the place where Typescript Ambients comes into picture.

What is Ambients ?

Ambient Declaration is the process of providing declarations for user javascript as well as for javascript third party libraries. Third party libraries can be either JQuery, AngularJS, Node JS, Require JS, Polymer JS etc.

  • Developer no need to rewrite the third party bundles. We can just make use of them in typescript with type-safe.
  • It enables Intellisense  feature for third party bundles of all the variables and its methods.
  • Ambient declarations will have an extension (.d.ts), where‘d’ denotes the declaration.                                         Ex: sample.jssample.d.ts
  • It’s not mandatory that declarations must be in a declaration file with extension (.d.ts) it can be either in (.ts / .d.ts), but it’s recommended to separate the declarations in a separate file.
  • If a file has the extension.d.ts then each root level definition must have the declare keyword prefixed to it, so that the programmer can make sure that declared items will exist at run time

Ex:

Step 1: Let’s Assume we have a javascript file sample.js

File: Sample.js

Now we need to modify this sample.js as follows

Step 2: Create declaration file for sample.js

File: sample.d.ts

Step 3: Provide reference of declaration file sample.d.ts in the component

 


Now similary we need to modify the file tree_collapsible.js from the above example.

Step 1: Modify the tree_collapsible.js. And change the path of the sampledata.json

Step 2: Creating declaration  file as follows tree_collapsible.d.ts

Step 3: Provide reference for declaration file in the component. We need to load the function with in ngAfterViewInit( ). 

Reason behind this is before initializing the component template if we load the function, D3 component would not be able to find the element that is required to draw SVG.

 

Step 4: Create template for Component

File: template.html

Step 5: Provide references of the required files for D3 Tree in the main HTML page.

File: src/Index.html

Note: You will get the same output. If not check if any errors in browser console window. Errors mostly will be file not found. If that is the issue please give the relevant path.

Stuck with the back button / page refresh issue in Angular 2/4 ?

Step 1: Import LocationStrategy, HashLocationStrategy from @angular/common library in your Root NgModule

Ex: import {LocationStrategy, HashLocationStrategy } from ‘@angular/common’;

Step 2: Create a provider with token as LocationStrategy and its dependency as HashLocationStrategy

Ex: providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]

 

How To Upload Files In MVC Using Ajax

I Assume you have a file input control and you need to upload the files asynchronously  to your server. To do this we have FormData() i.e FormData() can be appended with the data as key-value pair.

From the following code

  1.  key: “selectedImage”, value: file
  2.  key: “userId”, value: 10

 

Step 1: Frame FormData  for passing file with  parameters (if required)

 

 

Step 2: Write Controller Action method code