Section 33: React.js

Introduction to Code Sandbox

codesandbox.io

Introduction to JSX

START
END

JSX Code Practice

START
END

Javascript Expressions in JSX & ES6 Template Literals

START
END
Statements vs. Expressions

Javascript Expressions in JSX Practice

START
END

JSX Attributes & Styling React Elements

START
Standard HTML attributes
Lorem Picsum
END

Inline Styling for React Elements

START
CSS Property List
END

React Styling Practice

START
END

React Components

START
Airbnb Style Guide for React
END

React Components Practice

START
END

Javascript ES6 - Import, Export and Modules

START
Node require() vs ES6 import/export
END

Javascript ES6 Import, Export and Modules Practice

START
END

[Windows] Local Environment Setup for React Development Nodejs.org

VS Code
Babel syntax highlighting for code editors
Sublime Babel by Josh Peng - VSCode
Create a new react app
Where to get support if you get stuck

[Mac] Local Environment Setup for React Development Nodejs.org

VS Code
Babel syntax highlighting for code editors
Sublime Babel by Josh Peng - VSCode
Create a new react app
Where to get support if you get stuck

Keeper App Part 1 Challenge

START

Keeper App Part 1 Solution

END
React Props
START
END

React Props Practice

START
END

React DevTools

START
Chrome React Dev Tools
Firefox React Dev Tools
END

Mapping Data to Components

START
END
Mapping Data to Components Practice
START
Emojimeanings.net
The Description List Element
END

Javascript ES6 Map/Filter/Reduce

START
Filter
Map
Reduce
Find
FindIndex
Substring
END

Javascript ES6 Arrow functions

START
Arrow Functions
END

Keeper App Project - Part 2

START
END

React Conditional Rendering with the Ternary Operator & AND Operator

START
Single Responsibility Principle
Ternary Operator Docs
Using the Logical && in React
END

Conditional Rendering Practice

START
END

State in React - Declarative vs. Imperative Programming

Demo
END

React Hooks - useState

START
useState() Docs
END

useState Hook Practice

START
END

Javascript ES6 Object & Array Destructuring

START
Javascript Destructuring

Javascript ES6 Destructuring Challenge Solution

END

Event Handling in React

START
HTML Event Attributes
END

React Forms

START
Controlled Components in Forms
END

Class Components vs. Functional Components State and Lifecycle

Intro to Hooks
Should I use Hooks, classes, or a mix of both? Demo
END

Changing Complex State

START
Synthetic Events
END

Changing Complex State Practice

START
END

Javascript ES6 Spread Operator

START
Spread Syntax
JS ES6
END

Javascript ES6 Spread Operator Practice

START
END

Managing a Component Tree

START
Line Through CSS Property
Generating unique ids with the UUID Package
END

Managing a Component Tree Practice

START
END

Keeper App Project - Part 3

START
END

React Dependencies & Styling the Keeper App

START
Material UI Icons
Material UI Core
Material UI Icons Documentation Material UI Floating Action Buttons Zoom Component Docs Transparent Textures
END