Learn ReactJS with Webpack 4, Babel 7, and Material Design

Quick and simple, fast guide on integrating ReactJS with Webpack, Babel and Material Design.

4.05 (328 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Learn ReactJS with Webpack 4, Babel 7, and Material Design
13,032
students
30 mins
content
Feb 2019
last update
FREE
regular price

What you will learn

Webpack

Babel

Integration with ReactJS web Template

Description

This is a short tutorial which will get your ReactJS app running with Webpack and Babel.


React is a JavaScript library for building user interfaces and it has three main characteristics:

  • Declarative

  • Component-Based

  • Learn Once, Write Anywhere

Webpack is an open-source JavaScript module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. Webpack takes modules with dependencies and generates static assets representing those modules.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

  • Transform syntax

  • Polyfill features that are missing in your target environment (through @babel/polyfill)

  • Source code transformations (codemods)

  • And more! (check out these videos for inspiration)

In short, Babel is a JavaScript compiler.


To whom is this course addressed:

  • Beginner and intermediate ReactJS Developers

  • ReactJS Developers that want to learn the new ways of working with React and Webpack

  • Anyone

Content

Our Setup

Our Setup

How to use ReactJS with Webpack 4, Babel 7

Creating a new project folder with package.json
Adding Webpack to the project
React, Babel and some nice loaders for styles

How to use ReactJS with Webpack 4, Babel 7, and Material Design

Add Material Design to our new React with Webpack and Babel project

Reviews

Paulo
March 4, 2022
Interessante a parte de integração webpack/babel porém algumas coisas não funcionaram como deveria por causa de versões legadas. O tamanho do código poderia ser maior, ficou difícil de ler algumas vezes
Clinto
November 30, 2021
Content of the course is not clear. Wish that it has longer and detailed course along little huge font size to read. Good for the effort.
Wilburn
December 5, 2020
I understand that there is a speed setting but I would like if the instructor explained the webpack options. I would appreciate an update of this course seeing as the most upstream is webpack 5.10.0 and I had to find workarounds because webpack-dev-server wasn't working as shown.
Vance
September 6, 2020
It's difficult to read what's being presented, even when I expand the video. Also, the code that's presented within the course is out-of-date with what's in GitHub.
Eric
August 25, 2020
Instead of importing the whole material template, it would have been nice if the components will be added to the project one at a time or as needed. Like break the project down into smaller sections or mini-projects and then import just the components needed for that mini-project instead of installing everything at the same time including the package dependencies
Jlents
May 16, 2020
I appreciate the effort, but this tutorial could've been a quick blog about what packages to install and a reference to a github project that has an example.
William
April 27, 2020
too much jump fro lesson 2 to 3 very little explanation for each line, especially for the webpack.config.js file very little explanation for every installed plugins/node modules no better from youtube videos
Mark
February 15, 2020
This is quite rudimentary. The subject could be covered in a well-written article. If you prefer a video presentation on how to install and configure software, it is OK.
Éden
January 26, 2020
O video ensina uma coisa que não acontece, fornece um projeto que não funciona por que não está na mesma versão e não avisa ou ensina a resolver.
Thodoris
October 5, 2019
Simply copy pasting an existing project without explaining or at least showing the code is not teaching. Too many imports without explaining why.
Rene
August 27, 2019
Gostei de como apresenta as peças deste grande quebra-cabeça, poderia melhorar o áudio. De qualquer forma, parabéns!
Jitendra
July 24, 2019
Super simple setup but my eyes were not able to see things happening on the screen due to all tutorials are recorded in small size. It could be better to record at read level.
Szulák
June 30, 2019
Explanations missing! Why use the packages you're using? Where do you know the dependency versions from? What does Babel/WebPack do? And so on...
Swapnesh
April 12, 2019
Few of the configurations regarding Webpack and Babel needs to be more descriptive to be more clear that why do we need them
Bettina
April 9, 2019
The video quality is way to bad to see what is written - so it is not of a lot of use ... also there are a few explanations, but by far not enough to understand the topic. At least it is free... otherwise i would feel cheated ...

Charts

Price

Learn ReactJS with Webpack 4, Babel 7, and Material Design - Price chart

Rating

Learn ReactJS with Webpack 4, Babel 7, and Material Design - Ratings chart

Enrollment distribution

Learn ReactJS with Webpack 4, Babel 7, and Material Design - Distribution chart

Related Topics

2226318
udemy ID
2/18/2019
course created date
12/20/2019
course indexed date
Bot
course submited by