react-exercises

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.

💻 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.

ℹ️ Other

Import Path

material-ui had a breaking change in v1.0.0-rc.0 whereby the import path has been flattened. Ex:

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

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.

dkitaw/react-exercises