React with Hooks for Beginners

Install Node.js on Windows, including Node and npm, then use npm to install Express and MongoDB driver. Verify installation by running node in the command prompt to check the version.

Install React using Create React App with npx, name the app directory app, then run npm start to launch the development server and confirm that React downloaded successfully.

Learn how JSX combines JavaScript and XML-like syntax, and how Babel compiles JSX into browser-friendly JavaScript using React.createElement for readable, nested code.

Delete the default template files, create index.js, import react and react-dom, render a simple hello component into the root element, and explore basic component structure and imports.

Explore how React components function as functions that return elements; create custom components, render one enclosed element, and import React and ReactDOM to render to the element with id routes.

Learn how to refactor a functional component into a class component by extending React.Component, implementing the render method, and returning JSX to render tags and nested components.

Learn to build and render React components by creating a functional header and a class component, handle events with onClick, and explore fragments and simple app structure.

Split components into separate files in a components folder to improve maintainability and reusability. Import header and button components, and wire them through the main app file and index entry.

Learn how props pass data from a parent to child components, using text and label props, and distinguish functional from class components with this.props.

Explore React lifecycle methods that run on first render, during updates, and on removal for components, including component did mount and component did update; hooks enable them in functional components.

Explore how the state system stores data in class components, using this.state to hold a counter and setState to update it, with a handle button click example.

Learn how to manage this binding in React on button clicks using bind, an arrow-function handler, or an arrow-wrapped call, and why state updates re-render the component.

Create a seconds counter app in React using a class component that shows a you spent header and updates the elapsed seconds every second, cleaning up on unmount.

Learn to build a minimal React form with a text input and submit button, show an alert of the entered data on submit, and explore this binding and value retrieval.

Explains controlled components in React, where a form input's value is managed by the parent state, making validation and updates centralized and straightforward.

Learn how the hook system enables using state and lifecycle concepts in functional components, via built-in methods like useState and useEffect, and contrast functional and class components.

Learn how to implement the useState hook in a React functional component by refactoring a counter app, importing useState, declaring a state variable and setter, and updating on button click.

Learn how to use the useEffect hook in functional components, exploring its three occasions: every render, first render (mount), and first render with conditional updates.

Refactor the seconds counter app from a class to a functional component using useState and useEffect, updating every second with a functional updater and a cleanup on unmount.

Explore how the useEffect return statement runs on every render or first render, and before each next update, including mounting behavior and its distinction from the updater function's return.

Explore how hooks unify functional and class components in React 16.8+, compare past differences, and learn why modern React favors functional components for state and logic.

Compare axios and fetch for requests in React, noting axios auto converts responses to json and offers SRF protection. Install axios, import it in your app, and test it runs.

build the article searcher app with axios to query the Wikipedia API, and render results with a controlled input form and a list component styled using Semantic UI.

Fetch data from the Wikipedia API in a React app using Axios with a debounced input, implemented via useEffect and async/await. Inspect the response data at data.query.search.

Learn to display results by extracting the data object, storing it in state, passing it to the list component, and mapping over results to render each item’s title and snippet.

Learn how to use the dangerouslySetInnerHTML prop in React to render HTML, understand its XSS risks, and implement trusted text and safe links that open in new tabs.

Learn how the key prop helps React track list items, keep keys unique and constant, and prevent unnecessary rerenders, while cleaning up imports and fixing warnings in a search app.

Deploy a React app with Versal, log in, install the Versal CLI, verify your email, deploy to a URL, and update the timer from five to one second.

Learn to deploy a production-ready react app by building with npm run build, using a static folder and index.html, and configuring the /static/js path on a static host.