React for Web Designers

Learn how to incorporate React in real-world web designs. Discover how to manage real-time data, interact with external APIs, and more.

Introduction

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

1. Introducing React

• 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

2. First Project: Customizer

• 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

3. Second Project: Directory Browser

• 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

4. Third Project: Status Updater

• 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

Conclusion

• Next steps: React, React Native, and JS