React for Absolute Beginners

Learn the basics of GSX (JSX) in React, writing modular GSX templates, using className and camelCase styling, and interpolating variables and styles to render dynamic content.

Learn what components are in React, how they render UI, and how their reusability and interactivity—via events, state, and modular design—shape a JSX (GSX) driven UI lifecycle.

Learn to create and nest React components, drive dynamic rendering through state and lifecycle events, and render lists by looping arrays into elements. Master event handling for click and hover.

Explore ECMAScript basics and React rendering, learning to use map and filter for concise arrays, declare constants, handle keys, and improve code readability.

Learn to diagnose and fix common React bugs with debugging tools, by resolving unbound events, missing variables, broken imports, and missing return values so pages render correctly.

Explore how data in React is stored as internal state within components and passed via props between components, promoting modular data and proper rendering.

Explore how state resides inside a component and is initialized in the constructor. Learn to render using state data and update it with setState in response to events like clicks.

Learn how to pass data between components with props in React, combine props with state for dynamic rendering, and manage data flow to keep components tidy and maintainable.

Explore React component lifecycle methods from mounting to updating and unmounting, using constructor, render, componentDidMount, componentWillReceiveProps, componentDidUpdate, and componentDidCatch to manage state, props, and DOM updates, including AJAX calls.

Explore how state and props manage data between components to build interfaces. Practice modular, minimal design to avoid spaghetti code while wiring a radio button with onChange to switch views.

Explore how libraries power real-world web apps by connecting to APIs, managing state, using react bootstrap and react select, and leveraging prebuilt components.

Install react bootstrap and react select with npm, include the stylesheets, and configure a bootstrap navigation bar in a react project.

Learn to use fetch for ajax calls to endpoints, load initial data on page load via componentDidMount, and render it in a bootstrap table using React state.

This lecture extends data handling in React by building a state-driven select that filters a table, generates options with a map using value and label, and emphasizes library documentation.

See how React enables building web apps by integrating AJAX calls with libraries. Explore maps, charts, forms, and tables, and practice evaluating packages for front-end projects.

Explore better data flow in React apps using actions, reducers, and Redux. Understand unidirectional data flow, the store, and how components, actions, and Ajax calls interact.

Learn how to name and organize folder structures in a React project—components, actions, reducers, store, and containers—to fit different library patterns and improve collaboration.

Install redux, react-redux, and redux-thunk, then wire actions, reducers, and the store to a simple index and connect the app component for a boilerplate setup.

Discover how actions in Redux dispatch data to reducers, perform fetch and post calls, and structure modular actions that share information across the app's state.

Explore how reducers interpret actions, manage the universal app state, and handle ajax payloads, connecting actions to the store via dispatch and combine reducers across components.

Learn to build a container that connects a component to the universal state, map state to props, and separate concerns between container and component for a modular structure.

Review the unidirectional flow of a Redux app: dispatch actions, fetch data, reducers update the store with payload, and containers map the global state to component props.

Start a fresh react app to build a hub profile with editable and display views using react slick carousel. Implement authentication with the hub api and bootstrap components.

Install the necessary libraries and set up the API integration in a React app; create authorization tokens, issue a fetch call with headers, and display basic user data.

Learn to build the main interface components in a React app by looping over data, using modular components, and editing user info with stateful inputs and immutably updating state.

Master data flow in a React app using Redux to maintain a single source of truth for profile data. Dispatch actions, update reducers, and connect components with containers.

The lecture shows how to add interactivity to a React profile editor with basic validation, state and props handling, and a patch-based save flow to update the authenticated user.

Explore how reducers update a single item in an array of profiles by copying state, creating a new state, replacing the edited profile, and returning the updated state.

Complete the React project by applying finishing touches: clean the interface, ensure reliable data loading from APIs, and tighten redux patterns with containers, map state to props, and dynamic editing.