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
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'
}
]
}
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
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'
}
]
}
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)
)
);