Learn how to incorporate React in real-world web designs. Discover how to manage real-time data, interact with external APIs, and more.
Overview
Syllabus
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
Taught by
Joe Chellman
