Upload
voxxed-days-thessaloniki
View
64
Download
0
Embed Size (px)
Citation preview
@mxstbr
react-app-by-type!"" css!"" actions# $"" NavBarActions.js!"" containers# $"" NavBar.js!"" constants# $"" NavBarConstants.js!"" components# $"" App.js$"" reducers $"" NavBarReducer.js
@mxstbr
react-app-by-feature!"" css!"" containers# $"" NavBar# !"" NavBar.js# !"" actions.js# !"" constants.js# $"" reducer.js$"" components $"" App.js
@mxstbr
.header {
/* … */
}
.title {
background-color: yellow;
}
.footer {
/* … */
}
.title {
border-color: blue;
}
Conflict!
Naming
@mxstbr
.footer { /* … */ }
.title { /* … */ }
.MyApp__footer__1co1k { /* … */ }
.MyApp__title__2fgr5s { /* … */ }
@mxstbr
.header { line-height: 1.5em; }
a { line-height: 1.5em; }
.title { line-height: 1.5em; }
Inheritance
@mxstbr
.header { line-height: 1.5em;}
.title { line-height: 1.5em;}
Inheritance.footer { line-height: 1em;}
.title { line-height: 1em;}
Conflict!
@mxstbr
.header { line-height: 1.5em; }
a { line-height: default; }
.title { line-height: default; }
@mxstbr
react-app-by-feature!"" containers# $"" NavBar# !"" NavBar.js# !"" actions.js# !"" constants.js# !"" styles.css# $"" reducer.js$"" components $"" App.js
@mxstbr
<Clock onStartClick={ dipatch(startTimer()) }/>
<Timer onStopClick={ dispatch(showTime()) }/>
@mxstbr
<Clock onStartClick={ dipatch(startClicked()) }/>
<Timer onStopClick={ dispatch(stopClicked()) }/>
@mxstbr
function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer()); yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); }}
@mxstbr
function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer()); yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); }}
@mxstbr
function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer()); yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); }}
@mxstbr
function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer()); yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); }}
@mxstbr
function* connectClockToTimer() { while (true) { yield take(START_BUTTON_CLICKED); put(startTimer()); yield take(STOP_BUTTON_CLICKED); put(stopTimer()); put(showTimeOnClock()); }}
@mxstbr
class NavBar extends React.Component { shouldComponentUpdate(nextProps) { return nextProps !== this.props; }}