Complete React and Redux Bootcamp Build 10 Hands-On-Projects

Explore ES6, aka ECMAScript 2015, and its key features like const, arrow functions, spread operator, and template literals, to enhance simplicity and readability in modern JavaScript.

Understand the let keyword in JavaScript by comparing block scope to for loop scope, declaring variables correctly, calling functions, and avoiding scope errors with practical code examples.

Master the const keyword to declare constant variables, prevent reassignment, and observe errors when trying to change a constant's value.

Learn to declare and compare traditional JavaScript functions with arrow functions, including single-statement syntax and implicit return, and apply these patterns in React applications.

Learn the for...of loop in JavaScript, compare it with the traditional for loop, and iterate over arrays and strings to print values to the console.

Explore how template literals in JavaScript embed variables using ${} to build strings, and avoid the concatenation operator, as shown in the lecture.

Learn to use the spread operator to add elements to the start or end of an array, comparing it with push and unshift in JavaScript, with practical examples.

Create a new react application using create react app, run the development server, and display hello world on screen; edit src files to trigger automatic reload and see live changes.

Learn how a React app is structured, with node_modules, public and src folders, including global and component styles, npm dependencies, and one index.html and one script for a single-page app.

Learn to debug a React app by tracing execution from the public folder's index.html to the root component, identifying the first executing file, and avoiding changes to core files.

Explore React components as the reusable building blocks of an app, comparing class (stateful) and functional (stateless) components, and illustrating hello world with both approaches.

Create and render a Hello World using a class component in React, importing React and Component, defining a render method, and exporting the class for use in another component.

Learn to build and export a functional component in React, replacing a class component to render hello world, with file creation, import, and JSX.

Build and connect a parent component with a child component using functional components. Import, export, and render reusable components to compose and reuse across the app.

Explore how class components manage state with a constructor and this.state, render state values like player and country in JSX, and contrast them with functional components, described as statelets components.

Declare and initialize state in a class component using a constructor, then read values with this.state and update them with setState. See country and language examples update on button click.

Master props in class components to enable parent and child communication, using keys like language, framework, and movie. Access props in the child with this.props and the constructor.

Pass data from a parent to a child using props in functional components, and read them in the child as props.country and props.game; illustrate no state and clear data flow.

Learn to implement event handling in React class components by wiring onClick and onChange events to show alerts, and applying mouseover events to text within a new React project.

Learn to implement event handling in class components in React by converting from functional components, using arrow functions for handlers, handling onClick, onChange, and onMouseOver with alerts and inputs.

Master inline styling in React by using the style prop with a JavaScript object to set color, backgroundColor, and other properties.

Create and apply local styles by assigning a separate css file to each component, import it, and use class names or dot notation to scope styling in React.

Learn dynamic styling in React by using class components and state to change text color and background color with button clicks and inline styles.

Build a counter app in React using a class component with state to track a number, plus project setup and two buttons to increment or decrement it.

Explore class component lifecycle in React, focusing on componentDidMount and componentWillMount, and see how these methods run automatically during rendering.

Learn how React hooks enable state and lifecycle features in functional components, using useState and useEffect while leveraging auto import extensions and React snippets.

Learn how to use the useState hook to declare and update state in functional components, including strings and arrays like player and numbers, with button-driven changes via events.

Learn how the useEffect hook acts as a lifecycle method in functional components, running automatically after creation to update the language state from Java to JavaScript without manual calls.

Learn to manipulate CSS in functional components using hooks, create a Home component, and use useState to control text and background colors through the style prop and a button click.