React + Next JS with TypeScript

Explore the evolution of JavaScript since 2015, and learn about functional components and class components, plus how community standards and official resources shape modern web development.

Explore block scope by comparing var and let, showing how let is confined to its block while var remains accessible outside the block.

Explore function scope and how variables declared inside a function are accessible only within that function, contrasting it with block scope and clarifying how scope governs accessibility.

Learn how constant variable references work and how immutability affects reassigning values; modify object contents but refrain from rebinding the constant to a new object.

Explore how arrow functions differ from traditional function definitions in JavaScript, including how scope and this context are handled, with examples using f1 and f2 and object context.

Master property and method shorthand in object literals, using matching variable names to simplify keys. Explore dynamic keys with square brackets and concise function forms like arrow functions.

Master destructuring, spreading, and rest-spreading to extract and combine object and array data in React apps, including selective properties, object and list spreading, and shallow copying behavior.

Explore string templates in JavaScript/TypeScript, including multi-line strings and interpolation with ${...} to embed any valid JavaScript expression. See examples using console.log and function calls like random numbers with Math.random.

The lecture explains classes in an object oriented style, covering constructors and properties. It shows private hash properties, extends for inheritance, method overriding, and instantiation with the new keyword.

Explore how promises manage asynchronous operations, including creating a promise, delaying resolution, and consuming results with then and catch. See how to handle errors and avoid nested callbacks.

Explore how TypeScript adds static typing to JavaScript, enabling explicit type annotations, interfaces, and strong typing for arrays, while compiling to vanilla JavaScript for modern and older environments.

Configure TypeScript in a React + Next.js project by understanding its JavaScript enhancements. Learn to set up Visual Studio Code, install TypeScript, and configure the TypeScript project for compilation.

Explore TypeScript basic types, including number, string, boolean, object, any, null, undefined, and unions, and see how type assignments and errors guide safe code.

Master automatic type inference and union types in TypeScript to enhance intellisense, enabling precise function inputs as string or number and undefined handling in React and Next.js apps.

Explore arrays and tuples in TypeScript by defining arrays of numbers and mixed-type tuples, including booleans and strings, and see how functions can return multiple values using tuples.

Explore how to define and initialize enums in TypeScript for React and Next.js apps, including numeric and string values, default zero-based indexing, and explicit value assignment.

Define custom types to describe objects using interfaces or classes in TypeScript, including optional and union fields, and enforce correct typing and good coding practices with clear error feedback.

Define interfaces in TypeScript, declare read-only attributes, and enforce id as a number and name as a string, while extending interfaces and implementing them in classes.

Explore TypeScript function types and void by defining function signatures, annotating arguments, returning values, and using interfaces to model functions inside objects.

explore access modifiers in TypeScript, including private, public, and protected, with class and inheritance examples, and examine how private fields translate to JavaScript and the hash syntax.

Explore generics in TypeScript by building a generic function that takes two values of the same type and returns an array, enforcing type safety for numbers and strings.

Explore react.js, a JavaScript library for building user interfaces. It emphasizes declarative rendering, a component-based architecture, and a virtual representation of memory for efficient updates.

React presents components as independent building blocks that encapsulate HTML, CSS, and JavaScript, enabling isolated development, separation of concerns, and reusable pieces across a website.

Learn how JSX acts as syntactic sugar for writing React code by transforming JSX into React.createElement calls, and compare class and function components in a component-based architecture.

Explore JSX characteristics as a syntax extension for creating elements in React and Next.js, including props and attributes, custom components, curly brace expressions, and the single root element requirement.

Explore React + Next JS with TypeScript by comparing functional components and class components, and practice building components as you learn the core concepts.

Explore building a React class component in a Next.js context, compare class and function components, and learn to export and render a component with props and state-driven content.

Learn how to embed JavaScript expressions in JSX and harness various comment styles to annotate code, including block and document comments.

Render a dynamic list in a React + Next.js with TypeScript project by mapping an array of items, assigning unique keys, and controlling visibility and categorization with presets.

Master conditional rendering and visibility in React by using boolean expressions to show or hide tasks, understanding that truthy values render while undefined, null, or false are ignored.

Learn how to decompose a react app into smaller components by building a reusable list item component, passing data via props, and handling list rendering with conditional elements.

Learn to declare prop types for class components in React with TypeScript, using interfaces to define props, render lists with keys, and compose smaller components for maintainability.

Learn how to render multiple root elements in react using fragments, including the empty fragment and the shorthand syntax <> </>, to avoid extra wrappers in components.

Implement a simple click event to mark a to-do item as completed in React + Next JS with TypeScript, and show how props are immutable while state updates reflect changes.

Learn how to implement reactive updates in a class component by managing state to mark items complete and render changes, using constructor and props to initialize data.

Explore how to pass callbacks to child components and bind methods in React class components, enabling child components to update state via props and event handlers.

Explore styling in React with inline styles and style objects, global CSS, and CSS modules; learn to apply classes with className, conditionally toggle them, and understand scoped vs global styles.

Learn to handle user input in a React form by building a user input component with a text input, a submit handler, and preventing default form submission.

Learn to create a ref with React.createRef to access an input element and its value. Use the ref to add new tasks to a list and update state.

Learn to build controlled inputs in React (and Next.js with TypeScript) by tying input values to state, updating on user input, and replacing refs with a state-driven handler.

Expose the React lifecycle of class components from constructor to componentWillUnmount, including getDerivedStateFromProps and render, and learn error boundaries and local storage data persistence.

Conceptualize a GitHub guides app by outlining components, such as header, search box, and a card list, and emphasize single-responsibility design and component separation.

Learn about functional components and hooks, introduced with React 16.8, and how they empower components while remaining interoperable with class components.

Scaffold a Next.js project with TypeScript using pnpx, set up the app structure and pages, and add scss support for styling.

Create four functional components in a Next.js project, export the page as a component, and set up imports and fragments for input and card UI.

Render user profiles as cards by passing data through props in a card list component, mapping profiles to cards, and using TypeScript interfaces and keys for efficient rendering.

Master nesting in SCSS and using the ampersand to style a module-based card in a React Next.js context, including container, profile image, and box shadow.

Master dynamic updates of profile cards by using the useState hook in functional components, initializing with default profiles from utils and editing them via the setter.

Discover how useEffect adds side effects to a React component, mirroring class component lifecycles. Use dependency array to control when the effect runs, including an empty dependency to run once.

Explore how to access DOM elements with useRef and fetch data in the browser to power a dynamic React + Next.js app with input components, cards, and TypeScript.

Create a global React context with createContext, initialize a provider, and distribute data to all child components. Use useContext to read the shared data across the component tree.

Discover how to use the next/head component to insert meta data, including description and keywords, to boost SEO, search engine visibility, and site responsiveness.

Discover how to implement nested routes in Next.js by organizing pages into directories, creating index files, and using import/export and links to show or hide routes.

Learn to build dynamic routes with slugs in Next.js, use the useRouter hook to access query parameters, and create links to nested pages based on URL IDs.

Explore client-side navigation in Next.js by wrapping UI elements with the Link component to enable fast in-app routing for cards and blogs, while touching on dynamic routes.

Explore implementing nested dynamic routes in a Next.js and React TypeScript app by fetching repositories, rendering a searchable list, and linking to per-repo and branch paths.

Explore code splitting and prefetching in Next.js, showing how routes and components load on demand, prefetching offline to boost navigation performance and preserve smooth offline experiences.

Learn how to add static assets in a Next.js React TypeScript project by importing image assets, turning them into reusable components, and applying norms for creating a course blog set.

Learn to manage multiple apps in a single monorepo with Turborepo, sharing shell dependencies and common modules, and achieve blazing-fast incremental builds through intelligent hashing.

Create and manage a turborepo with apps and packages, configure shared dependencies, and run a local development server to view notes at localhost:3000 and localhost:3001.

Move the GitHub card app into a monorepo for a React + Next.js with TypeScript project, install all packages, remove VPN, and address compatibility issues during a demo.

Utilize a common package in a monorepo setup by sharing common components, managing exports and dependencies, and promoting independence across modules.

Explore how sections are set up, what rendering means, and how to use get static props and get server side methods as you start building.

Set up the blog app in turborepo and confirm the initial setup is okay. Prepare for the next lesson as we start learning about the steady method student.

This lecture explains pre-rendering concepts in React and Next.js with TypeScript, comparing static generation and server-side rendering, and when to use static versus server-side rendering for dynamic data.

Read file names with the fs module on the server side and map them to blog blocks for display in a Next.js app.

Learn how to statically render dynamic pages in Next.js by implementing getStaticPaths, sketching data for routes, and applying temporary inline styles while building reusable logic for dynamic blocks.

Explore static rendering with static props and get static methods, compare to server side rendering, and render blog data using ReactMarkdown with Perimeter library to extract metadata and apply markdown.

Learn to enhance ReactMarkdown by building a reusable image component with props, enabling centered images and blog page customization in a React + Next JS with TypeScript workflow.

Explore setting up styled components in a React + Next JS with TypeScript project, install resets and plugins, and apply CSS-in-JS to replace elements, manage containers, and layout.

Add a blog like button and persist likes to a server or database, using a content plugin to render HTML and demonstrate a near real-world workflow.

Create a like button with a loading icon as a new component in a React + Next JS with TypeScript project, and plan the database setup for next steps.

Set up Prisma with a PostgreSQL database by configuring the environment and credentials, modeling the schema, and applying migrations to generate and manage the database structure.

Create dynamic API routes in a Next.js project for a React plus TypeScript course, exporting a default function to handle requests and return JSON with error handling.

Learn Prisma-driven CRUD in a React and Next.js app, performing get and force update requests to create or update records, and track URL-based lights or likes.

Debounce API calls to improve UX and performance in a React and Next.js with TypeScript app by delaying requests with a timeout and using functional state updates.