React for Web Designers

Course details

You don't have to start from scratch with React. This super popular JavaScript framework can make your existing websites and apps even better, with very little overhead. In this course, learn practical ways to incorporate React in real-world web designs. Instructor Joe Chellman introduces three small projects that benefit from React: a product manager that showcases React state, props, and events; an employee directory; and a status board that uses React to make external API calls. Each project demonstrates what makes React most interesting and useful to web designers and provides solutions for dealing with the few unique challenges.

Learning objectives
Installing React on an existing site
Thinking about a design in terms of components
Creating fully-featured function components using Hooks
Storing and retrieving data from an external RESTful API
Employing third-party components for CSS animation
Using conditional rendering

Concepts

0. Introduction

01 - Add React to your web designer toolbox
02 - What you should know
03 - Using the exercise files

1. Introducing React

04 - What is React and what is it good for
05 - React Toolbox - ES6, JSX, and more
06 - React concepts and jargon
07 - Everything is components and elements
08 - Our React build process
09 - React and CSS - A special relationship
10 - Installing React Developer Tools

2. First Project - Customizer

11 - Installing React on an existing site
12 - Identifying your components and data
13 - Set up first simple component
14 - Start using JSX with the help of Babel
15 - Attaching a data source
16 - Create a new component with array data
17 - Implement props
18 - Implement state with the useState hook
19 - Add the color selector component
20 - Change options, see reactions
21 - Challenge - Activate the color selector
22 - Solution

3. Second Project - Directory Browser

23 - Use the mockup, make a plan
24 - Scaffold initial components
25 - Functional components
26 - Build the filters form
27 - Forms in React - Controlled or not
28 - Wire up the filters form
29 - Respond to filter form updates
30 - Animating with ReactTransitionGroup
31 - Challenge - Better usability and animation
32 - Solution - Better usability and animation

4. Third Project - Status Updater

33 - Use live data from a RESTful API
34 - Inspecting your starting React code
35 - First API call with useEffect hook
36 - Using conditional rendering
37 - Bring form fields under control
38 - Let form post to the API
39 - Lifting state for data visibility
40 - Completing the status updater

Conclusion

41 - Next steps - React, React Native, and JS