News

Microsoft To Add React JavaScript to Visual Studio 2015

• By David Ramel
• 02/20/2015

In response to overwhelming user requests, Microsoft has started a project to add support for a React JavaScript component to Visual Studio 2015.

(Note: an earlier version of this article incorrectly reported that the JSX support was being added to Web Essentials. While the request to add JSX support was featured on the User Voice site for Web Essentials, the new capability won't be part of the Web Essentials package. We regret the error.)

Specifically, the project is to add React JSX support. JSX is the XML-like syntax extension for JavaScript commonly used with the React library. JSX support has long been the No. 1 request on the Web Essentials User Voice site used to gather feature requests from the user base, garnering more than four times the number of requests of any other project.

JSX, to accommodate the React approach of coding, makes extensive use of embedded HTML within JavaScript used to compose React components, the building blocks of the library.

Last week, Web Essentials Program Manager Mads Kristensen announced Microsoft is finally taking on the project:

We've started working on a prototype today. If everything goes according to plan, JSX support will be included in Visual Studio 2015 RTM. Fingers crossed.

Visual Studio 2015 is expected to arrive in the second or third quarter of this year.

For more than a year, Kristensen has been messaging back and forth with users in the comments section on the Web Essentials request site, gathering input and sharing details about implementation plans.

React provides a radical new way of building UI views. It has been described as a library for the View part of the Model-View-Controller (MVC) approach. Developed internally at Facebook and then open sourced in 2013, it defies some traditional JavaScript conventions regarding separation of concerns and project structure.

Immensely popular on the Web, the ReactJS way of coding will also be coming to bear on native mobile app development via a React Native project announced by Facebook engineers at a developer conference earlier this month.

Some of the features that make React unique are a declarative programming style, a Virtual DOM used to re-render only components that have changed via a "diffing" process, and one-way data flow that helps simplify the mental models programmers need to keep in their heads while working with various components.

React components are created through JavaScript variables that use a createClass method to render HTML that presents data supplied in the form of properties ("props") or state, depending on whether the data will be subject to change.

For example, here's the simple Facebook "Hello" component in JSX that gets the "name" property assigned to the component when it's created in the React.render method (click on "Edit in JSFiddle" to fiddle around with the code and see live results):

For production, that gets compiled into plain JavaScript that looks a little more verbose:

var HelloMessage = React.createClass({displayName: "HelloMessage",
  render: function() {
    return React.createElement("div", null, "Hello ", 
    this.props.name);
  }
});

React.render(React.createElement(HelloMessage, {name: "John"}), 
  mountNode);

Facebook's Tom Occhino, in announcing the React Native project at the developer conference earlier this month, noted that React has several advantages in addition to the Virtual DOM that has now become commonplace in other JavaScript frameworks. These include server rendering, a custom event system, descriptive warning messages and many more.

"But the thing that makes all these features and more possible, is the fact that React replaces an imperative, mutative API with a declarative API that favors immutability," he said.

Although designed by in-house engineers -- primarily Jordan Walke -- for the incredible scale-out needs at Facebook, Occhino and other coders are enthusiastic about the benefits of React.

"I think that React's real power lies in how it makes you structure your code in terms of React components," Occhino said.

Here's the video that reviews the creation of React for Web and introduces React Native in case you want to hear the whole story yourself: