Linton Ye – React 101 For Designers

Description

Linton Ye – React 101 For Designers

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