Learn React Micro Frontend From Scratch Using Webpack

Focused View

K.Sathyaprakash Reddy

3:25:33

0 View

1. Introduction

1. How create-react-app works.mp4

09:06

2. Webpack intro.mp4

08:39

2. Create a react app using webpack

1. Setup react and react-dom.mp4

05:54

2. Setup webpack config.mp4

22:40

3. Custom entry and output in webpack config.mp4

07:12

4. Webpack css loaders.mp4

05:23

5. Webpack file loaders.mp4

04:38

3. Webpack Dev Server and Hot Reloading

1. Setup webpack dev server.mp4

07:10

2. Setup hot reloading using react-refresh.mp4

04:30

4. Project - Using monolithic architecture

1. Create header.mp4

08:22

2. Create todo-form.mp4

10:03

3. Style todo-form.mp4

09:00

4. Add todo.mp4

06:13

5. Show todoitems.mp4

13:38

6. Edit todo.mp4

03:34

7. Delete todo.mp4

04:14

5. Project - Using micro-frontend architecture

1. Micro frontend project - Intro.mp4

07:42

2. Setup all micro frontends.mp4

11:05

3. Export todoform component.mp4

07:06

4. Import todoform component in host app.mp4

08:07

5. Add content in todoform component.mp4

05:07

6. Export todolist component.mp4

08:33

7. Edit todo scenario in micro frontend.mp4

04:26

6. Deployment of Micro-frontend apps

1. Setup webpack config for production.mp4

10:43

2. Push code to github.mp4

02:25

3. Deploy remote apps.mp4

05:41

4. Deploy host app.mp4

04:22

Description

A course on optimizing React applications with Webpack and implementing a scalable micro-frontend UI architecture 2024

What You'll Learn?

Learn how the create-react-app command line tool works behind the scenes
Differences between monolithic architecture and micro frontend architecture
Learn what is webpack , how it is helping create-react-app tool to process react app in-order to render it on the browser
Learn how to create a new react app using using webpack from scratch
Learn the differences between webpack development server and production server
Implement hot reload functionality using react-refresh plugin
Importing and exporting components from one project to another using webpack module federation plugin
Learn how to handle routes and navigation in micro-frontend architecture
Learn how to maintain the code repositories for micro-frontend apps
Learn how to deploy and maintain the micro-frontend apps

Who is this for?

This course is designed for developers who are already familiar with React and want to learn how to build and manage micro frontends using Webpack. They will learn how to optimize their React applications using Webpack and implement a scalable micro frontend architecture.

What You Need to Know?

Prior knowledge of React fundamentals is essential for participants to grasp the concepts covered in the course. This includes components, state management, props, and JSX syntax.

More details

Description
Â Discover the Power of Micro Frontends: Build Scalable React Apps with Webpack

In this course, you'll embark on an exciting journey to master micro frontends, a cutting-edge approach that revolutionizes the way we build modern web applications. Using React and Webpack, you'll learn how to create scalable, maintainable, and efficient frontend architectures
We'll start by demystifying the create-react-app tool and exploring the inner workings of Webpack. You'll gain a deep understanding of how Webpack operates behind the scenes of create-react-app, setting the foundation for your micro frontend journey.
Next, we'll dive into the fundamentals of Webpack, teaching you how to create a React app from scratch. You'll learn about the essential concepts in webpack.config.js, such as hot reloading, Webpack Dev Server, and customizing entry and output points.
With a solid grasp of Webpack and React, we'll introduce the concept of micro frontends. You'll learn how to build a project using a monolithic architecture and then transition to the micro frontend approach. This hands-on experience will help you understand the differences between the two architectures and the benefits of micro frontends.
The core of the course focuses on micro frontend concepts like hosts, remotes, exposes, and how to export and import modules using Webpack Module Federation. You'll learn to break down your application into smaller, independent components that can be developed, tested, and deployed separately.
To solidify your understanding, we'll guide you through building the same project using both monolithic and micro frontend architectures. This comparative approach will help you appreciate the advantages of micro frontends and make informed decisions when designing your own applications.
Finally, we'll explore deployment strategies for micro frontend applications, ensuring that you're equipped with the knowledge to build and deploy scalable, high-performing solutions.
By the end of this course, you'll have a comprehensive understanding of micro frontends and the ability to create modular, maintainable, and efficient frontend applications using React and Webpack. Unlock the power of micro frontends and take your frontend development skills to new heights.
Who this course is for:
This course is designed for developers who are already familiar with React and want to learn how to build and manage micro frontends using Webpack. They will learn how to optimize their React applications using Webpack and implement a scalable micro frontend architecture.

User Reviews

Rating

average 0

Total votes0

Focused display

React

Front End Web Development

K.Sathyaprakash Reddy

Instructor's Courses

Hi,I am Satyaprakash Reddy, I am a freelance developer in India.I've 5 years of experience in developing applications in Android and Web Development.I've been teaching coding lectures from the past three years in an Institute. So now I wanted to share my knowledge across the globe through Udemy.I spend most of my time researching how to make learning to code fun and make hard concepts easy to understand. I apply everything I discover into my Bootcamp courses. In my courses, you'll find lots of geeky humor but also lots of explanations and animations to make sure everything is easy to understand.Thank U.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.