DrupalCampKyiv 2017

1. Headless Drupal + ReactJS
Oleksandr Linyvyi
Drupal Developer, Adyax
oleksandr.linyvyi@gmail.com

3. Why Drupal?

4. Drupal is used only for few
things
• Data storage (Drupal DB basically)
• Data provider (Services)
• Serve single HTML page with React app

5. Frontend part is the
responsibility of React app
only

6. Why React?

7. React is used for
• Data fetching
• Data display
Basically it does all the UI stuff

8. React specific things
• Virtual DOM
• JSX
• Consequence - markup is mixed with JS
• And it is hard to get used to it 
• Also – a lot of 3rd
party libs may (and
should be) used

9. <Button color=“green" borderSize={2}>
Click Me
</Button>
React.createElement(
Button,
{color: 'green', borderSize: 2},
'Click Me‘
)
prevraschaets’a v

10. Babel
http://babeljs.io/
Babel is a JavaScript compiler.

11. function Item(props) {
return <li>{props.message}</li>;
}
function TodoList() {
const todos = [
'finish doc',
'submit pr',
'nag dan to review‘
];
return (
<ul>
{todos.map((message) =>
<Item key={message} message={message} />
)}
</ul>
);
}

12. Smart / dumb components
• Dumb (presentational) – are concerned
with how things look
• Smart (container) – are concerned with
how things work

13. Redux
• Keeps application state in single place
• State is read only
• State transitions are predictable and
consistent
• Changes in state are made only by
dispatching an action
• And reducers describe how state is
transformed by actions

14. State
{
selectedNode: 1,
nodes: [
{
nid: 1,
title: 'Consider using Redux',
body: 'Lorem ipsum'
},
{
nid: 2,
title: 'Keep all state in a single tree',
body: 'Dolor sit amet'
}
]
}

15. Actions
{
type: 'SELECT_NODE',
nid: 2
}

16. Reducers
function selectedNode(state = null, action) {
switch (action.type) {
case 'SELECT_NODE':
return action.nid
default:
return state
}
}

17. Dispatching an action
store.dispatch({
type: 'SELECT_NODE',
nid: 2
})

18. New state
{
selectedNode: 2, // changed
nodes: [
{
nid: 1,
title: 'Consider using Redux',
body: 'Lorem ipsum'
},
{
nid: 2,
title: 'Keep all state in a single tree',
body: 'Dolor sit amet'
}
]
}

19. Package management
Where to search for packages?
• Npmjs.com
• Github.com
NPM is your tool:
$ npm install react react-dom --save

20. Some useful packages
• react, react-dom
• react-redux
• redux-thunk
• immutable
• reselect
• lodash

21. Demo app
• Load a list of nodes
• Display a list of clickable node titles
• Display node body on click on node title

22. Enable modules

23. Create a view

25. React part
Used packages
• React
• React-dom
• React-redux
• Redux-thunk
• Lodash

26. State
{
selectedNode: 1,
nodes: [
{
nid: 1,
title: 'Consider using Redux',
body: 'Lorem ipsum'
},
{
nid: 2,
title: 'Keep all state in a single tree',
body: 'Dolor sit amet'
}
]
}

27. Actions
{
type: 'STORE_NODES',
nodes: json
}
{
type: 'SELECT_NODE',
nid,
}

28. Reducers
function selectedNode(state = null, action) {
switch (action.type) {
case 'SELECT_NODE':
return action.nid;
default:
return state;
}
}
function nodes(state = [], action) {
switch (action.type) {
case 'STORE_NODES':
return action.nodes;
default:
return state;
}
}

29. Async action
export function loadNodes() {
return (dispatch) => {
return fetch('http://d8react.local/rest/nodes', {
credentials: 'include',
})
.then((response) => {
return response.json();
})
.then((json) => {
dispatch({ type: 'STORE_NODES', nodes: json });
})
.catch((error) => console.log(error.message))
}
}

30. import { connect } from 'react-redux';
import NodeList from 'NodeList';
const mapStateToProps = (state) => {
return { nodes: state.nodes }
};
const mapDispatchToProps = (dispatch) => {
return { onClick: (nid) =>
dispatch({ type: 'SELECT_NODE', nid })
};
};
export default connect(
mapStateToProps,
mapDispatchToProps)
(NodeList);
Node list (smart)

31. Node list (dumb)
import React from 'react';
export default (props) => (
<ul>
{props.nodes.map((node) => {
return <li
key={node.nid[0].value}
onClick={() => props.onClick(node.nid[0].value)}
>
{node.title[0].value}
</li>;
})}
</ul>
);

32. Node content (smart)
import { connect } from 'react-redux';
import _ from 'lodash';
import NodeContent from 'NodeContent';
const mapStateToProps = (state) => {
return {
node: _.find(state.nodes,
(node) => node.nid[0].value == state.selectedNode
)
}
};
export default connect(mapStateToProps)(NodeContent);

33. Node content (dumb)
import React from 'react';
export default (props) => {
return
!!props.node ?
<div>{props.node.body[0].value}</div> :
null;
};

34. All together
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import { Provider } from 'react-redux';
import reducer from './reducers';
import { loadNodes } from './actions';
import NodeListContainer from './NodeListContainer';
import NodeContentContainer from './NodeContentContainer';

35. All together
const initialState = {
selectedNode: null,
nodes: [],
};
const store = createStore(
reducer,
initialState,
compose(applyMiddleware(
promiseMiddleware(),
thunkMiddleware)
)
);

36. Main magic
store.dispatch(loadNodes())
.then(() =>
ReactDOM.render(
<Provider store={store}>
<div>
<NodeListContainer />
<NodeContentContainer />
</div>
</Provider>,
document.getElementById('app')
)
);

37. Index.html
• Contains <div id="app"></div>
• Load react application
• React takes care of the rest

38. Result

39. On click

40. On another click

41. Useful links
• https://medium.com/@nesbtesh/react-best-practices-
a76fd0fbef21
• https://medium.com/lexical-labs-engineering/redux-best-
practices-64d59775802e
• https://egghead.io/courses/getting-started-with-redux
• https://www.gitbook.com/book/rajdee/redux-in-
russian/details
• https://medium.com/@dan_abramov/smart-and-dumb-
components-7ca2f9a7c7d0

42. Thank you!
Any questions?
Ask!