TABLE OF CONTENTS
Getting Started
Welcome
What is React?
Components, Props and State
React Components And Sketch Symbols
Coding Exercises
Creating Your First Component
The House Component
JS Premier: ES6 Constants
JS Premier: Arrow Functions
JSX
Magic
JS Premier: Expressions
Placeholders in JSX
Rendering A List
Conditional Rendering
Fragments
Styling Components
JS Premier: Import / Export
JS Premier: Import Project Resources
Style Components with CSS
Inline Styles
CSS-in-JS
styled-components
Making Components Interactive
Blue Roof, Red Roof – Props
Props and styled-components
React Developer Tool
JS Premier: ES6 Class
State and Class Components
Open Sesame! – setState
setState – How does it work?
Sleepy cat – Props and State Re-explained
Sleepy cat 2
React Hooks – useState
Animations
Ninja cat – CSS transitions
Ninja cat – react-motion
Many Ninja cats – CSSTransitionGroup
Putting All Together: Course Project
create-react-app: Create a React project from scratch
Intro to Course Project
Get immediately Linton Ye – React 101 For Designers