Posts

Showing posts from July, 2017

Customizing the ReactJS sample application created using react-cli

Some time you may want to create the react.js application using react-cli and you may also want to customize it according to your requirements. react-cli command always get the latest version of all the libraries. for instance if you look at the package.json file then you will see the following contents: package.json ======================================================================== {   "name": "testapp",   "version": "0.1.0",   "private": true,   "dependencies": {     "react": "^15.6.1",     "react-dom": "^15.6.1"   },   "devDependencies": {     "react-scripts": "1.0.10"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test --env=jsdom",     "eject": "react-scripts eject"   } } =======...

Build a Simple ReactJS application using react-cli

Image
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...

Making/Customizing Scroll bar in bootstrap using CSS

Image
::-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; }