This document provides an introduction to ReactJS including what it is, its key features, and how it works. Some main points: - ReactJS is a UI library built by Facebook that uses a virtual DOM to selectively update the browser DOM and improve performance. - It allows building of interactive and reusable UI components in a declarative way. - React uses a one-way data flow and unidirectional data binding which keeps complexity low. - Components are the core building blocks and can be composed to build UIs in a modular way. - The virtual DOM enables fast re-renders by only updating parts of the real DOM that changed.

1. Welcome to React &
Flux !
by Ritesh

2. Introduction to ReactJS
Q.) What is React JS ?
● React Js is nothing but a UI library built by Facebook to improve the creation
of interactive, stateful, and reusable UI components.
● One of its unique feature is that it helps us overcome the limitation of DOM
manipulation of browser for an interactive UI by introducing a concept of
virtual DOM that selectively renders subtrees of nodes based upon state
changes.

3. contd...
● React JS is being used in production by Facebook and sites like Instagram is
entirely converted and built in ReactJS.
● Facebook Chat and message which used to very buggy with notifications on
message not sync is all very smooth all thanks to the ReactJS & Flux.

4. Features of React JS
● One of the key aspects of ReactJS is that it can be used both on the client-
side as well as on the server side.
● React is build to solve the problem of updating UI of large applications
where data changes over time.
● React is simple, declarative, built of compassable components and yes you
need to give it sometime to get a nice flavour of it.

5. React at first look !
Now Let us look at first ReactJS code. Need not to worry, we will be covering
them in details shortly. Its just to give you a look and feel of 1st ReactJS
component code.
Now, tell me what you
think of by seeing this
code for the 1st time ?

6. Probable answers !
If you have worked with JavaScript before which is a prerequisite for this course
you may think like :
a. Isn’t this ugly ?
b. will it not be making things complex by putting Javascript and html in the
same file ?
c. No clue whats going on. Is this javascript ?
d. Is React only templating language ?

7. Don’t worry :)
The thing is that it’s just JavaScript and it’s not a templating language.
The Code that you see previously is written in JSX which is a JavaScript
extension.
The JSX code increases the efficiency as it performs optimization while
compiling the source code to JavaScript.

8. Some more Gyan on React !
If you have worked earlier with JavaScript, you would have seen the MVC being
followed which stands for Model View Controller architecture.
In this ReactJS works only with the Views and it doesn’t care about how the data
is passed or handled across the web-application.
This was mostly the architectural problem that is outside the scope of ReactJS
and to overcome that the developers at Facebook proposed a functional
approach which they call as FLUX.

9. Flux Architecture

10. contd...
Flux introduced the concept of Actions, Dispatchers & Stores. Mutation of data
can only be done through calling the actions. This architecture allows for the
data flow in a single direction only and hence makes it easier to monitor data
changes affecting the application.

11. Why React in UI ?
The most basic function of UI is to display some data and React makes it easy to
do that as well as keep the page updated with least DOM mutations to browser.
Now, you all can write a basic React JS code which i display in the next slide and
run your first React code in the browser. Just create a .html file and copy the
code that i show in the next slide.

12. Run your 1st React Code

13. contd...
In the code which is presented before you will see that the some data keeps
changing on the page while the others remains as it is.
Here the virtual DOM comes into picture where it does the diff with the new DOM
and renders only the minimum change required.
Since, the code is not in pure javascript it is first compiled using babel. Babel is a
javascript compiler. React and React-DOM library is also imported for developing
in their framework.

14. More deep into React !
What is JSX ?
● JSX in simple is a language that lets you create javascript object from HTML
syntax which runs faster on the browsers compared to the normal
JavaScript.
● strictly typed OO programming language.
● syntax : class / function definition like JAVA.
● function body is javascript.
● strict type leads to higher productivity than javaScript.

15. contd...
Few more facts about JSX :
1. The code written in JSX when compiled runs faster than equivalent JS code.
the code is optimised using type info.
2. Compiled code generates source-map for debugging. (* source-map : It is a
technology that supports debugging of client-side code on web-browsers
written in language other than javascript.)

16. React Components
Components in React :
Components in react can be thought of as a simple function which takes “props”
and “state” as arguments and renders HTML based on that.
Note : React components can render only a single root node. If the requirement
is to return multiple nodes then it must be wrapped in a single root, otherwise the
component will not render.

17. contd...
The inputs to the components are called “Props”, short for “properties”. Props
are passed as attributes in JSX syntax. “Props” are not changed inside a
component and are treated as immutable objects. The state of the component is
stored in “this.state” of the component.

18. More of React Gyan!
1. In React, everything is a component. React has no : a) controller b) directives
c) templates d) global event listeners e) no view models etc…It only has
“Components” which once understood makes life really easy and removes
complexities.
For E.g : You have a simple shopping below which is generally made as a
template which contains too much code for all the elements together and the
data is all handled in model and controller. But, if you want the same to be
implemented in React it become pretty much simple and all revolves about the
component.

19. contd...
The Flipkart “Shopping Cart”
which is shown here can be
broken into CartComponent,
CartListComponent, Buttons
etc.

20. Components Advantages!
The advantage of Components way is :
1. Composable
2. Reusable
3. Maintainable
4. Testable

21. React Gyan contd...
2) Reliable Data Display : It has not built in framework. In React any component
can communicate with any other component.
In React there’s a 1-way data flow only. Data is handled from “Parent” to “Child”.
The data is passed as props from parent component to inner component and
accessed as this.props.
“Props” is immutable and “State” is mutable. “State” can become props. Data
flows down with handlers. Events flow up and data flows down.

22. contd ....
3) Virtual DOM :
a) It’s a pure-javascript, in-memory representation of DOM.
b) render() fires whenever something changes.
c) React modifies the real DOM to match.
d) It’s FAST, PURE & just works !

23. React Lifecycle Method!
So, some basic questions now. As, i said earlier React works on virtual DOM. So,
how do i access the actual DOM ?
When i come to know that render has happened for the react component ?
The answer lies in REACT lifecycle method. The lifecycle methods are executed
at specific points in React Lifecycle.

24. contd...
1. componentWillMount : Invoked once, both on the client and server,
immediately before the initial rendering occurs.
2. componentDidMount : Invoked once, only on the client (not on the server),
immediately after the initial rendering occurs.
3. componentWillReceiveProps : Invoked when a component is receiving new
props. This method is not called for the initial render.
4. shouldComponentUpdate : Invoked before rendering when new props or
state are being received. This method is not called for the initial render or
when forceUpdate is used.

25. contd...
5. componentWillUpdate : Invoked immediately before rendering when new
props or state are being received. This method is not called for the initial render.
6. componentDidUpdate : Invoked immediately after the component's updates
are flushed to the DOM. This method is not called for the initial render.
7. componentWillUnmount : Invoked immediately before a component is
unmounted from the DOM. etc

26. contd...
componentDidMount: function() {
var element = $(this.getDOMNode());
}
this.getDOMNode() : Actual DOM Node;

27. Summary
1. one-way data flow keeps complexity under control.
2. Debugging is easy for self-contained components.
3. React library doesn’t dictate too much.

28. References
https://facebook.github.io/react/docs/getting-started.html