JSFoo 2016

React — A JS library that helps us to divide up our app into multiple components but doesn’t clearly specify how to keep track of the data(aka State) and how to deal with all the events(aka Actions) properly.
Redux — A complimentary library to React that provides a way to easily keep the data(State) and the events(Actions).
Essentially Redux allows us to build React app as you are but delegate all the State and Actions to Redux

Redux & React are currently mainstream technologies in front-end. Every self-respecting front-end developer knows this fact and tries to dive into them to understand what they are and how to deal with them. Because it seems really clear that the future web applications are all about this sweet couple.

Redux evolves over the ideas of Flux, but avoids its complexity by taking cues from Elm. Whether you have used them or not, Redux only takes a few minutes to get started with.

Intented audience - Intermediate level expertise in Javascript

Outline #

During this session, I could take the audience from React basic to how to manage state and communicate with Redux which is managing the state of application.

Highlighting Points will be :-

Redux flow with React Component
How its better from Flux
How you can manage and dubug the state of React application
Demo of application using debugging with React/Redux dev tool(Hot reloading and time travel)
Quick finisher with Webpack as transpiler and transformer for Production apps

The core strength of Redux is managing state and taking care of state. Using React components, we just need to talk to Redux layer to get state and render in our application.

Redux is independent library for managing state. I will be talking about how redux works with React using React-Redux
as a bridge library to allow communication between React & Redux. I will be focussing upon redux components like action creators, reducers, store and middlewares and how they fit with React components.

Redux isn’t just Redux. It’s a whole bunch of stuff to dive deep and expore.
Webpack :
we wil use this to pull together everything in single bundles instead of Browserify or Require and whatever else it is that you are using. Redux is so functional and you can make so much use of the new ES6/7 sugar with webpack and babel as transpiler.
React-Redux :
While strictly speaking Redux is framework agnostic. It was written with React in mind. This provides higher-order components that link React Components with Redux Stores. React Redux will help us to get state and create new application state by firing actions from react components.
Middleware :
Redux is synchronous so we need something to handle async calls to backend API’s.
You have two options here: thunks or some kind of promise library. Either way you need to async-ness in your app and this is the bit that makes it possible to do it in your action creators.
we will been using Axios for this and regitsering middleware to handle async class in action creators.

On the closing note, I will provide Github repository links for the audience, so they can get all the working samples and play with code.

Speaker bio
I am Tarun Sharma. I am a passionate developer for the past 5 years. I have been working on all different technologies and sincle last 3 years I am working with javascript, Anngular 1.x, Anguar 2.0, Node and different frameworks & library like react+immutable+Redux js. I am developer, publisher and onine trainer providing training online(free). I am using Redux in production application and found it very useful for state management and React friendly.
I have been providing trainings and talks on Redux in delhi meetups.

More on my work experience can be found here - https://in.linkedin.com/in/tarun-sharma-03790254

Requirements #

Node/Git installed on systems if people want to execute app on their systems
I will be sharing git repo for demo aplication.

Speaker bio #

I am Tarun Sharma. I am a passionate developer for the past 5 years. I have been working on all different technologies and sincle last 3 years I am working with javascript, Anngular 1.x, Anguar 2.0, Node and different frameworks & library like react+immutable+Redux js. I am developer, publisher and onine trainer providing training online(free). I am using Redux in production application and found it very useful for state management and React friendly.
I have been providing trainings and talks on Redux/React/Angular 2.0 in delhi meetups.

More on my work experience can be found here - https://in.linkedin.com/in/tarun-sharma-03790254

Links #

• https://www.youtube.com/watch?v=mMl76g8Xrkg&list=PLIGDNOJWiL1_2CpDKGg4-jNPqoirutxc5&index=3
• YouTube Channel : https://www.youtube.com/user/vibbbbbba/playlists
• twitter : @tkssharma
• https://in.linkedin.com/in/tarun-sharma-03790254
• http://tkssharma.github.io/
• http://www.meetup.com/delhi-reactjs/
• React js MEETUP DELHI :- http://www.meetup.com/delhi-reactjs/events/232384154/
• React js MEETUP DELHI(webpack + ES6 React with Flux) :- http://www.meetup.com/delhi-reactjs/photos/27089686/451704863/
• React js MEETUP DELHI(Redux) :- http://www.meetup.com/delhi-reactjs/events/231591515/
• JS-CHANNEL2016 :- https://twitter.com/tkssharma/status/754009965145251840
• YouTube Channel :- https://www.youtube.com/user/vibbbbbba/playlists

Slides #

http://slides.com/kumartarun/react-redux-intro-64-161#/