The Complete React and Next JS Bootcamp 2021

Explore how React, an open source JavaScript library for building user interfaces, powers single-page applications and component-based pages like a portfolio.

Explore JSX in React, comparing traditional HTML manipulation with JSX syntax to render content inside components, use of JavaScript expressions, and React DOM rendering in a single page app.

Learn what a component is in React, how reusable components compose a single‑page application, and how parent and child components organize pages like home, item details, and checkout.

Create a hello world React app using create-react-app, run npm start, and see live reloading display Hello world on localhost 3000.

learn the React project structure, including node_modules, public and source folders, and key files like index.html, manifest.json, package.json, and package-lock.json, plus how npm installs libraries.

Practice debugging a React app by tracing startup execution from index.html through the compiler to the root component, inspecting public and src files, and preserving core files.

Explore components as the basic, reusable building blocks of a React application, including a parent and child setup, with class components using render and functional components showing hello world.

Learn to build a hello world using a class component by importing React and Component, defining a class that extends React.Component, implementing render, and exporting the component.

learn to print hello world with a functional component in react by creating and exporting a function, importing react, and rendering it alongside a class component in the parent.

Learn how to create parent and child components in React using functional components, export and import them, and render reusable components in a parent.

Explore states in class components, create a React class component, initialize state in the constructor, and render state values like player Ronaldo and country Japan.

Learn how to declare and manage state in class components with setState, using a constructor to initialize this.state and a button to update country and language values.

Explore how props enable communication between parent and child in class components, passing data like language, framework, and movie from parent to child and accessing it with this.props.

Learn how to use props in functional components by creating a parent and child component, passing data from parent to child with props, and accessing multiple props inside the child.

Explore React event handling by wiring onClick, onChange, and onMouseOver to buttons and inputs, triggering alerts. See event handling in functional components and preview class components.

Compare event handling in functional and class components in React, and implement arrow-function handlers for click, input change, and hover events.

Apply inline styling in React by using the style prop with curly braces to set color and background color for text elements.

Learn how to implement local styling in React by creating component-specific CSS files, applying class names, and importing styles into components to style individual elements.

Demonstrate dynamic styling in React by using a class component and state to control inline text color and background color through button clicks.

Learn to build a counter program in React with a class component, state initialized to zero, rendering the value, and two on-click buttons to increment or decrement.

Explore the class component lifecycle methods, focusing on component will mount and component did mount. Learn how React calls these automatically around render and why they differ from functional components.

Explore React hooks, including useState and useEffect, and learn how they enable state and lifecycle features in functional components, bridging gaps with class components.

Explore the useState hook in functional components by declaring state variables like player and members, then update them with setPlayer and setMembers via button interactions.

Introduce the useEffect hook in functional components, show how useState initializes language to Java, and demonstrate how useEffect runs automatically to update to JavaScript, illustrating React lifecycle.

Manipulate CSS with React by using hooks and useState to dynamically style elements, changing text color and background color through a button-driven interaction.

Learn to build React forms with functional components and hooks. Create controlled inputs for username and password, manage state with useState, and handle onChange and button clicks.

Build a controlled React form with hooks in functional components, capturing name, username, and age via onChange. Submit logs a user object to the console after preventing default.