React: All You Need to Know with Practical Project

Explore how JSX elements act as syntactic sugar for React elements and how Babel converts JSX to plain JavaScript objects, contrasting them with DOM nodes.

Learn how JSX converts to plain JavaScript objects behind the scenes, using className and camelCase props, with a props object containing children, dynamic content, and tabIndex.

Render JSX elements in the browser after Babel transpiles them to plain JavaScript. Import react and react-dom, select the root div, and render a JSX node.

Define a React component as a function that returns an immutable element, render it with React DOM, and pass props to personalize dynamic content.

Explore how props pass parameters to a React component as an object, how to access props, use ES6 shorthand, and why components should not modify props from outside.

Learn how to export and import a React component, including props, create a js file in the source folder, follow naming conventions, and use default export with main.js imports.

Learn how to structure a React app by defining a root component and a sub component, moving components into a components folder, and understanding render flow.

Pass data or elements as children to a component and access them via this.props.children. Use ES6 shorthand to render children and note that omitting them uses a self-closing tag.

Learn how a class-based component works, including the render method, props, and children, and explore scenarios to convert it to a functional component.

Update state in a class-based React component using setState, with object and callback forms, inside componentDidMount and setInterval. Learn to manage counter and course state safely via functional updates.

Explore the component will unmount method in React, explaining how unmount occurs before closing a component and noting its relation to routing scenarios.

Learn to use state in a functional component with React, declare a data state and its setter, initialize values, and update state using the setter.

Learn how events work in React, using onClick handlers and camelCase event names, and update the data state with the set data function to reflect changes in the UI.

Learn to pass parameters to a React event handler using a callback, update state with course and price, and observe values like view and angular through console logging.

Learn how to conditionally render content in React using if-else logic or the ternary operator driven by component state, with practical examples.

Master conditional rendering in React by using useState to toggle login and logout buttons, show welcome text, and compare ternary operator usage with if-else logic.

Learn to render a list in React by creating a list component and mapping an items array to display course names, with single-line returns and the return keyword.

Learn how to render lists in React by supplying a unique key prop. Use the index as the map function's key to prevent warnings.

Develop a React counter app with a functional component and useState. Increment and decrement using plus and minus buttons, starting at zero, with minus hidden when the count is zero.

Explore controlled form vs uncontrolled form in React, building a form with an input, a value attribute, and an onChange handler to manage user input.

Learn how an onChange event captures input data and accesses event.target name and value. Then store the input value with useState in a course input example.

Learn to build a controlled textarea in React, managing description with useState and onChange, updating values via event.target.value and console.log the description.

Create a controlled select input in React, populate it with country options (USA, Canada, UK), and manage the selected value with state and an onChange handler, including a default selection.

Demonstrates how to implement an input type checkbox, set its name, manage its checked state, and handle change events in a controlled form.

Create three input type radio elements with the name gender and values male, female, and others, wired to an onchange handler that updates state.

Learn submitting forms in React by handling onsubmit of an input type submit, logging country and gender, preventing default reload, and sending data to a third-party API.

Learn to build a React registration form using a single state object, handling inputs (name, email, password, confirm password, country, gender, and agreement), and submitting with preventDefault.

Discover how a higher order component reduces duplicated code by taking a component and returning a new one, illustrated with click counter, hover counter, and text input focus countdown examples.

Create a higher order component by receiving a component as a parameter and returning a new component, then implement a with counter file using useState.

Learn to use a higher order component to wrap a counter component, share state and handlers via props, and reduce code duplication.

Explore render props and the render props pattern, contrasting with higher order components, by returning render logic from a function and by passing a function as props to drive rendering.

Explore render props in React with a click counter and a hover counter. See useState and event handlers drive onClick and onMouseOver inside app.js and counters.

Explore render props variation by transforming counter components into a render props pattern, passing a function as children to manage click and hover counters and verify updates in photo browser.

Explore props drilling in React as a course prop passes through components, identify unnecessary props, and learn how the context API solves this by avoiding prop propagation.

Explore how the context API uses a provider to supply data and a consumer to read it, wrapping components to pass or consume course props.

Create a custom context for the context API by building a context class with a constructor value and provider and consumer methods, and exporting a create context function.

Explore how to use context in React by creating a context with createContext, wrapping components with a provider, and consuming values via the render props pattern for course data.

Discover how to use React's built-in createContext to provide and consume data with a provider and consumer. Learn applying the render props pattern to access a course object from context.

Import and use the useContext hook with the course context to access the course data. Destructure the course value and render it directly, replacing the consumer component.

Discover what React hooks are and how they isolate reusable logic inside functional components. Learn about common hooks like useContext hook, useEffect hook, useCallback, useMemo, useRef, useReducer, and custom hooks.

Explore the useEffect hook in React, learn its two-parameter syntax, how it handles side effects, and how dependencies and initial renders control execution.

Explore how to build a live clock using react hooks. Create a timer component with useState, useEffect, and setInterval to update every second with the current date-time.

Learn how use effect cleanup functions work by returning a callback to stop resources like timers, demonstrated with a setInterval example and clearInterval during component unmount.

Fetch data from an API using useEffect and axios, store posts with useState, and render a post list showing each post title and body from jsonplaceholder.

Explore how to optimize component performance in React by wrapping components with memo and using useCallback to memoize handlers, demonstrated with counter components and prop-driven rerender control.

Explore the useRef hook to access a dom element, focus the first input after initial render with useEffect, and style inputs while managing name, email, and password state.

Explore the useReducer hook for state management in React, using a reducer function and actions like increment and decrement, shown in a counter with plus and minus buttons.

Explore the useReducer hook and its Redux-like pattern by building a complex counter component with an object state, dispatching increment and decrement actions, and extending actions with a value property.

Master fetching post data with the useState hook, add loading and error handling in a new post list component without reducer, and prepare for a future useReducer approach.

Learn to fetch a post list using the useReducer hook, with a reducer handling success and error, managing loading, posts, and error state, and dispatching actions to update user interface.

Create and reuse a custom hook useList to fetch posts with a url and initial state, integrate it into a post list component, and handle loading and error states.