Getting Started on React js

1. React Js
@panbhag

2. What is it?

3. A JavaScript Library to build user interfaces

4. Ease of
Development
Usability
Traditional Web App Easy Bad

5. Ease of
Development
Usability
SPA(angular/
backbone)
Complex Good

6. Ease of
Development
Usability
React Easy Good

7. Lets start coding
We will discuss what is react,why react later

8. Hello World

9. HTML document

10. React.render(reactElement,container)

11. React.createElement(name,options,children)

12. Hello World in JSX

13. JSX
JavaScript syntax extension that looks similar to XML/
HTML

14. Why JSX
• Familiar
• Easier to read and write tree like structures in
XML format

15. <h1>Hello world</h1>
React.createElement("h1", null, "Hello world Hi")
JSX to Javascript

16. jsx vs HTML
• className instead of class attribute
• html-for instead of for attribute in label
• for style, convert all css hyphen separated style
names to camel cased names and pass it as a
json object

17. Components
React is all about components

18. render function should return a react element
options = {render:function,…. }
React.createClass(options)

19. Hello World Component

20. Header component accepting children

21. Header component accepting attribute for
optional underline

22. Composition: Hello component from Header
Component

23. Events: Add a click event to the Hello
component

24. –Johnny Appleseed
State: Add a counter for number of times
clicked

25. Whenever state changes the entire component
renders again

26. Shadow Dom

27. React first renders the component in shadow
dom and does the diff with the previous version
and updates only what changed to the browser

28. State vs props

29. Component Life Cycle

30. First Component use
• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount

31. Next Component Use
• getInitialState
• componentWillMount
• render
• componentDidMount

32. Component Update
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

33. Component Removal
• componentWillUnmount

34. Todo App

35. Flux Architecture

37. ReFlux Architecture

39. Todo Refulx

40. Todo Immutable

41. Immutable data is one which cannot be
modified

42. Todo Cortex