Hello React - React Training for JavaScript Beginners

Explore stateless functional components in React, highlighting pure functions with no state, benefits in readability and performance, and render them to the dom using JSX and react dom.

Practice building stateless functional components by creating seven color components that render each color in an h1 tag, reinforcing React concepts, muscle memory, and component composition.

Learn how to create class components in React with ES6 classes, including syntax, extends React.Component, the render method, and rendering shapes such as circle, square, and rectangle.

Practice building class components in React by creating circle, square, and rectangle components with the ES6 class syntax and rendering them to the DOM inside a parent div.

Learn how to style React components with CSS, using className in JSX, link external stylesheets, and build styled color spectrum components while understanding common pitfalls and practical steps.

Style components by embedding a JavaScript style object and applying it via the style attribute in JSX. Convert multi-word CSS properties to camelCase and keep styling self-contained within each component.

Learn to style React class components with external stylesheets and inline style objects, using className, camelCase properties, and component-level styling.

Learn to create complex components by composing stateless functional and class components, building a color spectrum and shapes example that renders a single complex component in React.

Set up the development environment with script tags, create and compose components, and build a static complex friendly component with avatar, username, like, share, and add.

Create stateless functional components to build a friendly component with an avatar, username, and get connected component, using placeholder divs for icons.

Learn to add Font Awesome icons to React components via a CDN, fix className usage, and extend icon integration across like, share, and add components as styling begins.

Learn to style React components by creating JavaScript style objects and applying them via the style attribute, using camelCase properties, margins and drop shadows to craft polished, reusable UI.

Explore object literal notation in JavaScript and learn how objects, properties, and methods relate. Master dot and bracket notation to access and modify values in real objects like a car.

Explore JavaScript objects through object literal notation, dot and bracket notation, and practical examples like a pizza and a cup to reinforce string, number, and boolean values.

Learn how to access and modify object properties in JavaScript using dot notation and bracket notation, handle invalid variable names, and understand when to quote property names.

Learn to access and change object properties using dot and bracket notation, illustrated with a snowman and a house. Bracket notation handles invalid property names, while dot notation remains cleaner.

Explore props in React by building a stateless functional component that receives data from a parent and renders it, illustrating unidirectional data flow.

Explore how to pass props with class components in React, use this.props for names and colors, style components with a props-driven style object, and render multiple instances.

Refactor the color spectrum into a single props-driven color component, consolidating seven components and demonstrating a dry, reusable approach with color and name props, rendering to the dom.

Practice with props across stateless functional and class components by rendering name, age, and a profile image via props using Reactdom.render to pass values.

Practice passing props in a class component to render name, age, and a profile image with Reactdom.render, then fix prop values and receiving via this.props to see results.

Learn how to pass props from a parent to child components by wiring a full name component to receive first name, last name, and image values.

Practice passing props from parents to children in stateless functional components by wiring first name, last name, and profile through a full name component and validating prop reception.

Learn how to pass values from parent to child with a user object and props in a React app, accessing user.firstname, user.lastname, and user.img in a full name component.

Leverage props to render multiple friendly cards in a React app by passing name and avatar url from parent to child, and adjust styling for spacing and centering.

Explore functional programming in JavaScript by learning map, filter, and reduce, and see how higher-order and pure functions deliver predictable, side-effect-free code.

Discover functional programming in JavaScript, focusing on pure functions and higher-order functions, and learn to replace loops with the filter method for weather data.

Learn how the map method in JavaScript transforms every array element by applying a callback, a higher-order function, and by contrasting it with filter, for loops, and pure functions.

Explore the map higher order function, transforming arrays via chained map calls to double numbers, add one, and convert greetings to uppercase, then apply shift to trim the array.

Transform a JavaScript array into JSX using map to render a dynamic React list, and apply unique keys (id) to each item for efficient updates.

Refactor the component to render the siblings array by applying the map method directly in the return statement, transforming items into JSX without predeclared variables, and verifying zero warnings.

Explore using filter and map on an array of objects to show only female siblings, then transform them to display Julie and Jessica, with method chaining and inline rendering.

Learn to use filter and map to transform an array of objects and render two filtered lists—female siblings and male siblings—into the DOM with React.

Apply map in the render method of a class component to render a list of siblings using this.props, creating a div for each name with keys based on person.id.

Filter the siblings array to include only females, then map to render each female's name to the DOM using a class component approach.

Refactor the color spectrum using the map method to render color blocks from a colors array. Map colors into a color component with a style object and unique keys.

Learn to build a friendly React app by passing an array of people to one component and rendering with the map method, then filter transformed array to create two lists.

Refactor the friendly app to use the filter method alongside map, create gendered arrays, and render separate male and female lists to the DOM with unique keys.