intro to reactjs

& webpack

intro to reactjs

& webpack

ReactJS

v16.2.0

Webpack

v4.0.0 (2/25)

https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

what is reactjs

  • JS library for building user interfaces
  • Declarative
    • tell React what to render
  • One-way data flow
    • props flow down; actions flow up
  • Virtual DOM
  • JSX
  • it's just JS

what is reactjs

DOM

what is reactjs

Virtual DOM

http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

Title Text

  • how things look
  • how things function
  • promotes reuse

what is webpack

  • Bundler
  • Asset Pipeline
  • Benefits
    • configure all things!
    • minification (uglify), code splitting, cache busting, etc
    • dev server
    • application command center

https://webpack.js.org/

what is webpack

  • Entry (index.js)
  • Output (app.bundle.js)
  • Loaders (transform files i.e. css, scss, less, imgs, files)
  • Plugins (tasks i.e. hot loader, uglify, extractText, customize)

https://webpack.js.org/

what is webpack

  • CSS Modules
  • relative paths
    • inline loaders
  • imports + @imports
  • it's just JS

https://webpack.js.org/

HTml-css-js

  • how to organize all three?
    • folder structure
  • what are some CSS best practices?
    • unique class names
  • how to build an page/app?
    • components

Semantic HTML-CSS-JS

Semantics

  • What does it represent? (object)
  • What does it look like? (presentation)
  • What is it suppose to do? (functionality)

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?

Semantics

  • html, head, meta, link, style, title, body
  • Content Sectioning
    • address, article, aside, footer, header, h1h2h3h4h5h6, hgroup, nav, section
  • Text Content
    • blockquote, dd, dir, div, dl, dt, figcaption, figure, hr, li, main, ol, p, pre, ul
  • Inline Text
    • a, abbr, b, bdi, bdo, br, cite, code, data, dfn, em, i, kbd, mark, nobr, q, rp, rt, rtc, ruby, s, samp, small, span, strong, sub, sup, time, tt, u, var, wbr
  • Image & Multimedia
    • area, audio, img, map, track, video
  • Embedded Content
    • applet, embed, noembed, object, param, picture, source
  • Scripting
    • canvas, noscript, script
  • Demaracating Edits
    • del, ins
  • Table Content
    • caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr

Semantics

  • Forms
    • button, datalist, fieldset, form, input, label, legend, meter, optgroup, option, output, progress, select, textarea
  • Interactive Elements
    • details, dialog, menu, menuitem, summary
  • Web Components
    • content, element, shadow, slot, template

Semantics

  • Elements
    • h1h2h3h4h5h6, a, li, hr, div, blockquote
    • caption, td, th, tr, tfoot
    • button, input, label, textarea
  • Content Sections (components)
    • footer, header, nav, section, aside, article
    • ol, ul, menu, figure, table, form

Mix&Match

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Semantics

<!-- 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?

Semantics

//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>

Semantics

  • Readable
  • Communicate
  • Reusable
  • Hooks into Tests

side on Explicit rather than Implicit

Semantics

  • How can we use the semantics that we know today to guide our development?
  • How can HTML + CSS leverage each others?
    • atoms / elements / components

Folder structure

  • Constraint
    • 2-D layout
  • Mental architecture
    • semantics
  • common language
    • semantics

Folder Structure

Folder Structure

Folder Structure

https://gitlab.com/downtown-react-meetup/entry-point

css modules

  • Global Namespace
  • Dependencies
  • Dead Code Elimination
  • Minification
  • Sharing Constants
  • Non-deterministic Resolution
  • Isolation

css modules

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;
}

css modules

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/

css modules

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 {}

css modules

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/

Reactjs

  • Class Components (stateful)
  • Functional Components (stateless)
  • Pure Components
  • Props
  • State
  • Life Cycle Methods

https://www.gatsbyjs.org/

Semantics!

Reactjs

  • Class Components (stateful)
class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      notes: [
        {
          id: 1,
          title: 'Hola Amigos!',
          note: 'Welcome to Downtown ReactJS'
        }
      ],
      count: 1
    };
  }

Reactjs

  • Functional Components (stateless)
const Header = props => {
  const { handleClick } = props;

  return (
    <header className={ styles.container }>
      <Button Large handleClick={ handleClick }>Add Note</Button>
    </header>
  );
  • no life cycle methods
  • renders when props change(?)

Reactjs

  • Pure Components
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

  • similar to Component "shouldComponentUpdate"
  • shallow comparision

https://gitlab.com/downtown-react-meetup/entry-point/tree/master

Made with Slides.com