React functional component, and Hooks for Beginner

Learn to create functional components in React, split them into multiple reusable components, and import and export them using arrow functions. Organize with folders and manage loading states.

Discover how to assign CSS classes in a React app by using className instead of class, and apply these classes when composing components.

Learn how to declare and use variables in a React app, distinguish between let and const, render dynamic values, and update content with state for interactivity.

Install bootstrap in a React project, add bootstrap to package.json and node_modules, import bootstrap, and use row and column classes to create a two-column layout with six columns each.

Install bootstrap and build a responsive form layout with a column, input groups, and styled buttons inside a React functional component. Use hooks to manage input fields and navigation elements.

Discover how to use a React fragment to wrap elements without creating a parent container; compare this approach with using a wrapper to keep the markup clean.

Explore the useState hook in a React functional component, declare state, and use the setter to update it. Bind inputs and handle onChange events to reflect user input.

Learn how to pass state to a child component with props, create a reusable input component, manage value and onChange, and reuse it in multiple places to keep code dry.

Learn how to pass state to a reusable React component and render form fields conditionally using the ternary operator, handling dynamic values like name and city.

Define a user detail object and render its fields—name, salary, and job—in a React UI, displaying data across three columns by binding object properties to the view.

Explore rendering an array of objects in a React functional component using map, import user details, and pass data to child components with hooks like useEffect.

Learn to set up and implement useEffect to fetch user data from an API and render results in a table. Manage dependencies to avoid repeated calls and handle errors.

Install and import axios, then perform a get request to the EPA endpoint, handle the response data and headers, and learn posting with a payload.

Learn to build a React functional component with hooks that uses Axios post requests to submit user data via a form and handle responses.

Learn how to use the useRef hook in a React function component to access a DOM node, read the current input value, and manage focus via references.

Learn how to implement useContext in React by creating color and user contexts and using them with useContext to share data across levels.