react-webpack-babel-md-tutorial

react-webpack-babel-md-tutorial is a free, four-part tutorial repository from Creative Tim that shows how to build a React application with Webpack 4, Babel 7, and Material Design, from a bare-bones setup to a full dashboard UI.

What is react-webpack-babel-md-tutorial?

The repository is a progressive tutorial split into four parts. Part 1 contains only a minimal React entry point (index.html and index.js). Part 2 adds a webpack.config.js with Webpack 4. Part 3 introduces a .babelrc for Babel 7 and adds SCSS styling via index.scss. Part 4 assembles the complete Material Dashboard React project with components, layouts, routes, variables, and views. You run it locally with npm install and npm start inside each part's folder.

Key Features

• Four incremental parts — Each folder (Part 1 through Part 4) builds on the previous one, so you can see exactly what Webpack and Babel add at each stage.
• Webpack 4 configuration — Parts 2-4 include a webpack.config.js; Part 1 has none.
• Babel 7 with .babelrc — Parts 3 and 4 include a .babelrc file; Parts 1-2 rely on plain React without transpilation setup.
• Material Design dashboard components — Part 4 includes Card, CustomButtons, CustomInput, CustomTabs, Footer, Grid, Header, Sidebar, Snackbar, Table, Tasks, and Typography components in individual .jsx files.
• Dashboard views — Part 4 ships with views for Dashboard, Icons, Maps, Notifications, TableList, Typography, UpgradeToPro, and UserProfile.
• SCSS styling — index.scss appears in Parts 3 and 4; Part 4 also includes a jss folder with material-dashboard-react styling files.
• Browser support — The project officially targets the last two versions of Chrome, Firefox, Edge, Safari, and Opera.

Who should use react-webpack-babel-md-tutorial?

• React developers learning build tooling — They can compare Parts 1-4 to see exactly what Webpack and Babel contribute to a React project.
• Frontend developers wanting a Material Design dashboard starter — Part 4 gives a complete dashboard layout with routes, sidebar, header, and views they can copy or adapt.
• Creative Tim users — Anyone who has used Creative Tim's other products will recognize the Material Dashboard design language and component structure.

What can you do with react-webpack-babel-md-tutorial?

• Learn the setup sequence: Clone the repo, run npm install and npm start in a part folder, and study the webpack.config.js and .babelrc files to see how the build evolves.
• Kickstart a dashboard project: Copy Part 4's components, layouts, and views as the foundation for an admin panel or analytics dashboard.
• Understand Material Dashboard React internals: Explore the jss, variables/charts.jsx, and routes files to see how styling, chart data, and navigation are organized.

How does the tutorial work?

Each part runs independently. The quick start suggests cloning the repository, then running npm install and npm start inside Part 2, Part 3, or Part 4. You can open the corresponding webpack.config.js and .babelrc to trace how each part adds functionality.