RSS

Tag Archives: Dev Tools

Using JSX With Bable to Write React JS Components

I have been working on number of AngularJS and lately into React JS development as well. If you write ReactJs components just using pure JavaScript it might be tedious task to write virtual DOM to actual browser DOM friendly structure that is necessary by the framework in JavaScript.

Eg.

var Menu = React.createClass({
    render: function () {
       return React.createElement("nav", {
         className: "nav navbar-default"
    },
        React.createElement("div", {
          className: "container-fluid"
        },
          React.createElement("ul", {
            className: "nav navbar-nav"
          },
            React.createElement("li", {
              className: "active"
            },
              React.createElement("a", {
                className: "active",
                  href: "#"
              }, "Home")),

           React.createElement("li", {
              className: ""
           },
              React.createElement("a", {
                className: "",
                href: ""
               }, "Contact Us")))));
              }
});

ReactDOM.render(React.createElement(Menu, null), document.getElementById("menu"));

As shown below all above code is just about rendering following simple html menu :-).

menu

Actually this is an insanely unmaintainable structure and this kind of structure is indeed for ReactJs to build the virtual DOM structure that is being internally used.  One obvious choice that given by ReactJs authors is to utilize a transpiled language.

What is Transpilation?

Transpilation is converting one programing language grammar into another programing language typically trough compilation.

One such compiled language is React JSX or React JS extensions.  So React JSX is a language which transforms from a XML like syntactic sugar into actual JavaScript. XML elements, attributes and children are transpiled into arguments that are passed to React.createElement with appropriate nested structure.

How to Use JSX?

One popular  JSX transpiler is Babel.

To setup Babel go to root of your application and execute following in your node command prompt,

npm install babel-cli --save-dev

Note: You need to install NodeJs and npm for this to work

Next we need to setup React for Babel with following.

npm install babel-preset-react -- save-dev

Above will install react transpiler plugin support in node for Babel.
Next we need to setup basic package.json script to easily transpile our JSX files. To that we need to tell in which folder we have JSX files and into which folder the transpiled files should be copied as shown below in package.json file.

  "name": "reacttest",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "devDependencies": {
    "babel-cli": "^6.6.5",
    "babel-preset-react": "^6.5.0"
  },
  "scripts": {
    "build": "babel js -d built --presets react"
  },
  "author": "",
  "license": "ISC"
}

In above we include “babel js -d built –presets react” which tells that “js” folder is where we have JSX files and “built” folder is where we need to copy transpiled files. As indicated in my project explorer below.

project explorer
Babel Transpilation Source And Target Folders

So we can rewrite the initial menu example with JSX as shown below in the react component,

var Menu = React.createClass({
    render: function() {
       return (
<nav className="nav navbar-default">
<div className="container-fluid">
<ul className="nav navbar-nav">
	<li className="active"><a className="active" href="#">Home</a></li>
	<li className=""><a className="" href="">Contact Us</a></li>
</ul>
</div>
</nav>

       );
    }
});

ReactDOM.render(React.createElement(Menu, null), document.getElementById("menu"));

Notice the return statement where you just return more close to HTML version of XML(please note the use of “className” instead of standard “class”). This will be transpiled into native JavaScript that will be syntactically identical to our code sample with code to build the react component if we execute below command in Node command prompt.

npm run build

this will run “build” npm script to compile with babel as shown below.

babel transpilation
Bebel Transpilation Step

Furthermore, you can integrate this command to Gulp or Grunt task runners which maybe to include a development build workflow to make this bit easier.

Advertisements
 
Leave a comment

Posted by on March 12, 2016 in ASP.NET, Babel, JSX, React

 

Tags: , , , ,

Using Google Chrome As A Simple Web Text Editor

All web developers have awesome text editors or beyond text editors which we call IDEs which do many services such as Visual Studio, Web Storm, Sublime….. (names are a very few here).
However when we develop websites when it comes to debugging many developers use either firebug or chrome devtools. These tools also allows you to do “live edit” which is very compelling. For chrome devtools most of the time the work flow is as follows,
• Using chrome devtools edit CSS, JavaScript etc. within chrome devtools itself
• Copy the edited CSS,JavaScript etc from chrome devtools and copy paste to corresponding source files in the disk
However above workflow bit annoying but most of the time developers live with. The reason is it is not only additional work but error prone thing where you might miss certain lines of code from copy pasting process especially if you edit multiple source files through chrome devtools.

What you can do is to use Chrome devtools “workspaces” feature. In summary what workspaces allow you to save edited CSS, Javascript into the disk through chrome devtools itself which by removing additional step of copy pasting them into source files which is the annoying and error prone step. If you wonder how this is possible you just map your location of source files to disk. Yes this might not always work for all virtual folders but most of the time it will.

First step is to open chrome devtools and right click on source tabs white area as shown below.
add-workspace

Clicking on Add Folder to workplace will open OS file/folder browser.

browse-local-folder

After you do it, the edits you do will be persistable to your disk right from chrome devtools it self(with Ctrl + S)
3. save to disk after edit

There are number of other operations you could do such as deleting files, duplicating souce files… etc. from chrome dev tools, if you just right click on the source file in “Sources” tab you will see some of these options.

 
Leave a comment

Posted by on March 11, 2015 in Dev tools

 

Tags: , , ,