Roberto Fuentes
fullstack devops
ReactJS
v16.2.0
Webpack
v4.0.0 (2/25)
https://medium.com/webpack/webpack-4-released-today-6cdb994702d4
DOM
Virtual DOM
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
https://webpack.js.org/
https://webpack.js.org/
https://webpack.js.org/
Semantic HTML-CSS-JS
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. --wikipedia
What do we mean when we talk about components?
Mix&Match
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
<!-- non semantic -->
<div class="red pull-left pb3">
<div class="grid row">
<div class="col-xs-4">
<!-- semantic -->
<div class="basket">
<div class="product">
<div class="searchResults">
in CSS
can we combine both HTML + CSS semantically?
why?
<div class="pb3 pb4-ns pt4 pt5-ns mt4 black-70 fl-l w-50-l">
<h1 class="f4 fw6 f1-ns lh-title measure mt0">Heading</h1>
<p class="f5 f4-ns fw4 b measure dib-m lh-copy">Tagline</p>
</div>
wtf?
//Icons - component
<Facebook />, <Twitter />, <Hamburger />, <X />
//Icons - elements
<svg> ... </svg>
<img src />
//Logo - component
<Logo />
//Logo - elements
<div>
<img src="" />
</div>
//Header -- component
<Header />
//Header -- elements
<header className="page-header" >
<Logo className="page-header__logo-box" /> //--component
<nav className="page-header__menu" >
<ul>
<li className="page-header__menu-item" >
<a href="#">Projects</a>
</li>
<li className="page-header__menu-item" >
<a href="#">About</a>
</li>
<li className="page-header__menu-item" >
<a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
side on Explicit rather than Implicit
https://gitlab.com/downtown-react-meetup/entry-point
https://css-tricks.com/css-modules-part-1-need/
https://glenmaddern.com/articles/css-modules
https://medium.com/front-end-developers/css-modules-solving-the-challenges-of-css-at-scale-85789980b04f
//localization [folder]__[local]--hash
//Card__container--5yh7D
.container {
width: 140px;
height: 200px;
padding: 10px 20px;
}
//Card__title--jut12
.title {
@include proxima-nova;
font: 48px;
}
//Card__hr-line--mjeaa
.hr-line {
@include horizontal-line;
}
//localization [folder]__[local]
//Card__container
.container {
width: 140px;
height: 200px;
padding: 10px 20px;
}
//Card__title
.title {
@include proxima-nova;
font: 48px;
}
//Card__hr-line
.hr-line {
@include horizontal-line;
}
How to name things?
.<module>[-<component>][-<state>] {}
<div class="basket">
<h1 class="basket-title">Your basket</h1>
<div class="basket-item">
<h3 class="basket-productTitle">Product title</h3>
<form>
<input type="submit" class="basket-removeButton" value="Remove">
</form>
</div>
</div>
.basket {}
.basket-hidden {}
.basket-title {}
.basket-item {}
.basket-productTitle {}
.basket-removeButton {}
https://maintainablecss.com/
How to name things?
.<block>[__<element>][--<modifier>] {}
http://getbem.com/introduction/
<div class="basket">
<h1 class="basket__title">Your basket</h1>
<div class="basket__item">
<h3 class="basket__productTitle">Product title</h3>
<form>
<input type="submit" class="basket__removeButton" value="Remove">
</form>
</div>
</div>
.basket {}
.basket__title {}
.baskek__item {}
.basket__productTitle {}
.basket__removeButton {}
.basket--hidden {}
How to name things?
https://smacss.com/
https://acss.io/
<div class="Row">
<div class="Fl(start) W(1/2) Bgc(#0280ae.5) H(90px)"></div>
<div class="Fl(start) W(1/2) Bgc(#0280ae) H(90px)"></div>
</div>
<div class="D(tb) W(100%)" role="presentation">
<div class="D(tbc) Bgc(#0280ae) H(90px)"></div>
<div class="D(tbc) Bgc(#0280ae.5) H(90px)"></div>
</div>
<div class="IbBox W(50%) Bgc(#0280ae.5) H(90px)"></div><!--
--><div class="IbBox W(50%) Bgc(#0280ae) H(90px)"></div>
<div class="D(f)">
<div class="Flxg(1) Bgc(#0280ae) H(90px)"></div>
<div class="Flxg(1) Bgc(#0280ae.5) H(90px)"></div>
</div>
http://bradfrost.com/blog/post/atomic-web-design/
https://www.gatsbyjs.org/
Semantics!
class Index extends Component {
constructor(props) {
super(props);
this.state = {
notes: [
{
id: 1,
title: 'Hola Amigos!',
note: 'Welcome to Downtown ReactJS'
}
],
count: 1
};
}
const Header = props => {
const { handleClick } = props;
return (
<header className={ styles.container }>
<Button Large handleClick={ handleClick }>Add Note</Button>
</header>
);
class Index extends PureComponent {
constructor(props) {
super(props);
this.state = {
notes: [
{
id: 1,
title: 'Hola Amigos!',
note: 'Welcome to Downtown ReactJS'
}
],
count: 1
};
don't store state or deeply nested props
https://gitlab.com/downtown-react-meetup/entry-point/tree/master
By Roberto Fuentes
Introduction to React & Webpack