A new UI Kit for React-Native

I love Javascript.

And I have come to love ReactJS a lot more than I had loved any other Javascript library, sorry jQuery.

In the last few weeks, I have been learning React Native, while putting together an iOS app for a project of ours. While working with React Native, I realised that there isn’t a default styling/component kit available for creating native mobile applications. The ones that are there are not open source, each coming with a decent enough price tag.

And then I realised that even though React Native uses some form of stylesheets, I cannot simply drop the stylesheets from Twitter Bootstrap and expect it to work.

So I got down to creating usable UI components, with the style borrowed from Bootstrap.

It’s far from finished, but at the time of writing this you can use it to create a text input field with a label, and the six types of buttons provided by Bootstrap. I’ll keep adding more components to the kit as time permits.

Go ahead and use it, share it, give me feedback, and contribute to it if you would like to.

https://github.com/hypnosh/ui-kit-for-react-native

jQuery tip: all ready?

I came across this post about a common jQuery mistake by Michael Tran, and found it interesting. Yes, you need to load your jQuery library before you load your jQuery-specific-scripts or they would not work.

But here’s a mistake I commit often, of treating the event binding declarations as function declarations. Often I write code like this:

<script>
  $("#button").click( function() {
    alert("clicked!");
  });
</script>

And then wonder why nothing happens when I click on <input type="button" id="button" value="Click me!">. Well, that is because the $("#button").click(…); code never gets executed!

Executed? Exactly. As I said it’s not a function. The function is already defined as function() {…}, right? We need to execute the jQuery event binding. When? As soon as the document is ready. How? Nine ways to skin the cat, three (as far as I know) to tackle this problem.

  1. In the body tag
    Simply put,

     <script>
      function loadingRoutine() {
        $("#button").click( function() {
          alert("clicked!");
        });
      }
    </script>
    <body onLoad="loadingRoutine();"> 

    But this means contaminating your markup with behavioral code. I, never!

  2. Using a jQuery event
    The onLoad event has a different name in jQuery: $(document).ready();. You use it thus:

     <script>
      $(document).ready( function() {
        $("#button").click( function() {
          alert("clicked!");
        });
      });
    </script> 

    This way you don’t have to put any javascript in your body tag.

    You can also use jQuery(document).ready(…); instead, but $(… is shorter and faster, innit?

    What really happens here is that the moment the HTML document is ready the $(document).ready(); event is triggered, much like the body’s onLoad event, and it binds all your jQuery behaviours to the events as you wanted.

  3. jQuery shortcut
    It’s the same $(document).ready(); event, but this time it’s way shorter, cuter and faster. It is $(…);. The usage:

     <script>
      $( function() {
        $("#button").click( function() {
          alert("clicked!");
        });
      });
    </script> 

There’s another way to call the $(document).ready(…); event: $().ready();, but the jQuery documentation advises against it. And who needs $().ready(); when you have $();?