WEB DEVELOPMENT USING REACT JS

2. Plan
What is Reactjs?
ReactJs core concepts
Let's Code
Application Benefits
Front And Back End
Programming Testing
Database
Question Session

3. HELLO !!!
I'mMuthukumaranSingaravelu
WHOAMI?
Programming Lover
Someone try to learn new thing everyday

4. I'm Web Developer
I want to create
web page :)

5. How is that possible?

6. FaceBook created Reactjs

7. What is Reactjs?

8. Short Summary
A Facebook & Instagram Collaboration
Initial release from 2013

9. A Library for creating User Interfaces

10. React is not a Framework

11. Who are using Reactjs?

13. Why Reactjs?

14. Separation of concerns:
app/html/button.html
app/css/button.css
app/js/directives/button.js
Core Problem !!!!

15. SEO Friendly
Coding is Simpler because of JSX
Big minds are backing ReactJs

16. Virtual DOM
Unidirectional Data Flow

17. Reactjs Core concepts

18. JSX COMPONENTS
UNIDIRECTIONAL
DATA FLOW
VIRTUAL
DOM

19. Reactjs core concepts
:: Component

20. React Components
Self-contained reusable building blocks
of web application

21. React Components
Printerest open sourced its full React component
UI Library
reusable

22. React Components
Office UI Fabric
reusable
Fabric React is a collection of robust React-based
components designed to make it simple for you to create
consistent web experiences using the Office Design
Language

23. Who uses UI Fabric?

24. React Components Lifecycle !

25. INITIALIZATION UPDATE DESTRUCTION
getInitialState()
getDefaultProps()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()

26. React is about components...

27. How does
component
look like?

28. React core concepts
:: Virtual DOM

29. React Virtual DOM?
Keep track of state in DOM is hard!
It'll be so easier to render

30. React
Re-render everything for
every update

31. Seems expensive?

32. Use different algorithm with the browser DOM tree to
identify the changes
Instead of creating new object, Reactjs just identify
what change is took place and once identify update
that state

33. React Virtual DOM
Re-rendering process?

34. Build new virtual DOM subtree
Diff. with the old one
Compute the minimul set of DOM mutuation
Batch execute all update

35. React core concepts
:: JSX

36. React JSX
React components are written in JSX
A JavaScript extension syntax allowing easy quoting
of HTML and using HTML tag syntax to render
components

37. React core concepts
:: state & props !!!

38. Props
Parent
Component
Component
state

39. Let's start coding...