Previously we started learning AngularJS, Web API etc. with ASP.NET MVC (server-side). Today we are going to start React.js with asp.net MVC application. Are you ready to start?
Ok, let's start with some basic introduction first then we will deep dive into react.js
About ReactJS
React is a library for building stateful & reusable components. It's developed at Facebook.Getting Started
Let's get start with a "Hello World" example.<html>
<head>
<title>Hello World Example - ReactJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('myDiv')
);
</script>
</body>
</html>
Here in the "Hello World" example, you can see I have included react.js, react-dom.js and browser.min.js, and then written few line of js code inside a script node with type set to text/babel. If you see carefully I have written<h1>Hello, world!</h1> (XML syntax) inside render method, which is called JSX. It makes the code more readable and writing it feels like writing HTML. In this "Hello World" example we used <script type="text/babel"> and included browser.min.js to perform JSX (XML-like syntax) into native JavaScript code.Why I love ReactJS
React top feature is SPEED.How React rendering is faster than other frameworks? Actually, React makes use of a virtual DOM. React never update the whole DOM every time unlike another framework like Angular Or Backbone. When a component's props or state change, React runs a “diffing” algorithm to identify what has changed then decides whether an actual DOM update is necessary by comparing it to the old one. React only update the changed parts, you can see here in the below example. Here type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior.
Components
Components are the heart of ReactJS. We can create a component class using React.createClass() method which must implement render method that takes input data and returns what to display (HTML). render method returns a single child element.Props and State
React components generate HTML from "model" data. There are two types of "model" data in React: props and state. props (short for properties) are immutable (can not change), Props are used to pass data & event handlers down to child components, whereas states are mutable. States are in charge of client-server communication, processing data and responding to user events. When state changed, we need to inform React of a data change is by calling setState method for re-renders the component and keep our UI up-to-date.
Later we will know more about ReactJS. Now it's time to start doing an example using ReactJS.
Later we will know more about ReactJS. Now it's time to start doing an example using ReactJS.
What we will learn?
Here I am going to cover ReactJS with ASP.NET MVC (server-side) application. We’ll start with an empty project and go ground up step by step. Here We will cover from the very beginning to advanced level. Then we will create some real application using ReactJS (as client-side ) and ASP.NET MVC(as server-side).Here we will do the followings...
- ReactJS "Hello World" example in ASP.NET MVCVideo
- Displaying tabular data from database in react jsVideo
- Next Part(s) Coming Soon...
