Complete React Course for Creating Amazing UI

learn how to add attributes to JSX by styling with a javascript object inside double curly braces. use camelCase for style properties; css names stay hyphenated, while JSX uses camelCase.

Wrap JavaScript inside JSX using curly braces and pass styles as a JavaScript object; ensure each JSX block has a single wrapper element, typically a div.

Learn to build your first React components by creating a header and a grocery list, importing and exporting components, and rendering them with a development server.

Learn to render lists in React using map to transform each array element, assign unique keys for efficient rendering, and return JSX list items with arrow function syntax.

Learn to build a React class component by importing React, extending Component, rendering content, and exporting. Create a list with map, using item.id as key and item.name as content.

Learn how props enable high-level components to pass data to lower-level components, reuse the same component with different data, and keep code concise and maintainable in React.

Learn how to prevent undefined lists in React components by applying default props, giving list a default empty array, and safely mapping with list.map to avoid runtime errors.

Explore how to pass props from a parent component to child components, reuse components with different data, and type-check props with prototypes.

Learn to manage component state in React by building a click counter, using setState with previous state, and handling plus and minus buttons while understanding props versus state.

Build an interactive tic tac toe board in React by creating a square component and rendering nine squares, with state passed as props to child components and styled with css.

Learn how to build React forms by using refs and onChange handlers, store input values in state, and implement practical features like default values and console logging.

Explore the React component lifecycle by using getSnapshotBeforeUpdate, componentDidUpdate, and componentWillUnmount to capture DOM snapshots, manage updates, and clean up resources.

Install react-router-dom and wrap your app with BrowserRouter to enable routing in a React browser app, then define Route components with a path like /block to render the block posts.

Learn how to manage routes in React using the Switch component to render only one blog or post component at a time, using route order or the exact property.

Use the Link component from the router to navigate without page refresh, directing to routes like /blogs/one for a seamless blog navigation experience.

Apply the knowledge from the previous nine sections to build real-world, functional graduation projects you can showcase on your CV or personal site, with UI libraries, styling, and data handling.

Reorganize and refactor React code by extracting lists and inputs into components, cleaning imports, and wiring props and handlers with arrow functions to improve maintainability.

master drag and drop in react with the react beautiful dnd library, wrapping your app in a drag drop context and wiring draggable items to droppables in todo lists.

Turn education into a Chrome extension by configuring manifest.json, adding storage permission, and using chrome_url_overrides to load index.html for new tabs; build with a bundler, load unpacked, and test.