JQuery Versus React - Simple Code Comparison

JQuery, React, The power of Javascript

JQuery has been an amazing Javascript library for DOM manipulation, for me this is the easiest way to do anything GUI manipulation, even though people switch to React nowadays and never use JQuery in React. I am still love with JQuery, doing complex DOM processing is hell lot easier than using.

It's just matter of paradigm, when using JQuery with just simple JQuery syntax you can do anything related to DOM manipulations, while in React you do everything working in component way, playing with state and props, that's what makes React is much more maintainable, because your React component for even small thing like labels or buttons can be reuse anywhere in your project, or even other projects if you modularize your components.

Here's an example on how you do text manipulation inside a HTML div element, using JQuery and React.

1. JQuery

<div>
 <div id="someElement">
    Hello world!
 </div>
 <button id="someButton" >
    Click me!
 </button>
</div> 

<script>
$(document).ready(function(){
   $('#someButton').on('click',function(){
      $('#someElement').text('Hello World Changed!');
   });
});
</script>

2. React

var ExampleComponent = React.createClass({
  getInitialState : function(){
    return ({isClicked : false}) 
  },
  handleClick : function(){
    this.setState({isClicked : !this.state.isClicked});
  },
  render: function() {
    var newText = this.state.isClicked ? 'Hello World Changed!' : 'Hello World!';
    return
    (<div>
       <div id="someElement" >
          {newText}
       </div>
       <button id="someButton" onClick={this.handleClick}>
          Click me!
       </button>
     </div> );
  }
});
ReactDOM.render(<ExampleComponent />,document.getElementById('content'));

For new comers front end web developer, i would highly suggest you to learn React as your main front end UI framework, this is in my opinion the best way to build a UI, not only for web, but also for desktop even mobile. JQuery is a thing in the past, it may not be the best solution anymore for developing front end application, but still JQuery is must to learn if you want to considered as frontend developer, some legacy codes is heavily using JQuery even some new coming app, some developer still consider JQuery as their main front end library because it is so much useful.

Comments

Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

How To Create Spring Boot Project Using Netbeans

How To Connect SSH Using PEM Certificate On Windows

How To Use React Ckeditor Upload File Image With Demo and Example Codes