Vue JS 3, React JS & Angular - Guide to Popular Frameworks

Initialize a new react project with create-react-app, configure node and yarn, run the development server, and explore the project structure from public and src folders to index.js and package.json.

Learn to set up a React project and render a hello world message using ReactDOM into the root element. Use strict mode and explore basic service worker concepts.

Explore JSX introduction by rendering React elements with JavaScript inside curly braces, learn about className, props, and building a hello world page.

Create a separate functional component to keep code clean and readable, learning the differences with class components, importing React, exporting default, and using props and arrow functions.

Create and extend a class component in React, and see how its render function differs from functional components. Explore how state and props drive rendering in class components.

Learn how to manage state in a class component by initializing this.state, updating it with setState, and wiring increment and decrement functions via onClick handlers, including function declarations and expressions.

Explore how to declare and update state in a React class component using constructors and setState, and observe how state changes trigger renders during debugging.

Demystifies how state works in a class component, contrasts normal functions and arrow functions for event handlers, and explains how this binding affects callbacks and functional components.

Learn to convert class components to functional components using hooks, manage state with useState, and implement a counter with increment and decrement in a React app.

Discover how to use props to pass data from a parent to a child component, including strings, numbers, and functions, in both functional and class components.

Explore class and functional component lifecycle functions, from constructor and mounting to updating and unmounting, and understand use effect with dependency arrays to avoid infinite loops.

Explore life cycle functions in both class and functional React components, recap state and props handling, and clean up code while linking render, constructor, and useEffect concepts.

See how React and other frameworks render HTML by wrapping native browser APIs, creating elements, and mounting them with appendChild to the DOM, revealing the base lifecycle under the hood.

Learn how a web app loads by sending a browser request to localhost and receiving a bundled html document with scripts. The browser renders the document object model.

Build the initial layout using bootstrap, install and import bootstrap 4.5, and apply its classes; copy resources from GitHub and include a public logo with defined height.

Move the layout into modular components by breaking the interface into resource search, update form, and detail views, and organize them in a components folder.

Define an initial resources data array including id, title, description, and type (blog, video, or book), then render by mapping over the data with a unique key.

Learn to add a new resource by creating a resource object with an id, title, description, link, and type, then update and render the resources list.

Learn to toggle between a resource detail view and a resource update view by managing a boolean state, using a button click and a ternary render with props.

Learn toggle refactoring to move the bottom controls from the detail view back to the card, switch between edit and detail states, and adjust layout and styling.

Implement a resource selection feature by styling hoverable list items and updating state with the selected resource on click, then display the selected resource in the detail view.

Explore how to manage an active resource within a list of resources, including selecting, validating availability, and displaying resource details in a component-driven interface.

Demonstrates active item improvements by highlighting the selected resource, adding a fallback message when no resource is chosen, and using conditional class names and optional chaining for safe access.

Set up an api server to simulate networking and test browser requests against endpoints like /api/test and /resources, enabling data retrieval and CRUD operations on localhost:3001.

Fetch resources from a local API using axios by requesting localhost:3000/api/resources and display them in the app; expect a cross-origin error and learn enabling cors or using a proxy.

Configure a http-proxy-middleware to proxy API requests from localhost:3000 to localhost:3001, enabling the development server to bypass policy and fetch resources.

Learn to fetch resources from an API, extract data from the response, and store it in state using an internal async function inside the effect, then render the resources.

Learn how to pre fill a form with resource data from the server, pass resources via props, and build a resource update form with title, description, and link fields.

Learn how to change input values in React by introducing state and a generic handleChange that updates a resource object using the input name as the key.

Explore building a select input to choose a resource type (book, video, blog) in a bootstrap form, handling change events and submit actions to display selected data.

Refactor the resource form into a component in the components folder, wire it to the resource forum, and pass an onSubmit handler to update resource data via an API.

Implement an axios-based update call to a server endpoint, pass the resource id and data, handle the response, and refresh the resource list.

Explore updating the resource list in a frontend app by handling API updates, finding the resource index, updating the copied resources array, and debugging the update view.

See how to sync resource updates across detail and update views by resetting state from new props with an effect and a dependency array.

Learn to implement alert handling for update operations, displaying success or error messages through state updates and try-catch workflows, ensuring clear user feedback.

Implement a reusable display alert function that accepts a type and message, updates the alert state, and renders colored alerts for success or error with timeout and reset logic.

Learn to implement a reset alert pattern using setTimeout and clear, define a reset alert function, and manage alert lifecycle across view changes to avoid stale messages.

Master clearing timeouts in React by persisting timeout IDs with useRef, guarding with current, and refining reusable patterns before introducing higher-order components.

Fix alert timing in the edit and detail views with a useEffect cleanup to reset timeouts when the resource id changes; isolate this behavior in a higher-order component.

Explore how a higher-order component wraps any component to add functionality, such as an alert, by returning a new component that passes through props and renders the original component.

Refactor the app by moving alert and timeout logic from resource update into the player, with props for reset and timeout.

Create a delete resource button with a confirmation prompt, wire it to a delete resource API, and update the UI state after a successful API call.

Delete resource from state teaches mutating the resources list and handling update versus delete tasks. It shows updating the resource list and UI after deletion, including selecting the next resource.

Explore delete improvements by hiding edit and delete buttons when no resources, introduce a base resource and hydrate resources with a dedicated function, and test updates in the browser.

Master routing by installing a popular package, wrapping your app with a browser router, and creating home, new, and detail pages with exact paths and a shared header.

Explore routing with link components to navigate between home, about, and detail pages, organize pages in a dedicated folder, and implement active link styling to indicate the current page.

Design and navigate a resource detail page with dynamic routing, highlighting the active link and rendering a detail view for each resource.

Create a new resource by filling title, description, link, and type, then submit to the resource API. Integrate the resource forum and handle routing and success redirects.

Create new resources using reusable alert components, display success and error messages, and navigate to the resource detail or home page after creation.

Create a custom React hook to fetch resources and manage loading state, refactoring data fetching into useGetResources, using useEffect, exposing resources and loading while avoiding infinite renders.

Learn how to fix hook function issues in popular frameworks by using use callback to prevent infinite loops, manage dependencies, and implement loading states to display resources efficiently.

Build a resource detail page by creating an API function to fetch a resource by id, manage loading state, and render the resource data with a navigable link.

Fix resource detail page by wrapping API calls in try/catch and handling not found resources. Return clear error messages, manage loading state, and ensure front end gracefully handles failed requests.

Explore live search of resources by typing into the input, calling the resources API, and displaying results from the server as you type.

Implement and refine resource fetching and search handling, including reducing requests from typing, managing loading states, and refreshing resources when no title is provided.

Implement debounced search by replacing a standard input with a debounce input, set a 200 ms timeout, and trigger searches only after typing stops, to optimize resource requests.

Fix the resource form by moving the resource-id check into the resource update component, ensuring new resources can be created on every page and display correctly on the homepage.

Build and reuse a settings modal to customize theme and font size, controlled via props and state, with open and close interactions for a responsive user interface.

Develop a settings form component to manage theme and font size, maintain settings state, handle input changes, and submit updates to a parent form via on submit.

Learn to implement a context-based settings system that stores theme and font size in local storage and propagates changes across the app.

manage settings with context, supply initial values, synchronize with local storage, and debug font size and dark theme updates across components.

Refactor the app by moving settings into a context-based settings provider and wrapping the app to propagate light and dark theme changes via a settings API.

Explore theme styles by implementing dark and light modes, adjusting background and label colors via a theme resource and settings provider, and ensuring components respond to theme changes.

Install and verify the Heroku CLI and Git, set up Homebrew on your system, then create a new app in the Heroku dashboard to prepare for deployment.

Create a production server to serve the built app from the framework build folder using express and static, configure the port for localhost and Heroku.

Merge api server with production server by consolidating files, adjusting folder structure, and aligning endpoints; update start scripts and test on development and production environments for deployment.

Create, update, delete, and search resources, deploy the app to a Heroku domain, and verify links work online. Toggle dark and light themes and confirm detail pages render correctly.

Set up a Vue 3 project with Vue init, install the Vue CLI via npm, and run a local development server on localhost:8000.

Explore the project folder structure, including node_modules, package.json dependencies, and the public folder with index.html and assets, and learn how the app is mounted and run in the browser.

Build a dynamic Vue app by creating a main.js, defining a component with template, script, and style, and mounting it to the public HTML page.

Create a simple Vue counter app that initializes at zero, displays the value, and updates via increment and decrement buttons using data, methods, interpolation, and a click directive.

Learn to split a Vue app into reusable components, create a counter view and counter controller, and connect a parent and child component using templates and imports.

Explore how to pass data between components using props in Vue, including naming props like counter, defining types and defaults, and using shorthand binding for clear prop usage.

explains implementing custom events to pass an increment value from a child to a parent. highlights using props for parent-to-child data and emitting the value with a named event.

Learn to build a counter app with custom events emitted on increment, and apply scoped scss styles within a component-based architecture for isolated styling.

Explore how Vue.js, React, and Angular render components by registering elements in the DOM, creating elements and text nodes, and using insert before and append operations under the hood.

Explain how Vue JS components load and run in the browser, from development server compilation to in-memory execution, including HTML, JavaScript, and network traffic.

Build the initial app layout with bootstrap, create a home view under pages, and wire up resource listing and search features while importing bootstrap and explaining its classes.

Create a modular user interface by splitting the app into resource list, search, detail, and update components. Import templates, headers, and assets like a logo to improve maintainability.

Turn hard-coded resources into a dynamic array and iterate over them in the resources component, defining each item with id, title, description, type, and link, then pass as props.

Learn how to use the v-for directive to iterate over a resources array, render multiple items with a unique key, and display each resource’s title, description, and type.

Compare computed properties and methods in Vue to dynamically compute resource length with reactive dependencies, noting that computed properties cache and are accessed as values while methods execute on call.

Toggle between detail and update views using a boolean detail state and a click handler. Render each view conditionally with an if directive to switch dynamically.

Implement add resource by generating a random resource with id, title, and type (book or video), then append it to the resource list on button click.

Explore ux improvements by dynamically toggling button text and state-based classes using template expressions, and create a scrollable resource list with max height and hover effects.

Select a resource from the list to display its details and update the selected resource via a custom event. Use optional chaining to guard against undefined and validate props to allow null or object.

Learn to initialize an active item by default, selecting the first resource when none is selected, and apply an active item class with a background color to indicate the selection.