BruceWeng / MockFrontend

Build small frontend features in VanillaJS and ReactJS

MockFrontend

Build small frontend features in VanillaJS and ReactJS

TODO App

• VanillaJS
• ReactJS

Search Image App

• VanillaJS
• ReactJS

Shopping Cart App

• VanillaJS

React

Thinking in React with VanillaJS

• React design pattern

React Life Cycle

• ReactJS

Advanced React Component Pattern

• Compound Component
• Controlled Component
• Higher Order Component
• Render Prop
• State Reducer

Vanilla Utilities

• Debounce
• Throttle
• Memoize
• Flatten
• Promise
• Event Emitter

Vanilla Features

• Infinite Scrolling

Vanilla Components

CSS

• Breadcrumb
• Card
• Tables
• Forms
• Input group
• List group
• Button group
• Pagination
• Images
• Nav
• Navbar
• Progress

Javascript

• Modal
• Dropdown
• Scrollspy
• Tab
• Tooltip
• Popover
• Alert
• Button
• Collapse
• Carousel
• Affix
• Accordion

Helper classes

• Color variables
• Contextual colors
• Contextual backgrounds
• Close icon
• Carets
• Quick floats
• Center content blocks
• Clearfix
• Showing and hiding content

CSS Grid Layout

• Responsive column resets
• Offsetting columns
• Nesting columns