React basic in just 1 hour

Explore how React functions as a library, not a framework, and focuses on the view within ABC model; a top level component manages state and passes data to child components.

Explore why React dominates front-end development with a virtual dom, fast rendering, and efficient diffing. Learn about composable components, easy integration, and simple learning curve, backed by Facebook.

Explore how JSX offers an HTML-like syntax for React, how it differs from HTML, and how it compiles to plain JavaScript so the browser can render component trees.

Create your first react app in an online editor like Plunker without installation, rendering a hello world component with a name prop and the basic project structure.

Create your first React component by defining a functional component, returning simple JSX, exporting it, and importing it in index to see the live preview.

Handle events in React by wiring an onClick handler to a button and defining a function that triggers an alert, wrapping elements in one parent to fix JSX.

Create an inline style object for a green button and apply it with the style property to set background, text color, and padding, testing red and yellow colors as state.

Define and apply CSS classes in a React project, styling a green button and a red tile with background color, white text, padding, and margins via className.

Learn to use React state with a useState hook, create a quantity state initialized to zero, update it with setQuantity on a buy button click, and display the quantity.

Learn how to create reusable components in React by building a product list with function components, wrapping multiple elements in a single parent, and exporting the components.

Learn how to pass data from a parent component to child components using props in React, and distinguish props from state while displaying name and price properties in product components.

Learn to pass a parent function to a child component in React using props, wiring a show function to a button that displays a product name with parameters.

Learn how to lift state up in react by passing prices from child to parent, calculating the total, and sending it back through props to update the UI.

Learn to convert a static product list into a state array, map over it to render product components, pass props, and assign unique keys for efficient rendering.

Create a product form in React by building inputs for name and price, managing state with useState, and handling a create action to display an alert with the entered values.

Create a new product function to add a product object (name and price) to the existing array, update the list with setProducts, and render the updated product list.