React 101 - basics complete & latest. Forms, routing, async

Set up a React development environment by choosing a code editor such as Visual Studio Code, Atom, or Sublime Text, install Node.js with npm, and optionally install yarn globally.

Learn to use React with plain old JavaScript and HTML, without npm, bundlers, or Babel, and avoid JSX.

learn to create a simple index.html file, generate an initial html structure, set a custom title, and prepare to integrate React and a route into the page.

Learn to set up react and react-dom via script tags in index.html, mount a react app in the browser, and verify with the console using react and react-dom globals.

Learn to write plain JavaScript in separate files, reference scripts in index, embed HTML inside JavaScript, and render a React app without JSX using React.createElement at the root.

Learn how to render a React app by using React.createElement with a component, props, and children, building an H1 and H3 and composing the DOM.

Create a React function that receives props and returns elements using React.createElement, rendering three headers with name, age, and ice color, and the importance of keys for list items.

Add more people by creating multiple React elements, assign unique keys, and use props like name, age, and color to render dynamic updates with template strings.

Build with pure JavaScript in React by creating elements with React.createElement, constructing a human component used three times, and propagating a single change across the app.

Learn to write more beautiful and convenient React code with Jessica, import files into components like images or CFS files, and build your first app using Create React App.

Learn to create a React app using either a global npm install of create-react-app or npx for the latest version, and open the project in VS Code.

Create React App provides a boilerplate that lets you focus on coding rather than setup. It enables transpilation, polyfills, bundling, minification, linting, and a dev server for browser compatibility.

Explore the project structure, including gitignore, dependencies, and common scripts like start and build, and learn how node_modules, public, and src organize a react app.

Learn how to run a React project using the default start script with npm or yarn, understand the reactor scripts package, and see the app automatically refresh during setup.

Remove everything from the source directory, set up a fresh index.js as the main entry point, import React and ReactDOM, render the app, and organize into smaller components and files.

Explore building React components with JSX, returning a single element, and rendering dynamic content via props, while using conditional logic and ternary operators across files.

Create a components folder with header and button components, import them as local modules, and reuse them to build the UI.

Learn a component-based styling approach in React by building modular button components, handling reserved words like class with klus, and applying basic styles while normalizing cross-browser margins for consistent layouts.

Learn to fix cross-browser styling by adding and importing normalize.css, installing the dependency with npm, and applying basic layout tweaks to center a header and use full-height alignment.

Finish styles in a React app by applying class names, styling buttons with color, fonts, background, borders, and margins, and learn to split components into files and add CSS dependencies.

Learn to set up a React app with yarn or npm, structure components in files, apply CSS, use simple expressions and conditionals, add dependencies, and normalize styles for cross-browser consistency.

Explore core React concepts by examining props and events, and compare functional and class components to understand their differences and usage.

Create a clean React app by deleting the source folder, adding index.js, and rendering App into the root with React and ReactDOM, then start the server with npm start.

React components are JavaScript functions that receive props and return elements; use functional components to render content, pass data via props, and remember props are immutable.

Create a React class component by importing React and Component, extending Component, and implementing a render method that returns a dom element, with state, lifecycle methods, and a random method.

Discover how to handle events in React functional components using on click handlers, with inline arrow functions or dedicated handlers. Explore events, including focus, scroll, clipboard, keyboard, and synthetic events.

Explore events in class components by attaching a click handler to a class method and updating state with this.setState to increment a counter and compare to functional components.

Explore unidirectional data flow in React, where the top-level state passes down to children via props and updates are triggered by callbacks from those children to keep data predictable.

We shift from stateful class components to functional components by default, using props for interactivity and only keeping state when necessary. We also explore passing data from child to parent.

Pass data from child to parent by sending a button name or type through a callback prop. Implement a handle function to receive the button details and avoid maximum updates.

Refactor the React component by extracting Battle Creek and times from props, then apply flexbox styles, color, font, and a brightness transition while introducing state to manage brightness.

Learn to create functional and class components in React, compare stateless and stateful approaches, pass props and events between parent and child, and preview state and life-cycle concepts.

Explore state and life-cycle methods in React, learn what state is, how to change it in a class component, and the difference between state and props in everyday life.

Create a clean React app by importing React and ReactDOM, building a class component with state and lifecycle, rendering to the DOM, exporting the app, and running npm start.

Clarify what state is and how it differs from props. Learn to add, access, and update state in React components, with props enabling parent-to-child data flow.

Add a count state initialized to zero and render it in the user interface with buttons to increase or decrease; we will learn how to do that in next lesson.

Add handle increase and handle decrease methods to update the state count asynchronously. Wire these methods to buttons via click events to enable increasing and decreasing the count.

This lecture shows building a React counter with state and props, using a stateful counter and header and button components that pass count via props and handle increase and decrease.

Explore React developer tools in Chrome to inspect component props and state, and use the profiler to measure performance while tweaking counter state and children updates in real time.

Learn how setState schedules updates to a component's state, which are asynchronous, and why using the updater function with previous state ensures multiple increments accumulate correctly.

Explore the React component lifecycle: creation and insertion into the DOM, updating, and removal from the DOM, as events from birth to death.

Learn common lifecycle methods in class components, including the constructor for initial state and the render method, plus mounting, updating, and cleanup via componentDidMount, componentDidUpdate, and componentWillUnmount.

Explore React basics, including state versus props, and how to add, access, and update state, use reactor developer tools, and review life-cycle methods.

In this lecture, students build a tic tac toe game in a basic React app, creating a board of nine squares and a playable game component to manage turns.

Create a React board component that renders nine square subcomponents, exports the board, and uses a functional square with props to display X or O.

Create a tic-tac-toe board by wiring three squares to component state and initializing nine empty strings. Pass onClick from the board, copy the squares array, and update with X placements.

Implement move handling for a board by checking whose move it is, toggling next player, updating the header, and preventing clicks on filled cells.

Implement a tic-tac-toe winner calculator by checking horizontal, vertical, and diagonal lines using zero-based indices, updating status and winner messages as players alternate.

Master the reset feature for a game by implementing a reset button, updating state with a nine-element board, and preparing for move history and tie logic.

Explore different styling approaches for components and learn how to choose among them, preparing you to understand why there are many options for the same action in the next video.

Discover how React’s library nature, not a framework, offers freedom to choose style, state management, and architecture, while weighing external dependencies and project complexity.

Create a clean React app, set up the project folder, and start the dev server to render the application. Then introduce the first styling method as the simplest approach.

Explore normal css, a dependency-free approach with simple class-based styling. Learn its advantages like small file size and clean structure, and understand cascade challenges in large apps.

Explore inline CSS in a React app by building a styles object, applying inline styles via the styles prop to paragraph and bottom elements, and comparing inline versus component-scoped styling.

Discover Sass and SCSS fundamentals by defining primary and accent colors, fonts, and body styles, then apply variables and modules to build scalable styles across a React app.

Learn css modules and their local scope, replacing global styles by importing module files and applying component-scoped class names. See how isolated styling prevents conflicts and duplication with buttons.

Explore css in js (jss) for react by defining useStyles and createStyles to generate classes such as header and paragraph, applying dynamic, themeable styles and comparing with styled components.

Compare styled components and emotion for styling in React, highlighting readability, theme support, and selectors, while noting that styled components add an extra dependency.

Choose between different methods for the same task, as there is no exact answer, and explore different style approaches to build a landing page with stealth components.

Analyze approaches to structuring components and why they matter. Prepare to build your first page using forms, routing, and async patterns in React 101.

Create a simple landing page for a to do list application by styling components with styled components, normalizing styles across browsers, and integrating font awesome icons and fonts.

Implement CSS normalization and load Google fonts, import fonts into index.html, and set the body font to Open Sans to style the landing page before building the hero component.

Build a hero component with a slogan and an email form, style it with styled components, and integrate it into the app layout.

Import and create a header component, style header elements with borders and transparent backgrounds, tune buttons, and prepare an email form for the next lesson in this React 101 module.

Create a styled form with an email input and a submit button, and build an addition component that maps Font Awesome icons to user types such as developers and robots.

Create and style the middle section of a React app, importing React and styles, adding a middle section component with placeholder image and header, centered with flex.

Learn to compose left, middle, and right sections from reusable components, pass props for background color and alignment, and implement flex layouts with centered items and a get line function.

Create a responsive React footer component with a six-item grid, three columns by two rows, styled components, including navigation links, social links, and copyright information.

Create React components from a data tree to speed up development and handle API data, using correct keys to prevent errors and optimize the application.

Learn to prepare a clean React app by creating a new project, importing React and React DOM, rendering a functional component, and debugging an invalid element type.

Learn how to work with arrays of objects in JavaScript and React, using map to render components from data, pass props like name and age, and learn about React keys.

Create React components to display user cards from a people array, including name, role, and avatar; build a reusable card with data props and styled-components, emphasizing accessibility and layout.

Use the map function to render all people as styled cards with name, role, and avatar, and implement responsive grid for mobile, tablet, and desktop with a unique key prop.

Use a unique key for each list item to guide React's reconciliation. Keys enable efficient updates by preserving changes in the virtual DOM and avoiding full re-renders.

Learn how to use a person’s name as a unique key in React, address potential duplicates, and consider if keys pass via props or must be globally unique.

Learn to use unique identifiers for React list items instead of indexes, ensuring keys are unique among siblings and kept internal to React, not exposed via props.

Explore how lists and keys work in JavaScript and React, render list items, understand key uniqueness and scope, and apply data arrays to React components to build a to-do list.