Learn React Micro Frontend From Scratch Using Webpack

Learn React Micro Frontend From Scratch Using Webpack, available at $54.99, has an average rating of 4.71, with 27 lectures, based on 7 reviews, and has 59 subscribers.

You will learn about 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 This course is ideal for individuals who are 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. It is particularly useful 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.

Enroll now: Learn React Micro Frontend From Scratch Using Webpack

Summary

Title: Learn React Micro Frontend From Scratch Using Webpack

Price: $54.99

Average Rating: 4.71

Number of Lectures: 27

Number of Published Lectures: 27

Number of Curriculum Items: 27

Number of Published Curriculum Objects: 27

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will 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 Should Attend

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.

Target Audiences

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.

  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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: How create-react-app works

Lecture 2: Webpack intro

Chapter 2: Create a react app using webpack

Lecture 1: Setup react and react-dom

Lecture 2: Setup webpack config

Lecture 3: Custom entry and output in webpack config

Lecture 4: Webpack css loaders

Lecture 5: Webpack file loaders

Chapter 3: Webpack Dev Server and Hot Reloading

Lecture 1: Setup webpack dev server

Lecture 2: Setup hot reloading using react-refresh

Chapter 4: Project – Using monolithic architecture

Lecture 1: Create header

Lecture 2: Create todo-form

Lecture 3: Style todo-form

Lecture 4: Add todo

Lecture 5: Show todoitems

Lecture 6: Edit todo

Lecture 7: Delete todo

Chapter 5: Project – Using micro-frontend architecture

Lecture 1: Micro frontend project – Intro

Lecture 2: Setup all micro frontends

Lecture 3: Export todoform component

Lecture 4: Import todoform component in host app

Lecture 5: Add content in todoform component

Lecture 6: Export todolist component

Lecture 7: Edit todo scenario in micro frontend

Chapter 6: Deployment of Micro-frontend apps

Lecture 1: Setup webpack config for production

Lecture 2: Push code to github

Lecture 3: Deploy remote apps

Lecture 4: Deploy host app

Instructors

K.Sathyaprakash Reddy
Full Stack Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 3 votes

5 stars: 4 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!