Complete React Course for Creating Amazing UI

Explore CodePen setup for building with react by using the in-browser editor, configuring the javascript preprocess and selecting babel, adding react and react-dom, and rendering hello world to the root.

Discover how JSX extends JavaScript to let you write markup-like code, then render it with the render function to a DOM element to display your page.

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.

Render nested elements in JSX, including an ordered list with three items, and wrap adjacent elements in a single outer element to satisfy JSX's single root rule.

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.

Install Node.js and a code editor, set up a new React app with create-react-app, and inspect index.js, components, JSX, and service worker integration.

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.

Define prop types with PropTypes and PropTypes.shape to enforce that a list is an array of objects with a numeric id and a string name, ensuring robust components.

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.

Explore react basics by building a click counter, defining and updating state with setStates, and handling events while resolving this binding issues.

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 a basic tic tac toe square cycles through empty, X, and empty again using a three-item array and a modulo-3 index updated on click.

See how deep copying creates a separate, identical copy of an array using slice, unlike a shallow copy that shares memory between variables.

Learn to implement player turns in a React tic tac toe game by managing the board state, handling square clicks, and toggling between X and O.

Develop a tic tac toe winner detector that checks all winning lines—horizontal (0 1 2, 3 4 5, 6 7 8), vertical (0 3 6, 1 4 7, 2 5 8), and diagonals (4 8, 2 4 6)—to return X, O, or a continue/tie state.

Lift state up in a nine-square board app by passing an update function from the parent to the squares, letting each square modify the parent state and centralize the board.

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.

Bind input value to React state, update on change, and validate forms by auto uppercasing input and enforcing password rules of at least eight characters with an uppercase letter.

Explore two ways to create forms in React: using refs to access input elements, and using controlled components with state and onChange. Master reading and updating input values with event.target.value.

Explore the React component lifecycle functions, covering mounting, updating, and unmounting, follow the order of constructor and getDerivedStateFromProps, and note that some functions are deprecated soon.

Understand how to define a React component constructor, call super(props), and initialize state or bind methods, with guidance on deriving state from props and lifting state up.

Derive state from props using getDerivedStateFromProps, returning a new state object or null after the constructor and when props change or render is forced.

Use the render function to access initial component states and return content for the browser. Leverage componentDidMount to run actions after mounting, including API calls and event subscriptions.

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.

Pass parameters through the route by defining a dynamic postId parameter instead of hardcoding paths. Access postId with curly braces and fetch corresponding data, illustrating how routing becomes scalable.

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

Set up React Router by wrapping the app in BrowserRouter, define routes with path and component, use exact and Switch, pass and access params, and redirect with to.

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.

Build a Chrome extension todo app in React, starting with a functional version, adding delete, check, and drag-and-drop for list organization, styled with a Material UI library and data persistence.

Learn to build a basic React to-do app by managing a todos state, adding and deleting items with unique IDs, and rendering the list with an input and change handling.

Learn to style a to-do app in React using Material UI and Ant Design. Install, import components, and read docs to build a neat, usable UI.

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.

Learn how to use local storage to save and retrieve to-dos with setItem and getItem, stringify arrays with JSON.stringify, and parse back with JSON.parse.

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.