Flux example Application with React JS

Flux example Application with React JS


Bookmark and Share

Flux is an application architecture used to build scalable and powerful JavaScript web application with React JS. React JS is a popular view library and we have already covered React JS. Flux is not a framework like Angular JS, Backbone etc., there are a lot of differences between these frameworks with Flux. Flux only supports unidirectional data flow, where Angular and Backbone supports bi-directional data flow. Unidirectional data flow prevents unexpected data flows, so it is more predictable.

Flux has three main parts.

  • Action
  • Dispatcher
  • Store
  • As their name indicates, Action is the result of some events, like JavaScript events, or callbacks for Ajax calls. Dispatcher, is a connector or link between Action and Store. The dispatcher is a central hub, from where everything passes through and we only need one dispatcher per application. Dispatcher handles all Actions and Stores.
    Store is very important in Flux architecture, we can write our business logics or Ajax calls to fetch data’s. I usually use it to store to get some initial data’s or to send or receive data via Ajax calls. The store uses event emitter similar to nodejs’s event emitter. We can define events in …

    Read More
    React Example Application

    React Example Application


    Bookmark and Share

    This article is continuation of my React series, On the first article we went through react basics and some react syntax, now i want to demonstrate a sample application with es6 syntax. ES6 is the future of javascript, so we use ES6 in our projects. Complete code is available on github, you can use below links.

    Example Application

    React – Rails Store Example Application

     

    React Rails Tutorial

    React Rails Store Application

    Before we start, we must familiarize with gulp and some gulp tasks. Gulp is a frontend tool to automate our tasks like sass/scss to css, coffeescript to javascript, minimization etc.. In this project we use babelify, it help us to write code in ES6, In ES6 mode, we can use import statement, classes in javascript, and double arrow functions.

    We use ES6, so we can use class, import and =>

    Now we can start our code, It is actually a ruby on rails project. Our files are inside javascript/react folder, we …

    Read More

    3 Most useful Jquery Slider/Carousel plugins


    Bookmark and Share

    Why should we we use Javascript in our application?, HTML and CSS is enough to make websites. In this article i like to familiarize 3 jquery slider plugins. Why should i use Javascript, In my view Javascript is a beautiful client side language to manipulate DOM in different ways, which is merely impossible using our CSS. Lets assume i have 20 images in my website, I can either show this all 20 as thumbnails, but how can i show its in big resolution or i can show all images in its maximum resolution but this will increase page length. We can use jQuery sliders to solve this problem, We will have navigation buttons or thumbnails to see different images without consuming too much space.

    I have used many slider/carousel plugins, 3 of them are best for me, they are free and easy to use.

    1) Slick Slider

    Most popular and free  jQuery slider with lots of functions and callbacks. This will be the first choice for all frontend developers when they need some slider functions.

    Slick Slider

    Slick …

    Read More
    React JS for modern web applications

    React JS for modern web applications


    Bookmark and Share

    React JS is a JavaScript Framework which indent to make large, single page scalable applications. It is not like Angular or backbone or other JavaScript framework. React JS is only deals with view and not with model and controller. React JS is also compatible with backbone, so we can use backbone, React JS combination to get full MVC framework. React is intended to help developers build large applications that use data that change over time. Its goal is to be simple, declarative and composable.

    Why React JS

    Before answering this question, I want to tell its history, this will give slight idea ‘Why React”, React JS is created by Facebook, it is an open source project maintained by Facebook and 100+ other contributors. React JS is used in Facebook and popular photo sharing website Instagram. React JS is a User Interface library.

    React use Virtual DOM instead of Real DOM, This help us to create more Fast and Scalable web applications. One of the main attractions is, React JS is reusable components, HTML elements are reusable components in React, and we can use same for other places. Another features are high …

    Read More