Practical React Bootcamp (Hooks, Router, Redux, & GraphQL)

Install essential packages to enable effective React development on Windows and macOS, including Node.js, npm, and Git. Create your first React application to begin building.

Explore Windows development environments for React, comparing Visual Studio Code and Visual Studio, and learn installation and configuration for efficient coding with Git and IntelliSense.

Set up a mac development environment by downloading, installing, and launching code, adding it to PATH, and using the terminal to run code commands, with cross‑platform setup notes.

Learn to install node.js on Windows and Mac OS using installers, binaries, or Docker images, and use the official docs to get started.

Install and use npm to manage packages in your project, check npm versions, and run common commands like npm install and npm test on Windows or Mac.

Install git to manage source control, connect your local code to a remote repository, and use command line or GUI tools across macOS, Windows, and Linux by following official steps.

Learn how to set up a React development environment on Windows and Mac, install Node.js and npm, configure Git, and create your first React app.

Explore setting up a Windows development environment, install essential tools like npm and git, and create a basic React application to wrap up this bootcamp lecture.

Set up your first React and Redux project for a real client workflow, review the data requirements, and outline the Notley up architecture, navigation, styling, and component implementation.

Set up the app project by creating a new React app, verifying it runs, installing packages, structuring the app, and linking to a code repository and source control.

Set up the Notely app project and test its development server by starting npm start, using Visual Studio Code for editing, and preparing package installation for the next lecture.

Set up the Notely app project by installing redux, react-redux, router and history, and enabling sass and bootstrap, then connect the project to a git repository.

Connect the local React project to the remote repository, commit changes locally, and publish to the remote using git, while handling ignore rules and synchronization.

Review the Notely app requirements, including the home page, available notes, and the create, read, update, and delete flows with subject validation and REST API integration.

Review the Notely back-end REST API and its role in a React-Redux front end, including endpoints to get, create, update, and delete notes.

Identify and document UI components from a given design, map them into a component architecture for a Notely app, and implement them in a React front-end, detailing navigation and composition.

Identify the Notely App’s components and map them into root, header, body, and footer using a mind map. Document each component’s inputs and relationships to enable a coherent React architecture.

Move from mind map to code by implementing Notely app components, distinguishing class-based and functional components, and wiring a root and body components with a Redux store preparation.

Implement the Notely app body component and its children in this lecture, detailing not detail and most detail, and scaffolding class or functional React components with vscode extensions.

Explore structuring the Notely app by balancing class-based and functional components, wiring to a Redux store, and composing header, body, and detail components with prop types.

Build and compose Notely app components, configure routing with a switch, replace the index with the Notely root, and lay groundwork for redux integration before testing.

Implement a practical Notley app navigation system using React Router and Redux, mapping routes to home, about, news, and note-related pages like create, edit, and detail.

Configure a Redux store for the Notely app, manage front-end state with Redux, and implement use-case driven state files for creating, deleting, and listing notes with persistence options.

Configure the Notely app Redux store by importing reducers, applying thunk middleware, and composing them into a state tree, then connect the store to the app with provider and history.

Set up the Notely redux store, initialize with external state and browser history, and outline actions, action creators, and reducers for managing notes and routing.

Define Redux store fundamentals for the Notely app with constants and action types, manage initial state, and dispatch async fetch, create, update, and delete notes via the backend API.

Demonstrates updating a redux store by creating new state with spread syntax, replacing values immutably, and handling add, remove, and update operations on a notes list.

This part guides building the Notely app Redux store for the create note use case, detailing action types, action creators, reducers, and backend fetch integration.

Explore implementing a Redux store for the Notely app, handling delete note workflows, dispatching actions, updating state, and syncing with a REST API to keep the notes list in sync.

Audit the Notely app components, wire state and dispatch with connect, and bind actions to props to fetch notes and render details.

Declare note properties with prop types, connect delete note actions via dispatch, and render a note detail from a list by passing props and navigating with history.

Update the Notely app components by managing state in the parent and passing handlers to functional children, and render header, body, and footer with note data and delete actions.

Shows updating the Notely app components part 4 by replacing links for smoother navigation and wiring a new note form to redux with create note actions.

Update how Notely app components handle events, target elements, and form validation in React, wiring submit to a create note action with REST API integration and Redux state updates.

Learn to update and validate notes in the Notely app, load note data, handle input changes, save edits to the backend, and navigate back to the note list.

Update the Notely app components to handle subject and body inputs, validate before submit, send edited notes to the backend via Redux actions, and support deleting notes with navigation home.

Implement css styling for the Notely app by integrating bootstrap, registering the styles, and applying prepared assets to deliver a clean, responsive React interface.

review the setup of the Notley app project, the api requirements, and the redux store integration, then implement navigation, data fetching, and state updates across the app.

Refocus the Notley app from REST API to GraphQL API, install the necessary packages, and set up the Apollo client. Implement GraphQL queries and mutations to fetch and manage data.

Review the Notley note-taking app and its shift from rest api to GraphQL, highlighting a single endpoint that fetches exactly the needed data to reduce overfetching and api chatter.

Review the Notley GraphQL API, covering queries to fetch all notes or a note and mutations to create, edit, and delete notes, while showing how GraphQL returns only requested fields.

Install required packages for the practical react bootcamp by downloading the project, installing apollo client and craft kill package library, then run npm install and npm start.

Install two packages for the client and the graph kill package library, confirming the setup, and preview the next lecture.

Set up the Apollo client, configure an in-memory cache and link, and refactor the project store to connect with the GraphQL endpoint.

Develop and organize GraphQL queries for a React app using Apollo client, including fetching notes and a note by id, and structuring query files.

Implement GraphQL mutations to create, edit, and delete notes, using the GraphQL tag for mutation definitions, and wire these operations in a practical React setup.

Refactor the Notely app to use GraphQL via Apollo client, replacing REST API calls, updating the store to GraphQL, and wiring components to fetch notes through GraphQL queries.

Refactor the Notely app to use GraphQL mutations via Apollo, replacing REST calls, and implement create, update, and delete notes while ensuring subject and body details are returned.

Review previous lectures, cover GraphQL basics, install packages, set up the Apollo Client, and implement GraphQL queries and mutations.

Explore history CML as a programming language and learn its structure, elements, and attributes for building a full stack application using the Trimble development environment.

Learn the basic structure of an HTML document—doctype, html, head, and body—with meta data and a title, then explore four patterns for arranging containers, sections, fragments, and paragraphs.

Explore the history and purpose of HTML elements, and learn how to use key elements like input, button, textarea, and image within forms and pages.

Explains the structure of html elements, including opening and closing tags, self-closing tags, and content inside. Highlights attributes and div as a generic container, with examples like img and input.

Learn how to define and declare HTML attributes, including boolean and data- attributes, and apply them to elements with id, class, href, and inline style for behavior.

Define an HTML element's content by its opening and closing tags, noting the parent and children elements, and that content may be text or nested elements.

Identify HTML void elements that do not accept content and are self-closing, such as input, image, link, and source, and learn their declaration.

Explore the structure of HTML email documents, learn how to embed inline CSS and JavaScript, link stylesheets, and organize code with external files for practical, scalable email development.

Explore the Document Object Model and its object oriented structure, learn to read and write DOM properties, and manipulate elements with JavaScript using methods like getElementById.

Review the basic structure of HTML documents, including opening and closing tags, void and self-closing elements, and explain how the DOM is built and manipulated with JavaScript, including file organization.

Explore CSX fundamentals for front-end styling, including inline, embedded, and external CSX, plus selectors, cascading, units of measurement, and shorthand and custom properties.

Explore css basics: css syntax, selectors and declarations, the box model, text properties, and flex box layout, plus moving styles to a separate file and using embedded styles.

Learn how to use inline style with the style attribute for dynamic content and content management system emails, and why migrating to a separate stylesheet improves code reuse and scalability.

Explore embedded style in HTML documents, including the style element in the head, selectors, and when to use or avoid embedding versus external style sheets.

Learn to create an external style sheet (.css) and link it to a document using the link element, including using relative paths and the stylesheet relationship.

Explore css selectors and their types, learn how to identify and style elements using id, class, type, attribute, child, and descendant selectors, with practical demonstrations.

Explore how the CSS cascade selects styles across inline, embedded, and browser defaults, override with important, and apply specificity rules to resolve conflicts.

Discover how CSS units define quantities, contrasting absolute units (px, cm, mm) with relative units (em, rem, percentage), and learn to use em and rem for scalable, responsive layouts.

Master shorthand properties and custom properties in CSS, declare custom values, and use the var function to apply globally or within a block, for concise, efficient styles.

Explore core CSS concepts including inline, embedded, and external styles, cascading, and specificity. Learn about relative versus absolute units, shorthand properties, and custom properties with global and local scope.

Explore the Sass crash course and learn to write and compile Sass into CSS for applications, covering variables, operators, flow control, functions, directives, and body element modify in component architecture.

Master the basics of sass, including what sass is, why we need it for large-scale front-end projects, how to structure sass and compile to CSS.

Explore the two core Sass syntax styles: SCSS, the popular brace-and-semicolon format, and the indentation-based Sass syntax, understanding their compatibility and practical differences for CSS workflows.

Explore how to work with variables in SAS, declare and assign values, use default variables, and distinguish global and local scope, with practical examples like setting font size.

Explore SAS operators, including arithmetic, comparison, and logical types, learn how they operate on variables, return true/false results, and apply them in basic SAS code.

Explore SAS flow controls to enable decision making in code, covering if, each, for, and while constructs, with practical examples of lists, conditions, and dynamic class generation.

Learn how SAS functions work, distinguishing custom and built-in types, with examples like lighten, darken, and mix, and how to create and call your own parameterized functions.

Split large Sass projects into underscore-prefixed partial files, import them into a main Sass file, and compile into CSS, enabling modular, maintainable code.

Create and reuse Sass mixins to share code blocks across a project. Use the include directive and parameters, like color and height, to customize the mixin output.

Use the extend directive to share common declarations across style objects, defining style objects with selectors and declaration blocks, and chaining multiple directives to reduce duplication.

Learn how SAS output style controls the look of CSF/CSX, compare nested, compact, and compressed output types, and apply these formats via command-line flags and related tooling.

Master the block element modifier (BEM) naming convention to build maintainable css for large front-end projects. Use consistent block, element, and modifier patterns to ensure team-wide clarity and predictable styling.

Conclude this section by recapping Sass basics, including variables, operators, flow controls, functions, partials, and mixins, then explore directives, syntax types, and block-element-modifier approaches for large-scale styling.

Explore JavaScript basics for frontend and beyond, including statements, expressions, variables, data types, operators, functions, arrays, objects, and promises, to build interactive web applications.

Explore JavaScript expressions and statements, defining expressions as value-returning code and showing arithmetic, string, logical, and assignment forms; then learn declarative, comment, conditional, iteration, and function statements with examples.

Understand and work with JavaScript variables by learning declaration, assignment, and variable scope, including global and local variables, function parameters, and a simple console test.

Explore JavaScript data types, including primitive and non-primitive categories, with examples like numbers, booleans, undefined, null, and objects, and learn common operations such as arithmetic and concatenation.

Explore JavaScript operators across arithmetic, assignment, comparison, logical, and conditional types, with practical examples and an online environment to solidify how these operations affect values.

Learn how to declare and call JavaScript functions, break complex problems into tasks, and understand function name, parameters, and body, with practice in declaration and expression.

Explore JavaScript arrays by defining, initializing, and accessing elements with zero-based indices and the length property, and learn to manipulate them with push, pop, join, splice, and filter.

Define and use JavaScript objects by examining their properties and methods. Create objects with literals or constructors and access properties with dot notation, illustrated by a football example.

Explore JavaScript promises, how to create and consume them, and manage future events using then and catch. Understand pending, fulfilled, and rejected states with real-world examples like delivering a book.

Define and organize JavaScript modules, export and import features across files, and structure large-scale applications into maintainable, reusable code.

Explore core JavaScript fundamentals in this course, from statements and expressions to variables, data types, operators, functions, objects with properties and methods, arrays, indexes starting at zero, modules, and promises.

Capture the big picture of the building material application by tying software design to business needs, defining the problem, and establishing design criteria to measure success.

Explore the building materials business, comparing business models like B2C and B2B, and examine key components—inventory management, logistics, customer service, and payment systems for online and offline operations.

Define the problem to guide software development, using Building Materials Inc. as a case study. Move from manual processes to online presence to improve analysis, customer intelligence, and data protection.

Derive design criteria from business challenges to guide architecture, scalability, maintainability, reliability, and availability for a front-end single-page application backed by a REST API.

Explore turning design criteria into a React single-page app using an MVC pattern and a web API, featuring catalog, cart, checkout, orders, authentication, and payments.

The lecture traces the section’s progression from introduction to lecture one, explores the building material business and its operations, defines the problem, sets design criteria, and presents a solvable plan.

Define the section goal by understanding the requirements for features and set up the React project, covering product catalog, shopping cart, registration, authentication, and admin specifications.

Define the product catalog specifications for displaying products and enabling category and brand filtering. Allow adding items to the cart and outline admin and customer roles.

Explore shopping cart and checkout specifications for a react app, detailing cart navigation via the basket icon, item listing, removal, and a checkout form to submit orders.

Explore customer registration specifications for an e-commerce app, detailing catalog browsing without authentication and required registration with email, username, and password to checkout with shipping and payment details.

Learn the customer authentication specification with login, logout, anonymous browsing, and protected checkout. Understand how authentication and authorization govern access and include password reset and role-based access to admin areas.

Explore administration specifications for an e-commerce back office, covering inventory management, product catalog, brands and suppliers, categories, order handling, returns, logistics, user management, and analytics.

Learn how to set up a new React project, create a big bucket repository, connect the project to source control, and install essential packages.

Install and configure essential React and Redux packages for the BMES project, including redux, redux-thunk, connected-react-router, history, and Bootstrap, then commit and push changes to source control.

Review six topics covered in this section, including product catalog specification, shopping cart and checkout, customer registration and authentication, building material administration, and project setup with testing and source control.