kimniche

Concept Review

Bundles

• Processed output files emitted by a bundler (Webpack)
• Contain chunks

Chunks

• Entry chunk
  • contains Webpack bootstrap code (also called the webpack "runtime") needed to run your app
  • must go in <script> tag
• Normal chunk

kimniche

Tests

• No more explicitly done with setTimeout !!

kimniche

Plugins

Add module exports

https://github.com/59naga/babel-plugin-add-module-exports

avoids need for:

require('./bundle.js') // { default: 'foo' }
require('./bundle.js').default // 'foo'

kimniche

Goal: http://dmv.niche.team/master-774cc/z/new-search/college-ranking.html#

Key Pieces

• CSS attribute selectors
• HTML data attributes
• Less functions (optional)

CSS attribute selectors

• [attr=value] : element with attr of value

kimniche

// mass assign
let config,
    contents,
    requestDate,
    requestStatus

if (section) {
    ({ config, contents, requestDate, requestStatus } = section)
}

kimniche

Some examples borrowed from http://sass-lang.com/guide

Variables

// Less
@navy01: #114da5;
@navy02: #1956dd;

kimniche

General structure

• very similar to Website tests

import { isLegitAdmin } from 'utils/UserUtils'

describe('UserUtils', () => {
    it('`isLegitAdmin` returns false if no `user` is provided', () => {
        expect(isLegitAdmin()).toBe(false)
    })

kimniche

-- niche.com DNS prefetch --
https://css-tricks.com/prefetching-preloading-prebrowsing/

-- env variables --
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

-- lazy loading & code splitting via dynamic imports --
http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

kimniche

http://192.168.0.165:3001/edit-profile/students

test-yxfbakih
kcooperrider+1

kimniche

[email protected] (a)
[email protected] (non-a)

http://192.168.0.165:3001