React Front-end For Your Drupal 8 Back-end

Transcript

1. React Front-end for You Drupal 8 Back-end Bassam Ismail & Aliya Khan Front-end | Intermediate
3. MArkETING 101
7. DUBLIN
9. “How to build a Headless Drupal WeBsite”
10. @skippednote bassam.co
11. @ALIYA_KHAN
13. ✋
14. AGENDA • Exposing Drupal • React: Building Composable UIs • Redux: Unidirectional Data Flow • React with Drupal
15. Exposing Drupal
22. Library ≄ Framework
24. UI Logic Markup Styling
27. Session List
28. Session
29. Session Fields
31. Destructured Props props = { title: “React & Drupal”, speaker: “Bassam”, experience: “Intermediate” } React Components Pure Component
32. ⨐(state) = UI React Component UI is function of the Application state
33. Lifecycle Methods Event Handlers State and bindings No Mutations (Vdom)
34. MVC Controller View Model
35. Controlle View Model Controlle View Model Controlle View Model Controlle View Model Controlle View Model Controlle View Model Controlle View Model Controlle View Model Controlle View Model
37. n items On Delete
38. “Redux is a predictable state container for JavaScript apps”
39. Components Application State
40. State Tree
41. • Actions and Action Creators • Reducer • Store
42. Increment DECREMENT Current Value
43. Action Action Creator
44. Action Creator Action OBJECT
45. Reducer
46. Action No Mutations
47. ⨐(action, state) => newstate { type: “INCREMENT” } 1 0
48. Store
49. Create a store Get current state Dispatch Actions
50. React & Redux
51. Wrapper Component Provider with Store Root Component
53. connect Function Store State To Component Props
54. Dispatch Actions on onClick event React Component connected to Store
55. • Immutability • Composition • Pure Functions
56. *Disclaimer
57. React with Drupal
58. Use 8.2.0
63. Progressive Decoupling
64. Inside Theme
65. React Components Transpiled Files Includes Transpiled Files
66. Sessions Components Dependencies (React, ReactDOM, etc)
67. GET data from Drupal Update Component State Session Props
68. Destructured Session Props
72. Inside Module
73. React Components Templates to mount component Page Path Get initial state
74. On visiting this URI Will be called Page title
75. Guzzle to Get view export data Called on ‘/sessions’ Pass data to template Attach React Component
76. Mounted Component Initial State
77. Guzzle to Get view export data Called on ‘/sessions’ Pass data to drupalSettings Attach React Component
78. Check for initial State
80. Fully Decoupled
81. JSON API
82. JSON API specification
83. Cleaner Output
84. Nested data
85. CLEANER OUTPUT
86. Sparse Fields
87. Sparse Fieldset Limited Fields
89. http: //con.dd/api/node/session?_format=api_json Namespace Entity Type Bundle Format Params
92. Apache
94. Getting Entity Collection
95. Getting SPECIFIC ID
96. ID
97. Authentication for CREATE, UPDATE & DELETE
98. OAUTH for Authentication
99. Post Data To Collection URL
100. Data to Update id = NID Session URL TO Update
101. Components Based on Routes on “/sessions/new” Load NewSession Component
102. Wrapper Component For Authenticated Routes
105. Demo
106. Thank You
107. Rate Our Session