React Training Course

Delve into advanced JavaScript, covering function constructors and classes, promises and async/await, spread and rest operators, key interpolation for React apps, and array methods map and filter.

Create a sub in the React training folder and in the training photo, then step inside an empty sub section to begin the course setup.

Explore how var, let, and const differ in reassignment and scope in JavaScript, showing visibility inside and outside anonymous blocks and in function contexts.

Explore how const, let, and var govern working with objects and reassigning properties across tasks A–D, including x and y.

See how reassignment differs from data mutation by tracing constant references, object mutations, and updates to an empty object or true.

Explore function constructors and classes in the React training course, as indicated by the lecture title. Understand how constructor functions and class syntax promote organized code.

In the react training course, this lecture on function constructors and classes presents a task and invites you to look at the top and consider what is possible.

Explore function constructors and classes in the React training course, with a solution-focused overview of how these patterns shape component design.

Learn how function references pass a function as a parameter, call it inside another function, return a function, and delay calls with setTimeout.

Create a function array call that takes three parameters (EF1, EF2, EF3), creates an array, pushes the functions as elements, and then calls each function in a loop.

Create an array of three function references (EF1, EF2, EF3) and iterate through it, invoking each element because every item is a function reference.

Explore arrow functions and how they differ from expressions and statements, uncovering hoisting, this binding to the surrounding scope, and usage in classes and object methods.

Convert the provided code to use arrow functions and the project’s functions, then implement and evaluate expressions involving x, c, and returns such as four times x plus c.

Learn arrow function patterns by converting single-parameter and two-parameter functions to concise returns, and build an object with a class constructor to initialize properties.

Explore callbacks, promises, and async/await in JavaScript, compare their use for asynchronous code, demonstrate promise chaining and error handling with catch, and show how async/await simplifies code over callback hell.

Convert a promises-based fetch ajax request to async/await syntax, handle the response as JSON, chain the next step, and print the result.

Explore promises chaining, convert to async/await by wrapping an immediately invoked function expression, fetch data, await the response, parse JSON, and log the result.

Learn how to destructure arrays and objects in JavaScript to unpack values into variables using concise syntax, and apply it to both array elements and object properties.

Learn to use object destructuring on a user object with nested addresses, extracting the street of the first address into a variable named street, and maximize structuring.

Learn to destructure objects and arrays in React by extracting street from a nested addresses array, using object and array destructuring to access values efficiently.

Explore how the spread operator expands arrays and objects, passing arguments, copying arrays, and cloning objects while demonstrating mutation and overriding values.

Learn to use the spread operator to generate sequences and clone objects, creating an increasing numbers function and a transformed coordinates array by multiplying x by 10.

Learn to use the spread operator to build and extend arrays while iterating coordinates, and multiply each x value by ten to yield the solution.

Explore how the rest operator collects an indefinite number of arguments into an array, and demonstrate printing them by a words function and iterating the array.

Explore the rest operator by defining a function multi some that multiplies the first two parameters and, with additional parameters, sums them to return a final result, as in examples.

Demonstrate how the rest operator collects extra parameters into an arcs array, computes a times b plus the sum of arc elements, with validation for undefined inputs.

Demonstrate key interpolation by addressing object keys with strings and mutating values, including numeric keys, and iterate over all key-value pairs using key interpolation.

Learn to implement a function that adds a key-value pair to an object in a React training course, returning the object if the key exists, otherwise adding the pair.

Define a function that takes an object, iterates keys to check for an existing key, returns the object if found, otherwise adds the new key-value pair and returns it.

Learn how to use map and filter to create new arrays from existing ones, doubling elements with map and selecting even numbers with filter, demonstrated through practical code examples.

Use map and filter to transform an array of user objects into uppercase names and countries, and extract German users with more than 10 amount of money.

Map each user to a new object with an uppercase name and country using the spread operator, then filter for users with country Germany and money greater than 10.

Discover JavaScript modules by exporting functions and constants, importing them across files, debugging import errors, and using a local web server to run module-based code, including default exports.

Set up a task folder with index.html and HTML5 boilerplate; implement a module button returning a DOM button with label and on click, showing hello world and a two-second alert.

Create and export a button module that builds a button element with a click handler. Import it, create hello world and delayed alert buttons, and append them to the body.

Learn how the ternary operator acts as a concise conditional expression to assign a string based on an array's length, and replace if statements with a true or false branch.

Translate a conditional statement into a ternary operator by using a constant x equals 10 and handling x greater than 10, less than 10, or equal to 10.

Translate the given conditional into a ternary expression using x and y, with x = 10, covering cases where x is greater than, less than, or equal to 10.

Introduce React classic, show setup and installation on Windows and Linux, and modify a classic example. Explore JSX expressions and conditional rendering, JSX basics, CSS, and subcomponents.

Step inside the react training photo to prepare for the class and set up the heart to react classic, getting you ready to go with react classic.

Install the React framework on Windows by downloading the latest stable version, verify node and npm installations, install npx globally, create a React app, start it, and stop with Ctrl+C.

Install node.js on mac, verify with node -v, download the lts version from nodejs.org, install npm and npx, and create a react app with npx create-react-app.

Set up a Ubuntu Linux environment for React development by updating sources and installing node via n. Create a test React app with npx create-react-app, then run and verify it.

Launch your first React program by starting the web server with npm start, and render a hello world app inside the root element using JSX and a component structure.

Explore JSX expressions and conditional rendering by using curly braces for JavaScript inside JSX, rendering values, performing calculations, and applying logical and ternary operators to control output.

Teach how to render a time-based greeting in React using JSX expressions and conditional rendering, displaying an h2 greeting such as Good Morning or Good day when the page loads.

Calculate the current hour from a date object and build a JSX expression that conditionally renders a greeting: good morning, good day, good evening, or good night.

Learn how JSX uses arrays to render dynamic lists, map numbers to list items, and manipulate arrays with push and constants in a render method.

Learn to handle arrays in JSX by rendering a user table and filtering German users with more than ten money units.

Define a users array of objects and render a jsx table with map to display money, name, country, and year of birth, then filter Germany users with money over 10.

Explore three styling options in React: inline styles via a style attribute with camelCase keys, a style object, and an external css file used with className.

Create a React web app task that builds a string and renders 15 letter boxes, 200x200 pixels, each with the letter centered, under a header of 120px height.

Learn to build a CSS layout by defining inline styles, creating a blue header, and rendering 200x200 letter boxes with centered text using flexbox.

Explore how React components and subcomponents are defined as classes that render JSX, and how an app composes subcomponents like A and B with C and D in a header.

Create a web app by building header and content components, composing them in the app component, and rendering three article components with corn flour blue styling.

Create and compose sub-components in React by building header, content, and article components, applying inline styles, generating random text, and rendering multiple article instances inside content.

Define what a state is and what events are, then elaborate on events in lists in section four.

Store data in state object inside a component, accessed via this.state, and trigger a re-render when it changes using this.setState; direct mutation is allowed only in constructor after super.

Define a state as an empty array of strings in the app component; implement a random string function with parameter n; append a div with the new string every second.

Define a state as a key-value pair of random strings and implement a random string function; set an interval in componentDidMount to append new strings every second.

Learn how React handles events by using event objects and predefined event handlers like on click, on mouse enter, and on change to update state and read input values.

Learn to implement a dynamic form with five text boxes in React, using a single change handler and event.target.name with key interpolation to display each input's value in a span.

Explore handling React events by building five text inputs with distinct names and a single onChange handler that updates the corresponding state and shows values in spans.

Explore handling events in JSX lists by rendering a fruits table from an array with unique keys, binding event handlers, and updating state to add fruits and clear inputs.

Practice handling events in JSX lists by removing items from a state array using index, and add a per-fruit new color button to implement color changes.

Remove a fruit from a React list by locating it by id, cloning the fruits array with spread, and splicing it to update state.

Explore stateful and stateless components, understand downward communication through props, and learn how to pass function references for upward communication, then examine subcomponents with closing tags.

Differentiate stateful and stateless components by using a state object and a render method for stateful components, while functional components rely on their parent for rendering.

Build a React web app using boilerplate code and implement a layout with a stateless header and right sidebar, and a stateful main whose background color changes every two seconds.

Create a three-file React layout with a stateful main class component and functional header and right sidebar, arrange them in a flex container with 100% height and a 120px sidebar.

Master downward communication in React by passing props from a parent app to a child component, and observe how state updates and input changes trigger re-rendering.

Learn downward communication in react by passing color props to three fruit components and wiring a randomize apples button to update each fruit background color from a predefined set.

Demonstrates downward communication by passing color props to three fruit components, and updates colors via a parent button that randomizes a palette and maps new colors to each fruit.

Learn how to enable upward communication in React by passing a function reference from the app to a subcomponent and invoking it on user actions to update app state.

Define and render a group of radio buttons in a React app using input type radio, shared name, and labels, then manage selection with a state array and on click.

Implement upward communication in a React app by passing function references between a parent and a user component. Bind an input to chosen user using a users array and radios.

Explore upward communication in React by passing a select handler from app to a user component, managing a users array with radio buttons and a text input for the selection.

Learn how sub-components with an ending tag render children props and explore self-closing versus start and ending tag patterns in React components B and C using JSX.

Build a web app task dashboard with a status component and a nested div-wrapped button that triggers two alerts.

Build a reusable button component with props.children, ensure children stay inside the button element, and wire a click handler to alert text and a beach image.

Explore the component lifecycle of state for components, then examine the mounting phase, the updating phase, and the announcing phase.

Explore how React components progress through mounting, updating, and removal from the DOM, with React automatically invoking lifecycle methods as components are instantiated, updated by props or state.

Explore the mounting phase in a React class component, including constructor, static getDerivedStateFromProps, render, and componentDidMount, with props and derived state examples.

Explore the updating phase after mounting, where updates come from props or state; learn how gets derived state from props, shouldComponentUpdate, and render control re-rendering, leading to componentDidUpdate.

Explore the mounting and unmounting phase in React by toggling a test component, triggering on mount and the unmount sequence with console logs.

Learn to build a React task dashboard using boilerplate code, manage a three-number random string where each digit is 5 or 6, and implement lifecycle-aware random string updates.

Explore the React lifecycle in action by building a random string generator that responds to prop changes. Use componentDidMount, componentDidUpdate, and shouldComponentUpdate to control mounting and re-renders.

Define a route and explore routing in this short section. See a practical example and complete a task.

This lecture explains how react-router defines routes with paths like /, /home, and products, using switch, route components, and links to render start, products, product details, and not found pages.

Learn to build a React app with routing by creating start, users, and user detail components, wiring routes for user pages, and rendering a user table with detail links.

Create a React routing app with start, users, and user detail components, define routes for start, /users, and /users/:id, and render a users table with detail links.

Explore communication across three or more component layers, from app to nested subcomponents. Review props trading, the context API, and Redux, and see how Redux handles multiple producers.

Demonstrate props drilling by passing a state value X from app to B to C and wiring an increment function upward to update X.

Build a React app that drills props through components from app to C, D, and B, generates random numbers, computes products, and displays whether the product is greater than 100.

Explore props drilling in a React training course, passing down state and callbacks through components, optimizing renders with shouldComponentUpdate, and limiting maximum update depth via last received numbers.

Discover how to use the React Context API to share global state with nested components using a provider and consumer, avoiding prop drilling, and incrementing a shared value.

Master a React Context API task by implementing a provider with x and y and functions to increment x and decrement y, consumed by components B, D, and E.

Learn to implement a context API with a provider and consumers to share x and y across components, and add increment X and decrement Y functions.

Explore the Context API with a reducer to manage global state, dispatch actions, and update state through a switch on action.type, returning the new state.

Create a new web app task dash 102 and refactor the solution of task dash 99 nine to use a reducer with the Context API.

Learn to implement a reducer in a context api to manage x and y, handle increment and decrement actions with a switch, and dispatch updates from consumers.

Explore how redux creates a global state via a store and reducer, wrapped by a provider, with components B and C reading and dispatching increments to X and Y.

Build a redux react app with components a, b, c, d connected to store. B generates 10-character string for c; D increments b by 2; app shows a, b, c.

Create a React Redux workflow, components a, b, c, d, store and reducer; connect them with map state to props and map dispatch to props, wrap with provider, implementing updates.

Learn to manage global state with Redux using multiple reducers and a single store, combine reducers, connect components, and dispatch actions to update x, y, a, and b.

Build a React app with Redux and two reducers, wiring components a through e to a shared store; B generates a 10-character random string, F displays A, B, C.

Learn to set up a redux store with two reducers, connect React components, and implement actions like generate random string, increment, and reset to manage shared state across components.

Explore ajax basics with fetch for ajax requests in modern browsers. See how redux thunk updates the global state and connect to a local host backend with a predefined server.

Fetch data with promises using the fetch library, make a GET request to a json placeholder API, parse JSON, and render a user list from component state.

Fetches user data from a json endpoint, displays id, name, and email in a table, and removes a user from state with an X, using app, users, and user components.

Learn to fetch data in a React app by loading users from an API, storing them in local state, and rendering a table with id, name, and email.

Learn how to integrate redux with thunk to handle ajax requests, create a store, reducer, and actions, wrap your app in a provider, and load data asynchronously into global state.

Build a Redux-based task app with a header and users component, fetch users via Ajax, manage global user state, and implement a search user action to filter results.

Build a React app with Redux and Redux Thunk to fetch and manage user data, connect components, and implement search filtering in a header and a dynamic users table.

Configure localhost as a backend for a React app, run a local server, and proxy requests to support get, post, and delete operations.

Set up a localhost backend for the React app, clone the repo, install packages, start the server, and implement redux actions for get, post, and delete comments via /comments.

Learn to set up localhost backend for a React app by cloning a repo, installing dependencies, configuring proxy, and building Redux-based components to load, post, and delete comments via thunk.

Explore higher order components in react by defining what they are, examining a solid example, and completing a follow-up task.

Explore how higher order components in React return other components to reuse logic and conditionally render based on incoming props.

Create a functional button component in a React setup, pass props like x, and build a higher-order wrapper that doubles the x value and renders the transformed button.

Learn to build a React map app task with a loading state and a user table driven by a higher order component wrapper, showing 'loading' until the data appears.

Implement a React app that simulates loading, passes user data to a user table, and uses a higher-order component to render a loading state or the table.