Beginner's Guide to React, Next.js, and TypeScript

Explore React, an open source front end library for building web interfaces, its reusable components and state management, and see how Next.js, built on React, enables a cohesive web framework.

install and bootstrap a react app in Visual Studio Code by running npx create, then start the app with npm start and explore the public and source folders.

Learn how JSX lets you write HTML-like syntax inside JavaScript using curly braces and HTML tags. Create reusable components as functions, wrap multiple tags, and render UI with declarative syntax.

Learn how props pass values from parent to child components, set defaults, use the children prop to wrap elements, render conditionally, and style with object literals in JSX.

Learn how React events work: attach handlers, pass functions as props (on click, on tap), manage bubbling with stopPropagation, and distinguish pure functions from side-effect handling.

Explore how component state acts as memory in React, updated with useState to trigger re-renders while keeping data local to each component and updating the virtual DOM.

Keep react state immutable by copying objects with spread syntax and updating from the copy. Use a library to handle immutability behind the scenes, especially for deeply nested state.

Explore the fundamentals of React with components, state, props, events, and hooks, and learn immutable state management with Emma as you build a todo app using TypeScript and Next.js.

Explore how TypeScript enums define a collection of named constants, including numeric and string enums. Learn about default values, incremented sequences, and the need for string literals in string enums.

Explore NestJS as a React-friendly open-source framework and learn to build with Next.js, install Node.js and VS Code, run npm run dev, and navigate Next.js project structure, routing, and configuration.

Explore how next.js maps the file system to routes, creating nested URLs like /create/todo from folders, with a default page.tsx serving each route.

Learn to implement loading UI and suspense in Next.js apps by wrapping components to show a loading indicator—skeletons, spinners, or a GIF—while data loads, with suspense streaming content.

Learn how to create dynamic routes by naming folders with square brackets, using params to read segments, and implementing catch-all and optional catch-all routes with three dots.

Explore Next.js caching, route revalidation, and fetch API cache control, then compare parallel and sequential data fetching in React with Promise.all and suspense.

Explore server actions, asynchronous server functions that run on the server to handle form submissions in both server and client components.

Build a simple RESTful todo backend with user accounts and JWT authentication, enabling create, read, update, and delete of todos via a two-controller mvc api using entity framework and swagger.

learn how entity framework maps the todo and user tables to entities, with primary key id, foreign key userId, and fields like title, description, complete, and created.

Create a middleware to protect the to do routes in a Next.js app by checking a token cookie, redirecting unauthenticated users to login, and configuring a matcher for multiple paths.

Build a login page with React and Next.js, handling a JWT token and HTTP-only cookies. Implement token validation via middleware and server actions to secure authentication.

Create a sign up page with a form for first name, last name, and password, posting to the create user endpoint and auto authenticating with a token in a cookie.

Create and view todos by fetching user-specific data with a server action, render with map, authorize via cookie token, and paginate to show five items.

Implement a search for todos with a new search component, manage the query via URL search params using useSearchParams, and update the list in real time as users type.

Create and wire a pagination system for todos using a Next.js React app, implementing page number and page size query params, previous and next controls, and a client pagination component.

Implement a complete todo feature using a checkbox that triggers a server action with put request, passing todo ID and authorization. Set is complete and update the backend and UI.

Celebrate your progress mastering React, TypeScript, Next.js, and Node.js, and commit to practice, persistence, collaboration, and open source contributions as you build future web applications.