React

reactjs

React.js is the library form Facebook(developed in 2013) to develop component and released as an open-source project. It’s all about reusable components.However, unlike frameworks, which are built with the goal of getting whole apps up and running quickly, the only thing you do with React is build components. As React.js’s core functionality, components make reusing code, testing, and separating concerns easy. Many people choose to think of React as the V in MVC. React.js is the 5th most starred JavaScript library on Github, falling just behind Angular, D3, jQuery, and HTML5.React lets you express how your app should look at any given point, and can automatically manage all UI updates when your underlying data changes. React.js is declarative, which means that React conceptually hits the “refresh” button any time data changes, and knows to only update the changed parts. A ReactJS component can be created using createClass() method.This method has the definition of component.

We built React to solve one problem: building large applications with data that changes over time.

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.

React Features:

JSX − JSX is JavaScript syntax extension. It isn’t necessary to use JSX in React development, but it is recommended.

Components − React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects.

Unidirectional data flow and Flux − React implements one way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0.

React Advantages

  • React uses virtual DOM which is JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
  • React can be used on client and server side.
  • Component and Data patterns improve readability which helps to maintain larger apps.
  • React can be used with other frameworks.

React Limitations

  • React only covers view layer of the app so you still need to choose other technologies to get a complete tooling set for development.
  • React is using inline templating and JSX. This can seem awkward to some developers.

Example:

Install React.js and ReactJS.NET(React.Web.Mvc4) package from the Nuget console package manager by the following command:

PM> Install-Package react.js

PM> Install-Package React.Web.Mvc4

or by Nuget window

react nuget

Create First.jsx file in the scripts folder as in below image:

react3

Create First.jsx file in the scripts folder and paste the below code to print text in the view .

var App = React.createClass({
render: function(){
return(
<h2> This is my first Program in ReactJS!!! </h2>
);
}
});
React.render(<App/>, document.getElementById('content'));

Now we will create a component that will renders the text in the view. Before that we create a div  with id “content” in the view or page and add the reference of “First.jsx” and “react.js” file.

 <div id="content"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="~/Scripts/First.jsx"></script>

react4

Now build and run the app.
react5

I hope you will enjoy ReactJS  to print hello world program. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Leave a Reply

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