Exercise database app built with React and Material-UI using Webpack and Babel.

This master branch houses the most up-to-date code. For a particular topic, switch to one of the following branches.

• before at spa/unoptimized, and
• after at spa/optimized
  • compare branches to view the diff, and
  • see README for a complete walkthrough

• before at ssr/starter, and
• after at ssr/final
  • compare branches to view the diff, and
  • see the Markdown presentation from the video

This is a companion repo for Material-UI video series on YouTube. Check out the playlist for all episodes.

I also wrote Meet Material-UI — your new favorite user interface library on Medium freeCodeCamp. Check it out for an introduction to Material-UI.

You can find code for each video on CodeSandbox.

• #1-2 Intro / Grid Layout
• #3-4 Data Store / Lists, Tabs & Typography
• #5-6 Dialogs & Icons / Forms, Inputs & Styling
• #7-9 Lists & IconButtons / Forms (Part 1 & 2)
• #10-11 CSS-in-JS / Styling with JSS
  • old #10-11 with broken Edit
• #12 Theming (Part 1)
• #13-14 Theming (Part 2 & 3)
• #15 Context API

# Clone the repo
git clone https://github.com/alex996/react-exercises.git

cd react-exercises

# Install the deps
yarn # (or npm install)

Serves the app at localhost:4000 and watches files to re-builds the bundle.

Builds a production bundle in dist folder.

Generates Webpack stats JSON file and renders a dependency treemap.

Statically serves the contents of dist folder.

As of v1.0.0-rc.0, the import path has been flattened:

-import { Tab } from 'material-ui/Tabs'
+import { Tab } from '@material-ui/core'

material-ui-icons package has been deprecated in favor of @material-ui/icons. In package.json:

-"material-ui-icons": "^1.0.0-beta.36",
+"@materia-ui/icons": "^1.0.0",

• v3.x.x - configure the theme

const theme = createMuiTheme({
  // ...
  typography: {
    useNextVariants: true,
  },
}

• v4.x.x - latest variants are applied by default 🎉

-typography: {
-  useNextVariants: true,
-},

• Button

-<Button variant='raised' />
+<Button variant='contained' />

-<Button variant='fab' />
+<Fab />

• Tabs

-<Tabs scrollable />
+<Tabs variant='scrollable' />

Uses tree shaking for convenient top-level imports like above.

Uses cheap-module-source-map for debugging.

Uses @babel/polyfill to support popular browsers.