Getting Started with React.js in ASP.NET MVC (JNNC Technologies)

What is React?

React is a UI library developed at Facebook. It is a Javascript library for building user interfaces. It is used by Facebook and Instagram. JSX is the extension for the React.

React provides two features

1. Rendering DOM (Rendering the model to the DOM and keeping the DOM synchronized with changes to the model).
2. Events.

What is JSX?

It is a Javascript XML syntax transform. JSX supports xml like syntax inline in javascript. Each element is converted into a javascript function call.

JSX

Components

A react consists of set of components.

• PROPS
• STATE

The inputs to the components are referred as properties called as props and state, the difference between two is the state can change at any time.

To render an any element we use renderComponent method.

Example for renderComponent

1

2

3

4














React.renderComponent(

  <h1>ReactJS.Net in ASP.NET MVC 5</h1>,

  document.getElementById('myDiv')

);

In the above syntax, the first argument is the component we want to render, the second argument is the DOM node it should bind to. We can use the createClass method to create custom component classes. It takes an object of specifications as it’s argument.

Example for renderClass

1

2

3

4

5

6

7














var Component = React.createClass({

    render: function(){

        return (

            <h1>Hello, world!</h1>

        );

    }

});