JavaScript in Modern Web Development

Packt via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Paid Course
Languages

English
Certificate

Paid Certificate Available
Duration & workload

13 hours 4 minutes
Sessions

On-Demand
Subtitles

English

Found in

Part of

JavaScript from Beginner to Expert 2.0

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Grab it

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this course, you will gain in-depth knowledge of JavaScript and its application in modern web development. You’ll learn everything from best practices, such as optimizing JavaScript performance and managing files efficiently, to the latest features of JavaScript, including the nullish coalescing operator and arrow functions. The course also dives into building projects with React and Node.js, focusing on component structures and integrating various external packages for enhanced functionality. As you progress, you will explore key web development tools like Vite, Electron, and Progressive Web Apps (PWA), while also covering the essential integration of back-end technologies with Express.js. This is not just about theory; the course will guide you through hands-on exercises like creating games in React, managing state, and deploying your applications. This course is designed for aspiring developers who want to build responsive, dynamic, and scalable applications using modern JavaScript technologies. Whether you’re looking to specialize in React or gain a broader understanding of web development, this course offers the tools and knowledge to get you there. By the end of the course, you will be able to efficiently use JavaScript to build modern web applications, master React for building components and managing state, integrate back-end services with Express.js, and deploy your projects for production.

Syllabus

EXTRA CONTENT: React Basics

In this module, we will explore the fundamentals of React, starting with components and their function in building user interfaces. You'll dive deeper into key concepts like state, props, and the virtual DOM, which form the core of React’s architecture.

EXTRA CONTENT: Node.js & Vite - React Template

In this module, we will guide you through the process of setting up a React development environment using Node.js, npm, and Vite. You will also learn how to scale your project from a single-file app to a more organized multi-component structure.

EXTRA CONTENT: React Props

In this module, we will dive into props, a key feature of React. You'll learn how to use props to pass data and functions between components, making your React applications more dynamic and modular.

Game in React: AutoClicker Mining Game - PART 1

In this module, we will guide you through the development of an AutoClicker Mining game in React. You’ll create key components, add game mechanics like power upgrades, and utilize React hooks to manage game state and side effects.

Game in React | External Packages: lucide, framer, lodash - PART 2

In this module, we will enhance the AutoClicker Mining game by integrating external packages like lucide-react for icons, Framer Motion for animations, and lodash for better data manipulation, making the game more engaging and visually appealing.

Game in React | Refactoring Code | PART 3

In this module, we will focus on refactoring your React game code to enhance maintainability. You’ll break down large components into smaller pieces, optimize your animation work with object destructuring, and apply lodash for better data handling.

Game in React | Context Provider | Local Storage | PART 4

In this module, we will explore the Context API and local storage to manage global state and persist data in your React game. You will also build a theme toggle button to switch between light and dark modes.

Deployment

In this module, we will walk you through the process of deploying your React app. You will learn how to optimize your application for production, build it as a static page, and make it ready for deployment.

Electron in React & Vite

In this module, we will introduce Electron and show you how to integrate it with React to build cross-platform desktop applications. You will also learn how to package your app into an executable file.

PWA (Progressive Web Apps)

In this module, we will dive into Progressive Web Apps and how they offer a native-like experience on the web. You’ll learn how to convert a traditional app into a PWA and generate the necessary icons for it using NPX.

PWA & React - PWAInstallButton - Catching Events in React

In this module, we will focus on creating a custom install button for your PWA and managing component visibility using React. You will also learn how to handle installation events and promises for better user control.

Express - Backend for React

In this module, we will teach you how to integrate Express with React to create a full-stack application. You will set up a backend, fetch data dynamically, and enhance the user experience with loading indicators.

React - Displaying Lists & Forms in React

In this module, we will guide you through rendering lists, handling forms, and managing user inputs in React. You’ll also learn how to dynamically sort and filter data within lists, making your app interactive and user-friendly.

Refactoring Code - Splitting Big Components

In this module, we will explore code refactoring techniques to optimize large React components. You will learn how to break down big components into smaller, reusable pieces and improve the overall structure of your app.

MySQL Basics for JavaScript Developers[GN4.1]

In this module, we will walk you through the basics of MySQL, starting with understanding its purpose and setting up a local database environment using XAMPP. You'll then learn essential SQL queries to create tables, insert records, and retrieve data effectively.