Skip to content
This repository has been archived by the owner on Jun 5, 2021. It is now read-only.

alex996/react-exercises

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

🚀 SPA to SSR refactoring

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

⚠️ 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.

About

Exercise DB with React & Material-UI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published