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
2. None

3. MArkETING 101

4. None
5. None
6. None

7. DUBLIN

8. None

9. “How to build a Headless Drupal WeBsite”

10. @skippednote bassam.co

11. @ALIYA_KHAN

12. None

13. ✋

14. AGENDA • Exposing Drupal • React: Building Composable UIs •

    Redux: Unidirectional Data Flow • React with Drupal

15. Exposing Drupal

16. None
17. None
18. None
19. None
20. None
21. None

22. Library ≄ Framework

23. None

24. UI Logic Markup Styling

25. None
26. None

27. Session List

28. Session

29. Session Fields

30. None

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
36. None

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

52. None

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

59. None
60. None
61. None
62. None

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

69. None
70. None
71. None

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

79. None

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

88. None

89. http: //con.dd/api/node/session?_format=api_json Namespace Entity Type Bundle Format Params

90. None
91. None

92. Apache

93. None

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

103. None
104. None

105. Demo

106. Thank You

107. Rate Our Session