Kunal Kumar's Blog

Hi All, In this blog we will see how we can create a sample application using react-cli.  It is a command line interface tool that seeks to automate some tasks when working on a React.js project. To starts with you have to install it globally by running following command: npm install -g react-cli The you have to run the following command in command window: npm install -g create-react-app  Now once it is installed you can create any directory where you want to create you sample ReactJS application. I have created a folder with name "TestApp" in my local drive. Now you have to run the following command to create the sample application. create-react-app testapp  While it is creating application and downloading all the artifacts related to this you can see the following things in command line as shown below: So it will create a ReactJS application with name "testapp" under folder "TestApp" as you can see in the above screenshot. On...

::-webkit-scrollbar styles the entire scrollbar & ::-webkit-scrollbar-thumb Is used to style the thumb or holder(didn’t know the perfect word) which we use to hold to scrollbar. ::-webkit-scrollbar {     height:10px;     width:10px;     border-radius: 1px;     background: transparent;         transition: all 0.3s ease; } ::-webkit-scrollbar:hover {     background: #c6c7ca; } ::-webkit-scrollbar-thumb {     background:#777779;     border-radius: 1px; }

Hi All, In this blog I am going to show you how you can implement the Routing in Angular2 application. To Starts with this we need to create following files in your application: 1. home.component.ts (under home folder) 2. login.component.ts (under login folder) 3. app.component.ts 4. main.ts 5. index.html create a folder with name home and then create a file with name  home.component.ts with below contents: ==================================================================== home.component.ts ==================================================================== import {Component} from 'angular2/core'; @Component({   selector: 'home',   template: `       <h1>My Home Page</h1>   ` }) export class Home {   constructor() {   } } create a folder with name login and then create a file with name  login.component.ts with below contents: ====================================================================...

Hi All, In this post I am going you to show you how you can set up the environment for Angular2. You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers: 1. lite-server (static server) 2. Weblogic Server 10.3 Lets do the setup for lite server.  First of all go to any directory in your computer and create a folder in that directory with name "angular2-example". You can do it by the command line also by typing the following command. mkdir  angular2-example Now once the directory is created you need to create three files. 1. tsconfig.json 2. typings.json 3. package.json 1.  tsconfig.json This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation. The content of this file will be as follows: {   "compilerOptions": {     "target": "es6",     "modu...

Hi Friends, Extending my previous post to enable the application to show the dropdown on your page. To show the dropdown on our page we are going to use the bootstrap library of ReactJS. To use the bootstrap feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window: npm install react-bootstrap --save Then you have to import this library in your code as follows: import Nav from 'react-bootstrap/lib/Nav'; import NavItem from 'react-bootstrap/lib/NavItem'; import NavDropdown from 'react-bootstrap/lib/NavDropdown'; import MenuItem from 'react-bootstrap/lib/MenuItem'; Once it is imported you can add the dropdown in your component class as shown below: <div><Nav bsStyle="tabs" activeKey={this.state.activePage} onSelect={this.handleSelect}>             <NavItem eventKey={1} >Tab1</NavItem>   ...

Hi Friends, As I have mentioned in this post that the tabs in React application can be created in two ways. 1. By using react-tabs library 2. By using react-bootstrap Since we have already see the first method in  this post so we will see now the second method i.e. by using  react-bootstrap. To use the bootstrap feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window: npm install react-bootstrap --save Then you have to import this library in your code as follows: import Nav from 'react-bootstrap/lib/Nav'; import NavItem from 'react-bootstrap/lib/NavItem'; Once it is imported you can write you component class as shown below: import React from "react"; import ReactDOM from "react-dom"; import Nav from 'react-bootstrap/lib/Nav'; import NavItem from 'react-bootstrap/lib/NavItem'; var TabApp = React.createClass({  getIniti...