How to Launch Task Manager on Ubuntu

When I started using ubuntu, one of the windows feature that I missed most is task manager. Simply click Ctrl+Alt+Del to start task manager and do the require activity.

Here is the way to get simillar functionality on ubuntu.

Ubuntu does have its own task manager. You can activate it by following command

gnome-system-monitor  

Try it yourself and see the output.

Now we need to assign keyboard shortcut to invoke system monitor aka task manager. This can be set by System Settings -> Keyboard.

Click on Shortcut and add shortcut name and in command add name ‘gnome-system-monitor’ without quotes.

Once done, newly created shortcut be found in Custom Shortcuts. click on the task force and it will request for the shortcut to be used. You can use whichever shortcut you want, I prefer to use Ctrl+Alt+Del.

And you are done. If any application is stuck or you want to see the system performance, just click Ctrl+Alt+Del.

Change Node.js version to specific version

Many times we have some dependency which forces us to use some specific Node.js version. Specific Node.js version can be installed as below:

Step#1

  • clear the cache by sing following command
$ sudo npm cache clean -f

Step#2

  • Use following command to install node globally and specify the required version.
$ sudo npm install -g n
$ sudo n 6.9.5

You will receive following confirmation of Node.js installation:

User@hostname:~$ sudo n 6.9.5

     install : node-v6.9.5
       mkdir : /usr/local/n/versions/node/6.9.5
       fetch : https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.gz
######################################################################## 100.0%
   installed : v6.9.5

Alternatively, you can download required Node.js version from Node.js repository http://nodejs.org/dist/

Use following command to download required version file.

$ wget nodejs.org/dist/v0.10.36/node-v0.10.36-linux-x64.tar.gz

Same package can be downloaded without command line utility as well. install the this compressed file to get your required Node.js version.

react js router tutorial

After getting started with basics of react, I was looking for how to do routing using react. Most widely use packages are react-router, react-router-dom. Here is simple code that will get you started using react-router-dom.

Step#1
Create a simple react app using creae-react-app command. You can refer to getting started with react post to get you stared.

$ create-react-app todolist

Step#2
Here is my index.js file edited for router.

import React from 'react'  
import ReactDOM from 'react-dom';  
import { BrowserRouter, Route } from 'react-router-dom'  
import Layout from './Layout';  
import Header from './Header';  
import Footer from './Footer';

class App extends React.Component {  
  render() {
    return (
        <div>
          <h1>hello new </h1>
        </div>
    )
  }
}

class About extends React.Component {  
  render() {
    return (
        <div>
          <h1>This is About Page</h1>
        </div>
    )
  }
}

//export default App

ReactDOM.render((  
<BrowserRouter>  
    <div>
      <Route exact path="/" component={App} /> {/* Note-1 */}
      <Route path="/header" component={Header} />
      <Route path="/footer" component={Footer} />
      <Route path="/Layout" component={Layout} />
      <Route path="/About" component={About} />
    </div>
</BrowserRouter>

),
  //<App />,
  document.getElementById('root')
);

Please find below sample file for Header. Footer and Layout files will be similar.

import React from 'react';

class Header extends React.Component {  
  render() {
    return (
      <div >
        <h1>This is Header</h1>
      </div>
    );
  }
}

export default Header;  

As per GitHub issue response, if you are using react-router-dom, you done need to import react-router (at least 99.99 % of time).

Reference Posts:
https://stackoverflow.com/questions/42984597/multiple-nested-routes-in-react-router-dom-v4

https://stackoverflow.com/questions/43008036/the-prop-history-is-marked-as-required-in-router-but-its-value-is-undefine

How reactdom render works

Let us look at how react web application works. Please find the source code for very basic application at below location.
https://github.com/conquistadorjd/myreactapp

Let us look at index.js file.

import React from 'react';  
import ReactDOM from 'react-dom';

class App extends React.Component {  
   render() {
      return (<div>  
                <h1>You are on website techtrekking.net</h1>
                <ul>
                    <li >FIrst</li>
                    <li>Second</li>
                    <li>Third</li>
                  </ul>
              </div>)
   }
}

ReactDOM.render(<App />, document.getElementById('root'));  

Now let us look at each elements separately:

var React = require('react');  
  • It saves a JavaScript object into your file. This object contains methods that are needed to make React work, such as React.createElement and React.createClass
  • when a JSX element is compiled, it transforms into a React.createElement() call. e.g. React.createElement
var ReactDOM = require('react-dom');  
  • The methods returned by require(‘react-dom’) are for interacting with the DOM. e.g. ReactDOM.render
  • This object contains methods that are concerned with DOM interaction, such as ReactDOM.render
ReactDOM.render(<App />, document.getElementById('root'));  
  • ReactDOM.render is the most common way to render JSX
  • It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM.
  • ReactDOM.render()’s first argument should evaluate to a JSX expression, it doesn’t have to literally be a JSX expression. The first argument could also be a variable.
  • Second argument is the DOM where this will be rendered.

react JSX| Basics

JSX Introduction

JSX is a syntax extension to JavaScript. It is used with React to describe what the UI should look like. JSX might seem like template language, but it comes with the full power of JavaScript.

Here is the sample code. We will explore each feature in detail in below article:

import React from 'react';  
import ReactDOM from 'react-dom';

var websiteName = 'techtrekking.net';  
var newStyle = { color:'blue'};

var myList = (<div>  
                <h1>You are on website {websiteName}</h1>
{// this is comment }
                <ul>
                    <li style={newStyle}>FIrst</li>
                    <li>Second</li>
                    <li>Third</li>
                  </ul>
              </div>)

ReactDOM.render(myList, document.getElementById('root'))  

Important Points

  • JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.
  • A basic unit of JSX is called a JSX element.
  • JSX code can’t be ready by browser and hence it needs to be compiled before the files reaches a web browser, a JSX compiler will translate – any JSX into regular JavaScript.
    It’s similar to writing bits of HTML, but inside of a JavaScript file.
JSX Element Definition
  • JSX element can be saved in a variable, passed to a function, stored in an object or array.
var h1 = <h1>Hello world</h1>;  
Attributes in JSX
  • A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value. The value should be wrapped in quotes, like this:
var title = <h1 id="title">Introduction to React.js: Part I</h1>;  
var panda = <img src="images/panda.jpg" alt="panda" width="500px" height="500px" />;  
  • HTML tags are always using lowercase tag names, while React components starts with Uppercase.
  • Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.
Multi-line JSX
  • You can nest JSX elements inside of other JSX elements, just like in HTML.If a JSX expression takes up more than one line, then you should wrap the multi-line JSX. i.e. opening and closings should be of same tag
var myList = (<div>  
                <h1>You are on website {websiteName}</h1>
                <ul>
                    <li style={newStyle}>FIrst</li>
                    <li>Second</li>
                    <li>Third</li>
                  </ul>
              </div>)
Using JavaScript in JSX
  • JSX is written in JavaScript file but if you need to use JavaScript variale in JSX it needs to be enclosed in curly braces “{}”
...
var websiteName = 'techtrekking.net';  
...
<h1>You are on website {websiteName}</h1>  
...
Comments in JSX
  • While writing comments we need to enclose curly braces around them “{}”.
{// this is comment }

Learning JavaScript

There are tons of material on internet to learn JavaScript and each has its own style and different target audience and it might confuse you. Also, reading online tutorials makes you think that you ‘know’ the language now but when you get down to code, you don’t recall anything and this makes learning experience very frustrating experience.

Whatever may be your intentions behind getting started with JavaScript, you can use following method to learn JavaScript.

Step#1

Start with CodeAdacemy’s interactive JavaScript tutorial. This is he best way to get your hands dirty.

Step#2

Start Reading Eloquent JavaScript. You can read this book online. But if you like to read the hard copy of the book, you can purchase it from here

You can read this book for free online at eloquentjavascript.net

Step#3

Other best online sources of learning JavaScript are as below:

Step#3

Once you are comfortable on JavaScript, please read JavaScript: The Good Parts by Douglas Crockford

Don’t just stop here, during anypoint in your learning phase you should watch following videos by Duglas Crackford.

https://www.youtube.com/watch?v=v2ifWcnQs6M&list=PL62E185BB8577B63D

https://www.youtube.com/watch?v=JxAXlJEmNMg&list=PL7664379246A246CB