Game in React: AutoClicker Mining Game - PART 1 | JavaScript from Beginner to Expert 2.0

Book Overview & Buying
Table Of Contents
Feedback & Rating

JavaScript from Beginner to Expert 2.0

By : Arkadiusz Włodarczyk

Buy this Video

JavaScript from Beginner to Expert 2.0

By: Arkadiusz Włodarczyk

Buy this Video

Overview of this book

JavaScript powers everything from simple scripts to complex applications. This course begins with the basics, covering variables, functions, loops, and object-oriented programming. You'll gain hands-on experience embedding JavaScript into web pages, manipulating the DOM, handling events, and improving performance. With structured lessons and real-world exercises, you’ll develop a strong foundation in JavaScript syntax and best practices. As you progress, you'll explore advanced topics like React fundamentals, state management, and component-driven UI development. Modern JavaScript features such as ES6 modules and arrow functions are covered alongside backend development with Node.js and Express. You'll also work with APIs, cookies, debugging tools, and JavaScript frameworks to enhance your programming skills. By the end of this course, you’ll be able to build interactive websites, validate forms, and optimize JavaScript performance. You’ll also create a full-fledged game using React and explore Progressive Web Apps (PWA) and Electron for cross-platform development. Whether you're a beginner or looking to refine your skills, this course provides a structured path to JavaScript expertise.

Introduction

What is JavaScript and where can you use it?

Editor

Downloading and installing editor

Creating the project / structure of project

EXTRA: Useful Shortcuts

Useful shortcuts that will save you tons of time

Basics

Properly embedding JS scripts on your website reducing website loading speed

Basics: How is your script executed? Whitespaces/semicolons etc.

Comments

Variables

const variables - why and when should you use 'const' keyword?

Operators

Arithmetic operators

Relational operators

Logical operators

Conditions

Conditional Statements

Conditional operator ?:

Switch

Functions

Functions basics

Scope of Variables within Functions and Outside of Functions

let vs var - what is hoisting?

Function Expressions | Anonymous function

Objects

What are and how to create objects?

Using an Object Constructor Function (class)

Adding Properties to Objects using Prototype

Arrays

Useful Array Methods

Loops

What is loop? while and do while loop

loop for

instruction break and continue

loop for/in - used for processing objects

EXERCISE: Argument Object in function (unlimited number of arguments)

DOM (Document Object Model)

What is DOM / how to obtain content of your website

querySelector - fast and easy accessing of elements on the website

Changing dynamically styles of elements using JS

Adding and removing elements from document

EXERCISE: Loop inside another Loop - printing out multiplication table

Events

Basics of Events

'this' - accessing the element that invoked the event function

event - VERY IMPORTANT LESSON DO NOT SKIP IT

Adding and removing event listener

Event object as an automatically passed argument to function

Propagating (multiplication of events)

Preventing browser default action for example blocking context menu

EXERCISE: Event - 'jump to the top of website' button

Mouse events - dragging the image

setTimeout and setInterval - Timing Events

EXERCISE: upgrading the code from the last lesson to object-oriented way

Validating Forms using Events

How to validate forms? Validating text type input using form-related events

Stopping form from submitting when any data in a form is not correct

checkbox

radio input on terms and condition example

select (combo box)

String

Manipulating a string using String's methods

Breaking string in many lines for readability and special characters

RegExp

Regular expressions

Regexp match vs exec function

EXERCISE: RegExp on practical example - testing password in input

Date

Time manipulation with Date object

Exercise: A Clock on your website

What are cookies?

Function for creating cookies

Function for removing cookies

Function for finding value of cookie by keyname

Properly interpreting special characters - EncodeURIComponent method

Dialog Window

Confirm and prompt box

Math

Rounding numbers and the most useful Math methods

Randomness

EXERCISE: Random quotes

Location

How to get and change location (URL) of your user?

Images

Loading Images only when needed - save your bandwidth and improve user experience

Exercises

Slideshow

Slideshow animated in JS using CSS property transition

Animation using setInterval that is supported in every web browser

Image gallery with thumbnails

Tooltip - how to create a hint box?

Closures

What are closures on a practical example?

Advanced - Optional Topics

Bitwise operators

EXTRA CONTENT 1: Debugging

Firebug

Debugging with console commands

Great online tools for testing and sharing your code

strict mode

EXTRA CONTENT 2: Best Practices

Code performance

Keeping one .js file

Compressing JS files

7 most common mistakes you should avoid

Changing IDE coloristics - keep your eyes healthy

NEW JS Features - NEWEST STUFF

Nullish Coalescing Operator - ??

Arrow functions - mapping and filtering arrays

export vs export default in JS - how to organize code into modules?

EXTRA CONTENT: React Basics

What is a component?

React fundamentals - the most important lecture for learning React

EXTRA CONTENT: Node.js & Vite - React Template

What is Node.js and npm?

Installing Vite and React structure

Single file app to multiple files app - analyzing structure of React project

How to create a component and connect it to App.jsx

EXTRA CONTENT: React Props

What are props and how to use them?

Game in React: AutoClicker Mining Game - PART 1

Intro: What are we gonna create?

Ex. Create GoldMiner Main comp

Gold Miner Power Upgrade

Updater Functions in React Hooks

[EXERCISE] Auto Clicker GUI and hooks

useEffect on practical example: AutoClicker

Conditionally Disabling a Button in React Using the 'disabled' Attribute

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

Installing lucide-react - let's apply icons to our game

How to apply CSS to components - className

Installing Framer Motion in React - let's bring animation to our project!

Let's add simple animation using Framer Motion to our app

Game in React | Refactoring Code | PART 3

...animationProps - let's use object destructuring to improve animation work

lodash.merge package - how to merge props on a practical example

Creating functional components - let's refactor our code

util folder with animations.jsx settings for entire app

AnimatePresence - how to make 'exit' animation

CSS modules - let's apply scope to our CSS

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

Create ThemeToggleButton

Conditional text - Dark to Light, Light to Dark

[EXERCISE] Button from external package - change theme with SVG animation

Separate buttons and see what's happening with 'shared' state

How to create Context Provider? - Let's create ThemeProvider

use-state-local-storage - how to implement SAVE system in our game in 5 min?

Deployment

How to build your React app into a static page?

Electron in React & Vite

What is Electron and how to make it run our React app?

How to build Electron EXE from our React app

PWA (Progressive Web Apps)

What is PWA?

Transform your HTML/CSS/JS app into a PWA

NPX - executing package to generate required icons

PWA & React - PWAInstallButton - Catching Events in React

Showcase of a problem - creating PWAInstallButton component (1)

Controlling visibility of component in React from return statement (2)

Catching and preventing event (3)

How to resolve Promise from prompted user to install PWA app? (4)

Express - Backend for React

How to set up Express? How to set up the backend of your app?

nodemon - how to automatically monitor changes on the server

Fetching data from a React component from Express

"Loading" message while fetching data

React Spinner - let's 'spin' the loading message

[EXERCISE] React Toastify - notifying user like a pro

React - Displaying Lists & Forms in React

Map - displaying items from lists

key - how to generate unique keys using uuid

filter - filtering and removing elements from a list

New task item - accessing forms using DOM - uncontrolled forms

useRef - accessing/referencing DOM

- controlled inputs in React

- how to create forms in React?

[EXERCISE] useRef - practical example - refocus

sort() - how to sort a list?

[EXERCISE] How to create a toggle asc/desc sorting button

Refactoring Code - Splitting Big Components

Why do we refactor the code? How to do it? A trick to do it faster

[EXERCISE] - Refactor Task Item Component

REFACTOR: TaskForm

Customer Reviews

5 star

4 star

3 star

2 star

1 star

JavaScript from Beginner to Expert 2.0

By : Arkadiusz Włodarczyk

JavaScript from Beginner to Expert 2.0

By: Arkadiusz Włodarczyk

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access