05. December 2015

RequireJS is not require()

It would have saved me time if I could have known this in the beginning. Like a lot of things in Javscript world, a same kind of name for two different functionalities makes a lot of confusion.

RequireJS is used to load AMD
require() is used to load CommonJS

Well, to add to confusion the require() function is available to both the module definitions. But both the require() do different things. For CommonJS require() loads modules in a synchronous way, while the require() in AMD ie; in RequireJS the modules are loaded in asynhronous way.

AMD style loading is

require(['path/myModuleFileName.js'],function(MyModule){
  // Use MyModule
  MyModule.doSomething();
});

In CommonJS its done as below

var MyModule = require('path/myModuleFileName.js');
// the line below is same as above, just removed the file extention .js
//var MyModule = require('path/myModuleFileName');

Happy requiring.

28. November 2015

How to React now.

Here is the way to React now.

  • Download React
  • Make a new html file
  • Include “react.js”, this gives us ‘React’ Object
  • Include “react-dom.js”, this gives us ‘ReactDOM’ Object
  • Write the a React component and use it. This is explained below.

The HTML file should look something as shown here.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React!</title>
  </head>
  <body>
    <div id="myReactApp">
      <!-- React Application -->
    </div>
    <!-- React library -->
    <script src="js/lib/react/react.js" charset="utf-8"></script>
    <script src="js/lib/react/react-dom.js" charset="utf-8"></script>
    <!-- Application Code -->
    <script type="text/javascript">
        // TODO
    </script>
  </body>
</html>

This HTML file has only a div with an id as id="myReactApp". Now lets write a React Component. The component code is as below.

var Component1 = React.createClass({
  render: function(){
    var reactComponent = React.DOM.span(null,"I am a Custom Span.");
    return reactComponent;
  }
});

Now lets add this component to our DOM. We are going to add this component in the div with id myReactApp. 

ReactDOM.render( React.createElement(Component1), document.getElementById("myReactApp") );

So the final HTML file with the added javascripts and our code will look as below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React!</title>
  </head>
  <body>
    <div id="myReactApp">
      <!-- React Application -->
    </div>
    <!-- React library -->
    <script src="js/lib/react/react.js" charset="utf-8"></script>
    <script src="js/lib/react/react-dom.js" charset="utf-8"></script>
    <!-- Application Code -->
    <script type="text/javascript">
        var Component1 = React.createClass({
                                render: function(){
                                    var reactComponent = React.DOM.span(null,"I am a REACT Component Span");
                                    return reactComponent;
                                }
                            });
        ReactDOM.render( React.createElement(Component1), document.getElementById("myReactApp") );
    </script>
  </body>
</html>

Now, if you run this from a server and view the page in the browser. You can see our compent is rendered in the div and it displays the text as ‘I am a REACT Component Span’.

Thats all is there to React. After this point all that remains is the APIs for Component development. But as you can see, React is not telling or expecting anything else. It just makes reusable HTML components. The architecture of the application is upon the developers.

Happy Reacting.

27. November 2015

React

React is a library from the famous social networking facebook.

Another Javascript Library ! Yes, lets face it. Now we can not escape the fact that every other day there is someone, somwhere making a new Javascript library.

React is not a competition with the huge frameworks like AngularJS or BackboneJS. It neither is competing with the DOM manipulation libraries like jQuery. But for some reason for me, it seems like, React is making a standard for itself. Like jQuery did it for DOM manipulation, becoming a go to library, React is making a place for itself.

React is a library to write components for DOM.

Well, so what does it do ?! It allows us to write reusable component to be used in our HTML. With React, its possible to combine one or more HTML tag/tags and add some javascript to add functionality. Then we can take that component as a whole and reuse it as many times as we want. Thats all that is to it.

There is JSX in React. JSX in simple words, would be writing Javascript as if we are writing HTML. Well, that might not be the case if you already know what JSX is, but for a first timer its easier to understand like that. The official document is very good resource to understand JSX. You are not bound to use it but then, it obviously is an option.

So, React is not a MVC or MVVM or MV* framework ? No, its not. But it just is a library to write reusable HTML visual compoents. Take this library wherever you want and use it. That means, we can use this library in other frameworks, if we want to. This is like taking jQuery and adding it to the places we like to use it.

Happy React - ing.