News

Microsoft To Add React JavaScript to Visual Studio 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:


The Facebook React.js Conference 2015 Keynote Address

About the Author

David Ramel is an editor and writer for Converge360.

comments powered by Disqus

Featured

  • Vendors Update Controls for .NET Core 3.1, Blazor

    This week saw two third-party vendors of dev tools -- UX and UI toolkits and controls -- release new offerings that include support for two of Microsoft's main open source frameworks, the cross-platform .NET Core 3.1 and Blazor, which allows for creating browser-based web applications with C# instead of JavaScript.

  • C++ Is Focus of New Visual Studio 2019 v16.7 Preview 2

    C++ development is a focus point of the new Visual Studio 2019 v16.7 Preview 2, featuring a slew of tweaks and improvements touching upon remote SSH connections, IntelliSense support and more.

  • Clustering Non-Numeric Data Using C#

    Clustering non-numeric -- or categorial -- data is surprisingly difficult, but it's explained here by resident data scientist Dr. James McCaffrey of Microsoft Research, who provides all the code you need for a complete system using an algorithm based on a metric called category utility (CU), a measure how much information you gain by clustering.

  • So What's Up with Microsoft's (and Everyone Else's) Love of Rust?

    Microsoft already stewards several popular programming languages -- C#, TypeScript, F# -- so what's up with its love of Rust, along with the rest of the world?

  • C# Steps Up Programming Language Popularity Ladder

    Microsoft's C# programming language climbed a year-over-year notch on the TIOBE Index, which measures popularity among developers.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events