Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • ReactJS Overview

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 266
    Comment on it

    ReactJS is an open source javascript library which is developed by Facebook. It is used for building user interfaces.

     

    Introduction:

    1. It is widely used to create mobile and web application.
    2. It allows to create reusable UI components.
    3. It creates its own Virtual DOM.
    4. It makes the process of building apps very simple.
    5. It provides the possibility to create apps that are updated from time to time without the need to reload the page.
    6. It is just the View and output is simply HTML.

     

    Component

    ReactJS consider everything as a component. It has no Controllers, Directives, Views, View model, Templates, Global event listener, has just COMPONENTS (these are  reusable, testable and maintainable)
    Example – Shopping Cart
         We can separate concerns like CartComponent, CartList Component , Cart ListItem Component and Button Component.

     

    Virtual DOM

    Virtual DOM is a simpler programming model.It uses render() to create real DOM. Rather than touching the DOM directly, we build an abstract version of it. It modifies real DOM when something changes. Here DOM is not used as DOM was never optimized for creating dynamic UI.

     

    JSX

    JSX is a JavaScript syntax extension which looks similar to XML. JSX syntax can be used with React. One can also used JS with React but it is recommended to use JSX as it has a familiar syntax like XML to define tree structures with attributes.

    Take an example of Hello World:

    Create an aspx page, take a div control in it. Use two js files directly or can download it from NuGet packages

    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <div id="content"></div>

    Create a js file with an extension of jsx and use it in created aspx page, use the div control to populate the data

    var HelloMesssage = React.createClass({
        render: function() {
            return (
              <div > Hello, world!
              </div>
          );
        }
    });
    ReactDOM.render(
      <HelloMessage />, document.getElementById('content')
    );

    Here "HelloMessage" is a component and ReactDOM.render is used for rendering into the real DOM.

    Hope it will help you. Thanks

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: