React.js 101 Bootcamp: Your Syntax To Success

Explore the syntax variations of JavaScript functions, from the generic function to anonymous and arrow functions, including parameters, function calls, and practical examples for React.js development.

Use object destructuring to extract data from objects, enabling concise access to properties such as first name, last name, age, and city, especially for large objects.

Demonstrates how the rest parameter enables functions to accept any number of arguments, using examples of multiplying numbers and flexible inputs, and explains handling with for each loop.

Learn the spread operator with three dots to combine, copy, and extend arrays, using fruit and number examples to log results in the browser console.

Explore method chaining in JavaScript by building objects with methods that return another object, enabling chained calls via dot notation and preparing you for studying APIs.

Fetch data from a text file and parse it with JSON.parse to turn text into a usable object, with console logging and catch error handling.

Explore how APIs share data using JSON format, fetch from the Star Wars API, parse JSON, and display names on a webpage via DOM manipulation.

Learn how to integrate bootstrap into an existing app that uses an API, building a dynamic Star Wars character table with ten rows, styled with bootstrap classes and template literals.

Discover how to extract images from an API, render ten robot avatars with fetch in JavaScript, and troubleshoot common issues.

Explore building a dictionary app using a free dictionary API, fetch JSON data, and render word definitions, meanings, phonetics, pronunciation, and audio on a web page with JavaScript.

Learn to use API to add a record to a Firebase real-time database by submitting a form with JSON data via fetch post, including form data handling and headers.

Fetch and display existing database records using then and catch, reset the form, and route to a confirmation page. Render the data in a table with thead and tbody.

Create your first React app with create-react-app, start the development server with npm start, and build a simple JSX hello world page by editing App.js.

Create and reuse components in React by organizing code into a components folder, building a sample article component, and importing styles to demonstrate reusable UI blocks.

Learn how to use props in React to pass a title and paragraph to components through destructuring, creating unique content for each article with simple data.

Create a new React project, build components, and pass props to customize content. Learn to use JSX, handle events with onClick, and destructure props for cleaner code.

Explore the useState concept in React by building a toggle button that shows or hides an element, first in vanilla JavaScript and then in React, illustrating boolean state and visibility.

Compare plain JavaScript and React.js variable declarations, mastering useState syntax, and understand when to use const, let, booleans, and arrays with the set function to manage state.

Use the useState hook to initialize a variable and update it with its setter function—the second argument—then trigger changes via a button click.

Initialize a numeric state with useState, update it via onClick to increment or set values, and toggle a boolean to show or hide content in React.js.

Learn to create a navigation with header and links in React, using react-router-dom v5 with Link and Route to connect home, blog, and about pages with exact routing.

Install the latest react-router-dom (6.22.3) and demonstrate page routing with home, blog, and about pages. Configure BrowserRouter, Routes, and NavLink to navigate between pages.

Render dynamic blog data in React by mapping an array of objects to a list, using post title and content with a unique key to update the UI.

Learn to incorporate customized css in a React.js component by creating and importing a css file, then style a table with borders, padding, and action buttons like edit and delete.

Create an array of objects, an object literal, with first name, last name, and city, and render it with map in a React.js app to display dynamic data.

Learn to build a live search box in React using useState to capture input, filter a users list by first name with case-insensitive includes, and update results on change.

Clarify React terminologies by distinguishing components from hooks, explain how useState, useEffect, useContext, useReducer, and useRef attach functionality to components, with examples of navigation bars, links, and search.

Install react-bootstrap and bootstrap via npm, import the Button component, include bootstrap CSS, and explore bootstrap buttons and variants to enhance a table in your app.

Leverage the React Bootstrap table component to render a dark, striped table and upgrade the search to include first name, last name, and city.

Enhance navigation with a react bootstrap navbar and wire links to home, blog, and my table, while using a container grid to place a left form and a right table.

Learn how to use the useState hook with strings, numbers, arrays, and objects; render lists with map and keys; and update state via event handlers and functions in React.

Explore delete functionality in React using onClick, useState, and anonymous or arrow handlers to remove a table row by index with splice.

Create record functionality in react by building a controlled form with useState for first name, last name, city, and age; handle submit to update the users array and reset form.

Select a record by index to edit and populate first name, last name, city, and age in the form. Toggle between submit and update using state and a ternary render.

Learn to implement update data functionality in a React app by wiring an edit button to capture the index and update first name, last name, city, and age.

Discover how a single page application loads once and enables seamless navigation by rendering components within a single html file, using react bootstrap links and conditional rendering.

Explore side effects in React.js by using the useEffect hook and useState, and see how DOM manipulation and event listeners trigger background behavior.

Implement useState to count from zero with a button click and useEffect with a dependency array to log the current count to the console.

Learn how to use the useEffect hook to handle side effects in React, control execution with a dependency array, and react to state changes like count.

Learn to use useRef together with useState and useEffect to implement a dynamic progress bar. Adjust the bar's width via a ref and manage side effects in React.

Explore creating a React timer with useEffect and useState, including a cleanup function, minute and second formatting, and a start button coding challenge.

Explore a practical coding challenge solution in React.js, demonstrating timer logic with useState and useEffect, and a start/stop button with a dynamic label.

Learn to build an image gallery quickly using the React Image Gallery package, install with npm, import its CSS, and configure an images array for a responsive, fullscreen gallery.

Learn to build a React image gallery by importing local images, displaying them in a gallery, and evolving from manual to dynamic rendering with arrays and index-based navigation.

Learn to build a dynamic React image gallery by using map and method chaining to map jpg images from a folder into gallery items and thumbnails.

Customize a React image gallery by adjusting props to toggle thumbnails, set thumbnail position, enable autoplay, and control full screen button, navigation and bullets.

Learn how to convert a plain JavaScript quiz into a React JSX UI, wiring drag-and-drop and click events to validate answers and display confirmation messages.

This lesson demonstrates building drag-and-drop quiz logic in React using useState to track the answer and message, handling drag start, over, drop, and rendering options via a loop.

Learn to implement drag and drop in React by making items draggable, handling onDragStart, onDragOver, and onDrop, rendering with map, and displaying a responsive, colored feedback message.

Learn to build a React.js app that calculates the weeks left in life based on age, using a 90-year assumption, with input validation and project setup from scratch.

Reuse existing assets by building a JSX interface with an input, two buttons, and a display result, applying CSS classes like btn and age input, and compare with plain JavaScript.

Implement the core react.js functionality using user state to capture age input, validate data, and compute remaining weeks by subtracting age from 90 and multiplying by 52.

Demonstrate debugging and implementing the app functionality for a React.js calculator by wiring input changes, fixing remaining years logic, and adding reset and conditional rendering of weeks left.

Master core React concepts by implementing input validation and user feedback alerts with useState and useEffect, while building an age-to-weeks calculator that handles blank or non-numeric input.

Implement a JavaScript function using a regular expression to format numbers with thousand separators. Call this function on a button click to display comma-delimited results like 3,000 or 1,000,000.

explore regular expressions through a plain JavaScript app that tests user input against a pattern with the test method and displays results via a display div.

Master regular expressions to validate user input with a lowercase-uppercase-lowercase pattern using anchors, delimiters, and character classes in JavaScript, and learn how the test method evaluates the input.

learn to validate user input with regular expressions by enforcing three lowercase letters, two digits, and a trailing exclamation point, using anchors and adjustable occurrence counts.

Learn to craft regular expressions with anchors and character classes, define ranges for occurrences, match digits and letters (A-Z, a-z), and apply quantifiers like 3 to 6 in practical examples.

Explore how to validate and transform names with regular expressions in a React.js context, using unlimited occurrences, the plus operator, capture groups, and the global flag to format inputs.