React for Web Designers

Introduction

• Add React to your web designer toolbox
• What you should know
• Using the exercise files

• What is React and what is it good for?
• React Toolbox: ES6, JSX, and more
• React concepts and jargon
• Everything is components and elements
• Our React build process
• React and CSS: A special relationship
• Installing React Developer Tools

• Installing React on an existing site
• Identifying your components and data
• Set up first simple component
• Start using JSX with the help of Babel
• Attaching a data source
• Create a new component with array data
• Implement props
• Implement state with the useState hook
• Add the color selector component
• Change options, see reactions
• Challenge: Activate the color selector
• Solution

• Use the mockup, make a plan
• Scaffold initial components
• Functional components
• Build the filters form
• Forms in React: Controlled or not
• Wire up the filters form
• Respond to filter form updates
• Animating with ReactTransitionGroup
• Challenge: Better usability and animation
• Solution: Better usability and animation

• Use live data from a RESTful API
• Inspecting your starting React code
• First API call with useEffect hook
• Using conditional rendering
• Bring form fields under control
• Let form post to the API
• Lifting state for data visibility
• Completing the status updater

• Next steps: React, React Native, and JS