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