React in the right way

1. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

2. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

3. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

4. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

5. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React in the RIGHT way

6. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

7. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

8. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

9. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

10. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

11. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

12. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

13. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

14. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

15. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

16. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

17. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Why React ?

18. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Solve one problem

19. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Build large app with data
that change over time

20. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
How to start ?

21. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

22. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

23. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Let’s start by yourself

24. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

25. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

26. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn JS, JSX

27. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Virtual DOM
Component-driven development

28. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Virtual DOM
React
Component
Virtual
DOM
Computed
batch DOM
Real
DOM
Auto update 60 fps

29. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

30. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
JSX (JavaScript eXpression)

31. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Rendering

32. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
Profile
Projects
Project 1
Project 2

33. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
App component
Profile Projects

34. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
App component
Profile Projects
Pass data ?
Pass data ?Pass data ?

35. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Components
App component
Profile Projects
Props
PropsProps

36. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Profile component

37. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Project Item component

38. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Projects component

39. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
App component

40. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn ECMAScript 6

41. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

42. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Dependency manager

43. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

44. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

45. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

46. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

47. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

48. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

49. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Welcome to React world

50. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
https://github.com/facebookincubator/create-react-app

51. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
$npm install -g create-react-app
$create-react-app my-app
$cd my-app/
$npm start

52. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

53. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
https://github.com/zeit/next.js/

54. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Routing

55. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Routing
React Router
https://github.com/rackt/react-router

56. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Need Routing ?

57. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Flux

58. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Flux
Redux
https://github.com/reactjs/redux

59. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Need Redux ?

60. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

61. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

62. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

63. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Server rendering
https://github.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md

64. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Server rendering
Universal

65. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Learn Server rendering
Universal
Isomorphic

66. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Need Server rendering ?

67. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Slow rendering ?

68. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Improve SEO ?

69. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

70. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

71. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

72. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
More …

73. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

74. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React Relay GraphQLRedux

75. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Data framework
Relay
API gateway
GraphQL
Flux
Event framework

76. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

77. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Finally …

78. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
How to testing ?

79. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

80. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่

81. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Static code analysis
Istanbul

82. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Static code analysis
Test framework
Enzyme
Istanbul

83. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Static code analysis
System test
Enzyme
Test framework
Istanbul

84. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Code without tests
is broken by design
— Jacob Kaplan-Moss —

85. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Finally again !!!

86. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React Ecosystem
React Web (Virtual DOM) React Native
React (JSX, Components, JS Styles)

87. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
React Ecosystem
React Web (Virtual DOM) React Native
React (JSX, Components, JS Styles)
Flux/Redux Relay
GraphQL

88. บริษัท สยาม๡ํานาญกิจ จํากัด และเพื่อนพ้องน้องพี่
Resources
https://github.com/petehunt/react-howto
https://facebook.github.io/react/