React + Redux - The beginner guide. (+ Typescript )

Create a React project using vite as recommended by the official React documentation, install dependencies, start the dev server with npm run dev, and configure the server port to 3000.

Discover how the virtual dom, a lighter replica of the HTML DOM represented as a JavaScript object tree, enables React to update only the changed parts for smarter rendering.

Access the course code for each video through Udemy resources, switch to the correct git branch on Codiku's GitHub repository, clone, install, and run to test the code locally.

Explore the React project structure by examining node_modules, public assets, and the source folder. Learn how npm install, package.json scripts, and dependencies organize development versus production builds.

Render strings, numbers, and JSX with custom components, skip booleans undefined and null, and remember objects cannot be rendered; use a single parent element or a fragment for nesting.

Learn how ES6 imports and exports work, including named and default exports, how to import with brackets, and best practices for organizing color and car values across modules.

Set up your development environment by installing a preferred code editor (VS Code recommended) and Node.js with npm from the LTS release, then verify with node -v and npm -v.

Install and enable the Prettier plugin in VS Code to format your code on save. Configure the default formatter and turn on editor.formatOnSave in user settings.

Explore how props pass data from a parent to child components in React, use braces to evaluate JavaScript, and access names, objects, functions, and children via props and props.children.

Pass props to HTML elements using camelCase names like onChange and use boolean shorthand for true values. Treat props as read-only and drive conditional rendering based on prop values.

Learn how to create a reactive React component using state with useState, increment an age counter, and understand how state and props trigger re-renders and data flow.

Explore unexpected useState behaviors in React, including asynchronous updates and rendering timing, and useEffect for tracking state. Learn how to avoid infinite loops from setting state in a component body.

Explore React styling options, from inline JSS using a JavaScript object with camelCase properties to CSS modules like style.module.css, enabling unique class names via className.

Learn how to apply multiple CSS module classes in a single className by concatenating strings or using template literals, and mix them with regular classes.

Master callback functions in React by passing functions through props to deeply nested children, triggering parent logic on click, with wrappers and arrow functions, enabling inter-component communication and state updates.

Learn how Babel transpiles ES6 and JSX into ES5 so browsers understand modern React code, turning const declarations, arrow functions, and JSX into compatible JavaScript that builds the DOM.

Master how npm manages libraries and scripts in JavaScript projects, and why NPX runs a package without installation. Explore dependencies, dev dependencies, package.json, and global vs local installs.

Create a difficulty picker in a React + Redux app where selecting a difficulty updates the display and hover highlighting, with the app component managing the current difficulty state.

Discover how to pass functions to events in React, including declarations, arrow functions, and inline handlers, and understand how events decide when to execute using the event object.

Learn how to use loops to render arrays in React, including rendering color divs, ensuring unique keys, and avoiding objects that crash, with a preview of mapping arrays with JSX.

Export the difficulties constant, import it, and map it to list items to reduce redundancy and avoid recalculation on rerenders.

Build the base structure of a password generator card in React by creating four components—card, header, body, and footer—with separate style module CSS, and assemble them in the app.

Build a header with a bold title 'password generator' and a lock SVG icon, import the asset, add alt text, and align them on one line using a flex container.

Create a form in JSX with a select, four checkbox options all default checked, and a generate button, arranged in a grid with styling for layout and centering.

Build a footer in a React + Redux project by rendering text with a copy-paste icon, importing an SVG, and using flex and absolute positioning with a relative parent.

Define a password generation algorithm by building a custom alphabet from form data, ensure at least one character from each selected group, fill remaining slots, then shuffle with Fisher-Yates.

Generate password uses a config object and an algorithm to ensure at least one lowercase, uppercase, numbers, and specials, then builds an alphabet and shuffles the result.

Shuffle an array using the Fisher-Yates algorithm to achieve true randomness, swapping elements with a moving cursor and randomly chosen indices from zero to the cursor.

Copy the input array with spread to avoid mutating state, then shuffle by swapping end elements with a random index, and finally join the result into a string.

Click the generated password to copy it to the clipboard using navigator.clipboard.writeText, wired via an onclick on the footer component with the password from props.

Build the tv show advisor by searching shows, displaying a title, rating, and description, and showing updated recommendations. Deploy with Vercel and fetch data from the movie database API.

Set up your project by joining the movie database, creating and verifying an account, logging in, and locating your API keys (v3) to begin building the app in VS Code.

Structure a React and Redux project with dumb, readable components. Design for future reuse and maintainability with a simple search bar, description, list, and rating component.

Learn how Bootstrap uses a 12-column grid to layout your app with rows and columns, offering responsive breakpoints and mobile-first sizing to create consistent layouts across devices.

Learn to use try, catch, finally, and throw in JavaScript to generate and handle errors, access error.name and error.message, show alerts, and ensure finally runs.

Master asynchronous JavaScript by exploring promises, then, catch, and the use of fetch or axios for remote data. Apply async/await with try/catch to handle errors and JSON responses.

Learn how to fetch popular TV shows with useEffect, store results in state, and control execution with a dependency array and cleanup function to prevent infinite renders.

Learn how the use effect cleanup function runs when a component unmounts and before subsequent effects, preventing lingering intervals by clearing the interval on unmount.

Fetch popular TV shows once with useEffect and store the first result in a local currentTVShow, then centralize URLs in a config and prepare a background image.

Create a TVShowDetail component and render it only when currentTVShow is defined. Style the title, rating, and overview with a CSS module and enable hover-scrolling for the overview.

Build a five-star rating component in React that renders empty, half, and filled stars from a 10-point rating. Implement half-star logic for decimals ≥0.5, and align icons with proper keys.

Create a reusable logo component in React by passing title, subtitle, and image as props, using an image from assets, and white-space: no-wrap to keep the subtitle on one line.

Create a React tv show list item that displays a banner image, truncates long titles to 20 chars, and emits the tvShow on click via a prop.

Style the scrollbar across Windows and Mac by adding bottom padding of 30px, customizing color and border radius, and applying webkit scrollbar classes for moving and idle states.

Click a TV show item to update the current TV show, trigger a refreshed recommendation list via useEffect and fetchRecommendations, and pass an onClick handler through TVShowList to each item.

Design and implement a reusable search bar component that captures input on key up, triggers on enter to send data to its parent, and includes an icon with responsive styling.

Connect a search bar to call /search/tv with a title in a React Redux TypeScript app. Handle enter keystrokes and update the current tv show and recommendations.

Learn to handle request errors in a React app by wrapping fetch calls in a try-catch, displaying user-friendly alerts, and applying consistent error handling across API requests.

Publish a react project by linking a GitHub repository to vercel, deploy, and view a deployment URL; push changes to trigger automatic rebuilds so updates appear online.

Understand development versus production in React, including npm start vs npm build producing a minified production bundle, and how strict mode runs in development to reveal issues.

Discover how to use environment variables to switch between development and production APIs and API keys with a dot env file, and configure Vercel environments for production deployments.

Explore how redux centralizes state in a single store and connects components to read from or write to it, eliminating prop passing in deep component trees.

Build an expense tracker app with Redux that lets you input income and expenses, add items like a laptop or watch, and see updated total expenses and remaining income.

Clone the starter, install React Redux and Redux Toolkit, configure a store with Redux Toolkit, wrap the app with a provider, and enable Redux DevTools for state viewing.

Create a Redux slice with createSlice, set an initialState, export it, and wire its reducer into the root reducer to populate the store with data like expenses or auth status.

Dispatch addExpenseAction from a component to update the expense slice in the Redux store, exporting actions and inspecting the action history and state to time-travel through updates.

Learn to send form data to the redux store using useDispatch by managing local states for price and expenseName, then dispatching addExpenseAction with a payload.

read redux store data with useSelector to render a dynamic expense list. Map over store expenseList in a container to display items and reflect changes automatically.

Create an income input component linked to the expense store, initializing at 1000 and updating via a dispatched setIncomeAction on change, using useSelector and useDispatch.

Learn how the es6 reduce function iterates over an array with a callback, accessing the current item and an accumulator, using an optional initial value to compute a final result.

Connect the expense total component to the store with useSelector, read the expense list and sum prices with reduce and Number.parseFloat, and display remaining money as income minus expenses.

Demonstrate how a Redux diagram reveals the full read-write cycle: from slices and the store, to useSelector reads, dispatch actions, and reducers updating state and triggering re-renders.

Learn how to use Redux middleware to listen to and log actions, implement a logger middleware with Redux Toolkit, and monitor or dispatch actions like addExpense and setIncome.

Build a note manager with React and Redux, featuring create, update, delete, search filtering, routing to notes via React Router, and form validation with a fake back-end that persists data.

Clone the starter project, run npm install, and npm start to tour public assets and the empty store; you’ll see reducers missing, with react router set up next.

Learn how React Router enables in-app navigation by binding URL patterns to components and rendering dynamic content through an Outlet, while keeping a static header in a single-page app.

Set up routing with react-router-dom 6.3.0, create four pages (note, note browse, note create, page not found), and define routes with BrowserRouter, Routes, and Route.

Create a header component with a logo and add-note button that navigates to the note browse and note create pages, using useNavigate for routing.

Learn to store notes in a redux-driven app by creating a note-api for axios calls, building a noteSlice, and fetching all notes on app startup.

Create a note list container connected to the redux store, map notes to text cards, and enable navigation to individual notes with styled, responsive layout.

Build a reusable note form component in React that handles creating and updating notes, with props for note, title, isEditable, and an onSubmit callback.

Build a reusable note form skeleton in React by composing a NoteForm component with title and content inputs, action icons, and a submit button, styled with Bootstrap.

Enhance the note creation form by rendering edit and delete icons conditionally, manage a single formValues state, submit via NoteAPI.create with created_at, dispatch addNote, and navigate to the note list.

Display a red error message below the input and disable the button when there are errors. Build a dedicated error component fed by formErrors state and validate on keystroke.

Master the ES6 spread operator for arrays and objects, enabling clean concatenation, merging, and adding or updating properties. Apply spread in function calls to pass arguments succinctly.

Create a ValidatorService with min() and max() checks that return character-length errors, and wire it to the NoteForm using FieldError components.

You implement form validation by adding an isDisabled prop to ButtonPrimary, create a hasError function using a for in loop to check formErrors, and disable submit button until errors disappear.

Learn how to use ES6 destructuring to extract data from objects and arrays, including nested properties and the rest operator, and apply it in useState patterns.

learn to access the note id from the url with useParams, retrieve the matching note via useSelector and find, and normalize ids to strings for reliable rendering.

Display the note title and content from the store, guarding against undefined data from asynchronous loading. Toggle isEditable and handle onClickEdit and onClickDelete, using pre for line breaks.

Toggle the note form between editable and read-only by managing isEditable, populate inputs with the note content, and conditionally render the submit action with validation.

Submit a note update by calling the backend updateById with the current id and form values, then dispatch the updated note to the store to refresh the note list.

Use the ES6 filter function to remove array elements based on a condition. Return true to keep an element, false to drop it, with optional inline syntax.

Delete a note in a redux app by creating a deleteNote action and filtering the noteList by id. Dispatch the deletion after the API call and navigate to the list.

Create a reusable search bar component and implement real-time filtering of notes by title or content in a store-backed list, using onTextChange, placeholder props, and case-insensitive matching.