Learn React In a Better Way

Discover how to pass props to a React component to make it dynamic. Start coding the first example component, using a pen to illustrate the code.

Pass text as props to a greeting component to render dynamic messages, reuse one component with different text values using a text key and curly braces.

Learn how to pass arguments in React using props and the reserved children content. Explore using the children prop to pass greeting text as content and add multiple greetings.

Explore React with vanilla JavaScript demo showing two persons (name and age), using a Person class with padding, margin, and shadow, then refactor into a reusable component to avoid repetition.

Create a React example using a person component to render multiple people by passing name and age, styling with className and basic CSS like padding, border, and shadow.

Implement a flats list in this coding exercise by rendering each flat with an image, link, location, and description using the flet component. Navigate to booking.com on click.

Finish this section by learning what a component is, how to create it, and use props; explore next generation javascript used in the next section; note next action is optional.

Explore next generation JavaScript and its crucial role in React, covering let and const, var, functions, map and filter, module, classes, inheritance, destructuring, and default arguments.

Learn how to use the map function to apply a function to every array element, producing a new array, with examples computing square roots and adding two to elements.

learn how to define a class, implement a constructor, and create rectangle objects with width and height. explore using this and dot notation to access and update properties in React.

Explore advanced class features by defining data members without a constructor, accessing them with this, setting values, and printing results to verify state.

Learn how class inheritance enables code reuse by extending a person to create a student with name, age, and average, without rewriting existing members.

Discover how the spread operator in React merges arrays and objects, showing how to combine items and compose a person object with an address using the three dots.

Explore the rest operator in JavaScript, using three dots to collect function arguments into an array. Compare rest with spread to understand their distinct roles.

Explore destructuring by defining three variables and assigning values through simple syntax, then observe the resulting assignments in the console.

Explore function default arguments in this lecture, demonstrating how omitting parameters uses default values, how changing signatures affects console output, and why default values simplify code.

Congratulations on finishing the next generation JavaScript section, mastering eval and a function class inheritance model used in React as we start the next section.

Set up React projects, learn JSX, create class-based components, and manage props, events, and state to distinguish stateless and stateful components.

Explore the core building blocks for a React project: a dependency management tool, a bundler, Babel compiler, and a development server, then set up and run your first React project.

Learn the React project structure, including a public directory and the S.A.C. directory, how a component class with a render function is exported to index.html, and run with npm start.

This lecture introduces jsx, a javascript syntax that looks like html and lets you write javascript inside it, embedding values with curly braces and using className for styling in React.

Learn to build a dynamic person component in a React project using props, including exporting, importing, and rendering multiple instances with name and age.

Learn to create personal components in a React project and implement events in JavaScript, such as click, on change, on drag, and on focus, validating with npm start.

Learn how state drives the UI in React by updating an object's data member with setState, causing the view to re-render when the message changes.

Learn how to pass a function as a prop from a parent to a child component in React, and trigger it from a button click to execute a handler.

Compare stateless and stateful components in React; stateless components have no state and rely on props. Avoid using state unless necessary, since state changes trigger view updates.

Build three React components—app, input, and output—that use state to reflect user input in real time, so typing in the input updates the output component.

Master creating the art project for the first time, learn about component class six states, events, directional data flow, and stateless versus state components.

Discover two debugging tools for a React application: COM dev tools to inspect and debug JavaScript state and props, and another tool called yakked death tools for additional debugging.

Explore Chrome DevTools to debug a React JavaScript app, using Elements, Console, and Sources tabs to inspect the dom, set breakpoints, watch values, and log output.

Install and use react developer tools to debug a react app, inspect components, props, and state, and interact with inputs to see live state updates.

Finish the section on debugging tools, including browser tools and React developer tools, to debug your application more efficiently, while the next section covers styling your React application.

Learn styling in React by mastering component-based approaches and exploring dynamic styling techniques to apply scalable, effective styles in your apps.

Explore how to use external css in react, create a book component, import a css file, and apply class names to style borders, padding, and alignment.

Learn to apply inline styling in React using the style prop to set a blue background, and compare common notation with camel notation to show both approaches work.

Explore dynamic styling in React by toggling button text color through state, moving from static inline or external styles to a blue and red style system using setState.

Implement input validation in a React exercise by creating input and validation components, using inline styling and external CSS, and comparing hard-coded versus parent-driven validation.

Master styling concepts, including external and dynamic styling, as you complete this section and build a solid foundation. Prepare for the next section on advanced rendering.

Master rendering large lists in React by learning how to render a list, and how to remove items from a list, preparing for thousands of records.

Render a dynamic list of movies in React by mapping an array of movie objects with name and duration, and explore using map and eval to render hundreds of items.

Learn to render a list with index in React by mapping a movies array, showing a zero-based index (plus one) and logging the index to the console on click.

Learn React in a better way demonstrates rendering a list and removing an item by index using splice, updating state to keep the data and the view in sync.

Learn how to render lists in React by giving each item a unique key derived from its id. This prevents warnings and supports correct state updates when removing items.

Learn how to change a class name dynamically in React by toggling a state flag to switch between style one and style two with a button click.

Create a vacations wishlist app in React, filtering active, completed items like Hawaii, Rio de Janeiro, and Rome. Build with components, props, events, and state to manage the list.

Explore mounting as the first-time creation of a component, and see how the constructor and props fit into the component lifecycle.

Explore React's component lifecycle from mounting to unmounting, covering constructor, render, componentDidMount, componentDidUpdate, shouldComponentUpdate, and forceUpdate, with unmount requiring pure functions and mounting/updating allowing side effects.

Build a React library using state and props to create, edit, delete, and toggle books, and record history with date, time, name, pages, and condition using component lifecycle hooks.

Explore single page applications and routing in React, navigate between components, pass parameters during navigation, and route programmatically while considering navigation outcomes.

Learn how a single-page application loads a single HTML file and uses client-side routing to navigate between views like home, sign in, and sign up with instant, in-browser updates.

Create a single-page application with react by installing react, building three components (home, child one, child two), and navigating between pages using react-router-dom's Link and Switch.

Learn to pass information via the router using match.params by navigating with a number parameter and consuming it in a child component through props.

Learners discover how to pass information through the router using location.search as a query string, supply two arguments, and consume them to reflect changes in the page.

Explore routing to non-existent paths, such as child 3, and learn how a not found component and not found page handle undefined routes with styling.

Learn how to navigate between React components programmatically using history.push, including passing query strings and updating routes across child components.

Learn the third way to pass props via router render. See how the name prop updates child 5 using a render, demonstrating props as you’re used to.

Learn to work with a single page application, pass parameters in two ways, handle nonexisting component, and navigate programmatically, preparing you to build more complex React projects.

Learn React by building three projects—tic tac toe game, a generic and easy to use foam, and authentication—so you master concepts and solve challenges on your own.

Build a tic tac toe game in React, with a playable board, animation, placing X and O, detecting wins, and restarting games; emphasizes component structure and correct functionality over styling.

Learn to build an authentication starter project with sign in, sign up, and sign out flows, using Firebase authentication, local storage, and an expiration time.

Finish the project by integrating learned concepts to build self-made apps and create a single-page application, from tic tac toe to authentication, using your phone as needed.