React on Rails workshop at Conferencia.ROR

Transcript

1. 1.

   React on Rails workshop Prathamesh Sonpatki @_cha1tanya

2. 2.

   None
3. 3.

   Agenda

4. 4.

   Why React?

5. 5.

   Build UI

6. 6.

   V in MVC

7. 7.

   Declarative

8. 8.

   if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader();

9. 9.

   if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader(); if encodingCompleted <header>Encoding

   Completed</header> else <div>Loading…</div>
10. 10.

    Unconventional ideas

11. 11.

    Components

12. 12.

    None
13. 13.

    <TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} />

14. 14.

    Reusable

15. 15.

    None
16. 16.

    Composable

17. 17.

    None
18. 18.

    Separation of concerns

19. 19.

    No templates

20. 20.

    React === JavaScript #=> true

21. 21.

    Managing Data

22. 22.

    Data changing over time is root of evil Pete Hunt

23. 23.

    Props

24. 24.

    One way data flow

25. 25.

    State

26. 26.

    Responding to state changes

27. 27.

    Refresh

28. 28.

    Re-Rendering the component

29. 29.

    Re-Rendering the component tree

30. 30.

    Re-Rendering

31. 31.

    Isn’t it too slow?

32. 32.

    Virtual DOM

33. 33.

    Diff

34. 34.

    Minimal set of changes

35. 35.

    Nothing is new!

36. 36.

    Let’s begin!

37. 37.

    React❤Rails

38. 38.

    react-rails + CDN packages

39. 39.

    react_on_rails https://github.com/shakacode/ react_on_rails

40. 40.

    sprockets_comm oner https://github.com/Shopify/sprockets- commoner

41. 41.

    Thanks! @_cha1tanya @BigBinary http://blog.bigbinary.com http://videos.bigbinary.com https://github.com/prathamesh-sonpatki/react-rails-examples