react-exercises
v1.2.2
Published
Exercise database app built with [React](https://reactjs.org/) and [Material-UI](https://material-ui.com/) using [Webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/docs/en).
Downloads
6
Readme
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.
- #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
💻 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.