React is a JavaScript library for building user interfaces and applications. It uses components rather than templates, implements a one-way data flow downwards and re-renders components on data changes rather than mutating them directly. The virtual DOM in React allows for simple and fast re-rendering. Key aspects of React include components, one-way data flow, re-rendering without mutation, the virtual DOM, JSX syntax and React Native for building mobile apps. Flux is an architecture pattern used for state management in React, implementing unidirectional data flow through actions, a dispatcher, stores and views.

1. React Introduction

2. What is ReactJs ?
“We build react to solve one problem: building large applications with data that changes over time”

3. Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

4. Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

5. Components CartComponent
CartListComponent
CartItemComponent

6. Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

7. One-way data flow

8. Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

9. Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

10. Virtual DOM

11. Virtual DOM

12. Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

13. Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

14. What’s good about it?
• Easy to start with
• JSX makes components easily understandable
• Rendering can be done on the server
• SEO
• ES6 support

15. What’s not so good about it?
• No Event System (other than vanilla DOM events)
• No AJAX capabilities
• No Data Layer
• No Application Framework
• No Promises
• No standard way on how to implement all these

16. Should I Use React?
• Yes, but take into consideration about following points:
• React will slow you down tremendously at the start. Understanding how props, state, and component
communication works is not straightforward, and the docs are a maze of information. This will be countered,
in theory, by a grand speed up when your whole team is on board.
• React does not support any browser below IE8, and never will.
• If your application / website doesn't have very much dynamic page updating, you will be implementing a lot of
code for a very small benefit.
• You will reinvent a lot of wheels. React is young, and because there's no canonical way to do events /
component communication, you'll have to build large component libraries from scratch.
• Best Idea would be to use best practices which were followed by other users, e.g. Airbnb style guide:
• https://github.com/airbnb/javascript/tree/master/react

17. Part-2

18. App Setup
• npm i react react-dom -S
• create a index.js file
• add this to the file
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}

19. State Management
• Not long time ago… $.ajax
• And now we are increasing the UI complexity with JavaScript
• To solve this... Facebook Devs designed Flux

20. Flux
• It’s a pattern (Application Architecture)
• It’s a nice way to make components to talk to each others
• It’s a unidirectional data flow
Action Dispatcher Store View
Action

21. Flux - Actions
• Where data get into the system
• Person interaction or process interaction
• Action type and data
Action Dispatcher Store View
Action

22. Flux - Dispatcher
• It’s the central hub that manages all data flow
• It’s essentially a registry of callback into the stores
Action Dispatcher Store View
Action

23. Flux - Store
• It’s where you add you state and logic
• It’s result in an update to the state of the store, via dispatcher
• It’s broadcast an event saying that their state has changed
• They view may query the new state and update themselves
Action Dispatcher Store View
Action

24. Flux - View
• It’s where we show your results
• When it receive the event from the store, it use setState() or forceUpdate()
to render
Action Dispatcher Store View
Action

25. Flux
DEMO

28. References
• https://en.wikipedia.org/wiki/React_(JavaScript_library
)
• https://facebook.github.io/react/
• https://facebook.github.io/flux/
• https://facebook.github.io/react/blog
• http://blog.andrewray.me/reactjs-for-stupid-people/
• http://www.slideshare.net/AndrewHull/react-js-and-