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: 

Leave a Reply

Your email address will not be published. Required fields are marked *