react-exercises

Note, this project was completed in late 2018 before React hooks came out. For a more up-to-date tutorial, visit Learn Material-UI.

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

☘️ Branches

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

⚡ SPA bundle size-optimizations

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

🚀 SPA to SSR refactoring

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

🔗 References

▶️ YouTube

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

📖 Medium

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

⏳ CodeSandbox

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

💻 Installation

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

cd react-exercises

# Install the deps
yarn # (or npm install)

🏗️ Development

yarn start or npm start

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

yarn build or npm run build

Builds a production bundle in dist folder.

yarn stats or npm run stats

Generates Webpack stats JSON file and renders a dependency treemap.

yarn serve or npm run serve

Statically serves the contents of dist folder.

⚠️ Breaking Changes

Import Path

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 Icons

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",

Typography Variants

• v3.x.x - configure the theme

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

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

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

Components

• Button

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

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

• Tabs

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

ℹ️ Other

Named Imports

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

Source Maps

Uses cheap-module-source-map for debugging.

Browser Support

Uses @babel/polyfill to support popular browsers.